Felter til filupload ser enkle ud. En knap, der siger "Vælg fil", og en formular, der sender dataene. Men filupload er øjeblikke, hvor der er meget på spil. Personen stoler på dig med sit CV, sit skattepapir eller sit produktbillede. Hvis uploadet virker uklart, besværligt eller som om det mislykkedes, dropper hun formularen. Hvis hun ikke ved, hvilke filtyper du tager imod, eller hvor stor filen må være, spilder hun tid på at uploade den forkerte fil og får så at vide, at det mislykkedes. Hvis uploadet virker usikkert, begynder hun at tvivle på, om din hjemmeside er troværdig. Her kan du læse, hvad der får felter til filupload til at virke, hvordan du beskytter både brugeren og din hjemmeside, og hvad de fleste formularer gør forkert, så folk ikke gør det færdigt.
Et felt til filupload gør mere end at tage imod filer. Det indsamler oplysninger om tilladelser. En person, der uploader et CV, siger "her er mine oplysninger, brug dem til ansættelsen". En person, der uploader et dokument, siger "jeg stoler på dig med det her". Feltet skal tydeligt fortælle, hvad du gør med filen, hvorfor du har brug for den, og at det er trygt at uploade.
Hvorfor filupload er anderledes end andre formularfelter
Et tekstfelt tager imod ord. Et felt til e-mail tager imod en mailadresse. Et felt til filupload tager imod filer af enhver størrelse, type og oprindelse. Det gør filupload helt anderledes end andre formularfelter på tre måder.
For det første indebærer filupload sikkerhedsrisiko. En ondsindet fil, der uploades til din server, kan skade din hjemmeside, stjæle data eller smitte de besøgendes enheder. Tekstfelter og felter til e-mail har tydelige grænser. Filupload har ikke. En person kan uploade et skjult program, et script eller malware. Det betyder, at du skal validere og beskytte mod hvert upload, der kommer ind.
For det andet kræver filupload en tydelig sammenhæng. En person skal vide, hvilken fil hun skal uploade, før hun begynder at lede på sin computer. Et felt til e-mail forklarer sig selv. Et felt til filupload skal sige "Upload dit CV som PDF eller tekstdokument, højst 5 MB." Uden den tydelighed bruger folk flere minutter på at finde en fil og opdager så, at den har det forkerte format eller er for stor.
For det tredje er filupload langsomt. At uploade en fil på 10 MB på en telefon over 4G tager tid. Personen venter. Hun skal vide, at uploadet er i gang, og at det ikke sidder fast eller er frosset. En indlæsningstilstand og en statusindikator er afgørende.
Selve uploadfeltet og hvad du skal kalde det
Uploadfeltet er den knap, folk klikker på for at vælge en fil. Knappens tekst betyder noget. Den skal sige, hvad der sker nu.
"Vælg fil" er upræcist. "Find filer" er bedre. "Upload dit CV" er bedst. Knappens tekst skal nævne den specifikke fil, du vil have. Det fortæller personen præcis, hvad hun skal lede efter på sin computer.
Etiketten over knappen skal gentage kravet. "CV (PDF eller tekstdokument, højst 5 MB)". Sæt grænsen for filstørrelse og de accepterede formater lige under etiketten. Gem ikke oplysningen bag et hjælpeikon eller i lille grå tekst. Folk skal se den med det samme, ellers ved de ikke, hvad de skal uploade.
Hvis din formular tager imod flere filer, skal knappen sige "Tilføj filer" eller "Upload flere filer". Et felt til filupload med én fil, der pludselig tager imod to filer, forvirrer folk. Vær tydelig.
Hvis uploadet er valgfrit, så sig det. "Portefølje (valgfrit, JPG eller PNG, højst 20 MB pr. billede)". Hvis uploadet er påkrævet, skal etiketten sige "påkrævet" eller have en stjerne. Gå ikke ud fra, at folk forstår det.
Accepterede filtyper og hvordan du forklarer dem tydeligt
Du kan ikke tage imod alle filtyper. Din formular til CV behøver ikke JPEG-billeder. Din formular til dokumenter behøver ikke videofiler. Du skal angive præcis, hvilke filtyper du tager imod.
Brug ikke fagsprog. Sig ikke "MIME-typer" eller "filendelser". Sig "PDF, tekstdokumenter eller eksport fra Google Docs." Sig "JPG- eller PNG-billeder." Sig "regneark." Brug de ord, folk forstår.
Når en person uploader en fil i det forkerte format, skal fejlbeskeden være præcis. Ikke "Ugyldig filtype." Men i stedet "Den her formular tager imod PDF eller tekstdokumenter. Konvertér din fil og prøv igen." Fortæl dem, hvad der gik galt, og hvad de skal gøre ved det.
Hvis din formular skal bruge flere filtyper i forskellige felter, så gør hvert felt tydeligt. En jobansøgning kan bede om et CV som PDF og et følgebrev som tekstdokument. Hvert felt skal have sin egen knap og sine egne accepterede typer. Få ikke folk til at gætte, hvilken fil der hører hvor.
Lav en liste over tilladte filtyper og aldrig en liste over forbudte. Sig ikke "alle filtyper undtagen programfiler". Sig i stedet præcis, hvilke typer der er tilladt. En liste over tilladte typer er enklere for brugerne og stærkere for sikkerheden.
Grænser for filstørrelse og hvordan du håndterer dem
Hvert felt til filupload skal have en maksimal filstørrelse. Uden den kan en person komme til at uploade en video på 500 MB, og din server kan gå ned eller løbe tør for plads.
Grænsen skal passe til det, folk faktisk bruger. Et CV fylder typisk 1 til 3 MB. Sæt din grænse til 10 MB, så der er plads. Et profilbillede fylder 2 til 5 MB. Sæt din grænse til 20 MB. Et videoklip kan fylde 50 MB til 500 MB. Sæt din grænse ud fra det, du faktisk skal bruge.
Fortæl folk grænsen for størrelse, før de uploader. "Maksimal filstørrelse er 5 MB." Sæt det lige ved siden af knappen. Hvis nogen uploader en fil, der er for stor, skal fejlen komme med det samme og være tydelig. Ikke en snurrende cirkel, der snurrer i 30 sekunder og så fejler. Vis fejlen, så snart filen er valgt, før uploadet begynder.
Hvis du understøtter store filer, kan du overveje at tillade upload i bidder eller genoptagelige uploads. Hvis nogens fil på 100 MB mislykkes halvvejs, lader et genoptageligt upload dem fortsætte, hvor det stoppede, i stedet for at starte forfra. Det forhindrer frustration ved langsomme forbindelser.
Træk og slip og flere måder at vælge på
Felter til filupload skal understøtte flere måder at vælge filer på. Nogle klikker på knappen. Nogle trækker filer fra skrivebordet. Nogle gennemser billedbiblioteket på deres telefon. Du skal understøtte dem alle.
Knappen er den primære måde. Den åbner den indbyggede filvælger, som virker på alle enheder og i alle browsere.
Træk og slip er den sekundære måde. En person skal kunne trække en fil fra skrivebordet og slippe den i uploadområdet. Det føles hurtigere og mere naturligt end at klikke på en knap og vente på, at filvælgeren åbner. Vis en tydelig visuel markering, når nogen trækker en fil hen over området. Området skal lyse op, skifte farve eller vise en stiplet kant. Det fortæller folk, at de kan slippe filen her.
På mobilen virker filvalg anderledes. En person trykker på knappen og vælger mellem sit billedbibliotek, sin filapp eller at tage et nyt billede. Understøt det, der virker på deres enhed. Begræns ikke mobilbrugere til kun at klikke.
Hvis din formular tager imod flere filer, så tillad både valg af flere filer på én gang og tilføjelse af enkelte filer. Lad folk vælge fem filer på én gang i filvælgeren. Lad dem også tilføje en fil mere bagefter. Tving ikke alt valg til at ske i ét browservindue.
At vise, hvad der blev uploadet, og at fjerne filer
Når nogen har valgt en fil, så vis dem præcis, hvad de uploadede. Vis filens navn, filens størrelse og et lille ikon, der viser filtypen. Det bekræfter, at de uploadede den rigtige fil.
Hvis formularen tager imod flere filer, så vis dem alle på en liste. Lad folk se, hvad de er ved at sende. Hvis de uploadede den forkerte fil, så lad dem fjerne den og uploade en anden, før formularen sendes.
Knappen til at fjerne skal sige "Fjern" eller have et X-ikon. Et klik på den skal fjerne den fil fra uploadlisten. Den skal ikke slette filen fra deres computer, kun fra formularen.
Hvis nogen skal erstatte en fil, så få dem ikke til at fjerne og uploade igen. Lad dem klikke på knappen til at fjerne og derefter på uploadknappen igen i ét flow. Eller lad dem klikke på filen for at åbne filvælgeren og vælge en ny fil på stedet. Færre trin giver flere færdige formularer.
Visning af fremdrift og hvad du viser under upload
Filupload tager tid. I den tid venter personen og undrer sig over, om der sker noget. Du skal vise fremdrift.
En statuslinje er den tydeligste løsning. Den viser en procent. 25 %. 50 %. 75 %. Færdig. En person kan se den bevæge sig og vide, at uploadet er i gang. En statuslinje, der hopper fra 0 % til 100 % med det samme, hjælper ikke. Vis jævn fremdrift.
Hvis du ikke kan vise præcis fremdrift i procent, så vis en snurrende cirkel eller en indlæsningsanimation. Noget, der bevæger sig og viser aktivitet. Vis ikke en stillestående indlæsningstilstand uden bevægelse. Det ser frosset ud.
Gør aldrig send-knappen klikbar, mens en fil uploades. Gør den grå eller deaktivér den. Lad ikke folk klikke på send flere gange, mens en fil uploades. Det kan give dobbelte uploads eller fejl.
Hvis uploadet tager mere end tre sekunder, så vis en forventet tid tilbage. "Uploader. Cirka 30 sekunder tilbage." eller "Uploader. Stor fil." Få ikke folk til at undre sig over, hvor længe der er tilbage.
Håndtering af fejl og hvorfor uklare fejl koster færdige formularer
Fejl ved upload sker. En fil er beskadiget. En netværksforbindelse falder ud. En fil er for stor. Et format understøttes ikke. Når der sker en fejl, afgør din besked, om personen retter den eller dropper formularen.
En uklar fejl som "Upload mislykkedes. Prøv igen." fortæller dem ingenting. Prøve hvad igen. Hvad gik galt. Er deres fil beskadiget. Er netværket i stykker. Er filtypen forkert. Uklare fejl får folk til at føle sig hjælpeløse.
En præcis fejl nævner problemet. "Den her fil er for stor. Din fil er 25 MB. Maksimum er 10 MB. Komprimér filen eller vælg en mindre." "Det her filformat understøttes ikke. Formularen tager kun imod PDF og tekstdokumenter. Konvertér din fil til PDF og prøv igen."
Vis fejlen et tydeligt sted. Ikke gemt i grå tekst nederst i formularen. Brug en rød baggrund, en rød kant eller et rødt ikon. Fang opmærksomheden, så de ser fejlen med det samme.
Slet ikke filen fra uploadlisten, når der sker en fejl. Lad den blive synlig, så de ved, hvilken fil der havde problemet. Lad dem rette det på stedet eller erstatte den.
Sikkerhed og beskyttelse af både bruger og hjemmeside
Filupload er et svagt punkt i sikkerheden. En person, der uploader en fil med skjult kode, kan skade din server. Et dårligt uploadsystem kan udsætte filen for andre brugere eller for angribere.
Det første sikkerhedstrin er at validere filtypen. Stol ikke på filendelsen. En fil, der hedder "cv.pdf", kan i virkeligheden indeholde kode, der kan køres. Tjek selve filens indhold og ikke kun navnet. Det kaldes validering af MIME-type. Serveren læser filens faktiske indhold og bekræfter, at den virkelig er en PDF, virkelig et billede, eller hvad du nu forventer.
Det andet trin er at omdøbe filen efter upload. Gem ikke filer med de navne, brugerne gav dem. Omdøb dem automatisk. "cv.pdf" bliver til "upload-a4f9e2k1.pdf" på din server. Det forhindrer nogen i at gætte filens sti og få direkte adgang til den eller prøve at køre kode ved at uploade en fil med et bestemt navn.
Det tredje trin er at gemme filer uden for mappen med hjemmesidens filer. Læg ikke uploadede filer i en mappe, der er direkte tilgængelig på internettet. Gem dem for sig. Når nogen skal hente sin fil, så send den gennem et sikkert link, der udløber, og ikke en direkte webadresse til filens sti.
Det fjerde trin er at sætte en maksimal filstørrelse og grænser for upload. Begræns den samlede størrelse af hver fil. Begræns antallet af filer, nogen kan uploade. Begræns, hvor mange uploads en enkelt person kan lave på en time. De grænser forhindrer misbrug og beskytter din server.
Det femte trin er at kræve login. Hvis din formular ikke er offentlig, så kræv, at brugerne logger ind, før de uploader filer. Det forhindrer tilfældige folk på internettet i at uploade ondsindede filer til din server.
Det sjette trin er at bruge HTTPS. Hvert filupload skal være krypteret under overførsel. Hvis du uploader en fil over almindelig HTTP, kan en angriber på netværket opsnappe den. Brug altid HTTPS til enhver formular med filupload.
Sådan hjælper WEMASY dig med at bygge sikre formularer med filupload
WEMASYs formularbygger har felter til filupload med indbyggede funktioner til sikkerhed og brugeroplevelse. Du kan vælge accepterede filtyper, maksimal filstørrelse og om uploads er påkrævede eller valgfrie uden at skrive kode. Formularbyggeren validerer filtyper både hos brugeren og på serveren for at forhindre ondsindede uploads.
Uploads gennem WEMASY-formularer bruger sikker HTTPS-kryptering. Filer gemmes uden for din hjemmesides mappe og leveres gennem sikre downloadlinks, der udløber. Du skal ikke selv bygge den infrastruktur.
Uploadfladen har træk og slip, forhåndsvisning af filer, håndtering af fejl og visning af fremdrift indbygget. Formularerne viser automatisk brugerne, hvilke filtyper der tages imod, og hvad grænserne for størrelse er. Upload fra både mobil og computer understøttes.
Du kan tilpasse knappens tekst, de accepterede filtyper og grænserne for størrelse, så de passer til din formular. Se, hvilke formularfunktioner der er med i din WEMASY-plan.