Fält för filuppladdning verkar enkla. En knapp som säger "Välj fil" och ett formulär som skickar data. Men filuppladdning är ögonblick med höga insatser. Personen litar på dig med sitt cv, sitt skattedokument, sitt produktfoto. Om uppladdningen känns oklar, krånglig eller som att den misslyckades överger hen formuläret. Om hen inte vet vilka filtyper du tar emot eller hur stor filen får vara slösar hen tid på att ladda upp fel fil bara för att få veta att det misslyckades. Om uppladdningen känns osäker ifrågasätter hen om din webbplats är pålitlig. Den här artikeln går igenom vad som får fält för filuppladdning att fungera, hur du skyddar både användaren och din webbplats och vad de flesta formulär gör fel som gör att folk inte slutför.
Ett fält för filuppladdning gör mer än att ta emot filer. Det samlar in information om tillstånd. En person som laddar upp ett cv säger "här är mina uppgifter, använd dem för rekryteringen". En person som laddar upp ett dokument säger "jag litar på dig med det här". Uppladdningsfältet måste tydligt förmedla vad du kommer att göra med filen, varför du behöver den och att det är säkert att ladda upp.
Därför skiljer sig filuppladdning från andra formulärfält
Ett textfält tar emot ord. Ett e-postfält tar emot en e-postadress. Ett fält för filuppladdning tar emot filer av vilken storlek, typ och ursprung som helst. Det gör filuppladdning i grunden annorlunda än andra formulärfält på tre sätt.
För det första medför filuppladdning säkerhetsrisker. En skadlig fil som laddas upp till din server kan skada din webbplats, stjäla data eller infektera dina besökares enheter. Textfält och e-postfält har tydliga gränser. Filuppladdning har inte det. Någon kan ladda upp ett förklätt körbart program, ett skript eller skadlig kod. Det betyder att du måste validera och skydda dig mot varje uppladdning som kommer in.
För det andra kräver filuppladdning ett tydligt sammanhang. En person behöver veta vilken fil hen ska ladda upp innan hen börjar leta i sin dator. Ett e-postfält är självförklarande. Ett fält för filuppladdning behöver säga "Ladda upp ditt cv i PDF- eller textdokumentformat, högst 5 MB." Utan den tydligheten lägger folk minuter på att hitta en fil bara för att upptäcka att den har fel format eller är för stor.
För det tredje är filuppladdning långsam. Att ladda upp en fil på 10 MB på mobilen över 4G tar tid. Personen väntar. Hen behöver veta att uppladdningen pågår och att den inte har fastnat eller hängt sig. Ett laddningsläge och en förloppsindikator är nödvändiga.
Själva uppladdningsfältet och vad du ska skriva på det
Uppladdningsfältet är knappen som folk klickar på för att välja en fil. Knapptexten spelar roll. Den ska säga vad som händer härnäst.
"Välj fil" är vagt. "Bläddra bland filer" är bättre. "Ladda upp ditt cv" är bäst. Knapptexten bör nämna den specifika filen du vill ha. Det talar om för personen exakt vad hen ska leta efter i sin dator.
Etiketten ovanför knappen bör upprepa kravet. "Cv (PDF eller textdokument, högst 5 MB)". Placera gränsen för filstorlek och godkända format direkt under etiketten. Göm inte informationen under en hjälpikon eller i liten grå text. Folk måste se den direkt, annars vet de inte vad de ska ladda upp.
Om ditt formulär tar emot flera filer bör knappen säga "Lägg till filer" eller "Ladda upp flera filer". Ett fält för en fil som plötsligt tar emot två filer förvirrar folk. Var tydlig.
Om uppladdningen är valfri, säg det. "Portfolio (valfritt, JPG eller PNG, högst 20 MB per bild)". Om uppladdningen är obligatorisk ska etiketten säga "obligatoriskt" eller ha en asterisk. Utgå inte från att folk förstår.
Godkända filtyper och hur du kommunicerar dem tydligt
Du kan inte ta emot alla filtyper. Ditt cv-formulär behöver inte JPEG-foton. Ditt dokumentformulär behöver inte videofiler. Du måste ange exakt vilka filtyper du tar emot.
Använd inte teknisk jargong. Säg inte "MIME-typer" eller "filändelser." Säg "PDF, textdokument eller exporter från Google Docs." Säg "JPG- eller PNG-foton." Säg "kalkylblad." Använd de namn som folk förstår.
När en person laddar upp en fil i fel format måste felet vara specifikt. Inte "Ogiltig filtyp." I stället "Det här formuläret tar emot PDF eller textdokument. Konvertera din fil och försök igen." Berätta vad som gick fel och vad hen kan göra åt det.
Om ditt formulär behöver flera filtyper för olika fält, gör varje fält tydligt. En jobbansökan kan be om ett cv i PDF och ett personligt brev i ett textdokument. Varje fält ska ha sin egen knapp och sina egna godkända typer. Låt inte folk gissa vilken fil som ska vart.
Använd en vitlista för filtyper, aldrig en svartlista. Säg inte "alla filtyper utom körbara filer." Ange i stället exakt vilka typer som är tillåtna. En vitlista är enklare för användare och starkare för säkerheten.
Gränser för filstorlek och hur du hanterar dem
Varje fält för filuppladdning behöver en högsta filstorlek. Utan en kan någon av misstag ladda upp en video på 500 MB, och din server kan krascha eller få slut på lagring.
Storleksgränsen måste motsvara det folk faktiskt använder. Ett cv är vanligtvis 1 till 3 MB. Sätt din gräns till 10 MB för att lämna marginal. Ett profilfoto är 2 till 5 MB. Sätt din gräns till 20 MB. Ett videoklipp kan vara 50 MB till 500 MB. Sätt din gräns utifrån vad du faktiskt behöver.
Berätta storleksgränsen för folk innan de laddar upp. "Största filstorlek är 5 MB." Placera den precis intill knappen. Om någon laddar upp en fil som är för stor ska felet komma direkt och vara tydligt. Inte en snurra som snurrar i 30 sekunder och sedan misslyckas. Visa felet så fort filen har valts, innan uppladdningen startar.
Om du stöder stora filer, överväg att tillåta uppladdning i omgångar eller återupptagbar uppladdning. Om någons fil på 100 MB misslyckas halvvägs låter återupptagbar uppladdning hen fortsätta där det stannade i stället för att börja om. Det förhindrar frustration vid långsam uppkoppling.
Dra och släpp och flera sätt att välja
Fält för filuppladdning bör stödja flera sätt att välja filer. Vissa klickar på knappen. Vissa drar filer från skrivbordet. Vissa bläddrar i mobilens bildbibliotek. Du måste stödja alla.
Knappen är det primära sättet. Den öppnar den inbyggda filläsaren, som fungerar på alla enheter och i alla webbläsare.
Dra och släpp är det sekundära sättet. En person ska kunna dra en fil från sitt skrivbord och släppa den i uppladdningsytan. Det känns snabbare och mer naturligt än att klicka på en knapp och vänta på att filläsaren öppnas. Visa en tydlig visuell signal när någon drar en fil över släppytan. Ytan bör lysa upp, byta färg eller visa en streckad kant. Det talar om för folk att de kan släppa filen här.
På mobilen fungerar filval annorlunda. En person trycker på knappen och väljer mellan sitt bildbibliotek, sin filapp eller att ta ett nytt foto. Stöd det som fungerar på hens enhet. Begränsa inte mobilanvändare till att bara klicka.
Om ditt formulär tar emot flera filer, tillåt både val av flera filer på en gång och tillägg av enskilda filer. Låt folk välja fem filer på en gång i filläsaren. Låt dem också lägga till en fil till efteråt. Tvinga inte allt val att ske i ett och samma webbläsarfönster.
Visa vad som laddats upp och ta bort filer
När någon har valt en fil, visa exakt vad hen har laddat upp. Visa filnamnet, filstorleken och en liten ikon som visar filtypen. Det bekräftar att hen laddade upp rätt fil.
Om formuläret tar emot flera filer, visa alla i en lista. Låt folk se vad de är på väg att skicka. Om de laddade upp fel fil ska de kunna ta bort den och ladda upp en annan innan formuläret skickas.
Borttagningsknappen bör säga "Ta bort" eller ha en X-ikon. Ett klick på den ska ta bort filen från uppladdningslistan. Den ska inte ta bort filen från personens dator, bara från formuläret.
Om någon behöver byta ut en fil, tvinga inte hen att ta bort och ladda upp på nytt. Låt hen klicka på borttagningsknappen och sedan på uppladdningsknappen igen i ett och samma flöde. Eller tillåt klick på filen för att öppna läsaren och välja en ersättningsfil på plats. Färre steg ger högre ifyllnadsgrad.
Visa förlopp och vad som ska synas under uppladdningen
Filuppladdning tar tid. Under den tiden väntar personen och undrar om något händer. Du måste visa förloppet.
Ett förloppsfält är det tydligaste alternativet. Det visar en procentandel som är klar. 25 %. 50 %. 75 %. Klart. En person kan se det röra sig och veta att uppladdningen pågår. Ett förloppsfält som hoppar från 0 % till 100 % direkt är inte till hjälp. Visa ett jämnt förlopp.
Om du inte kan visa exakt procentuellt förlopp, visa en snurra eller en laddningsanimation. Något som rör sig och visar aktivitet. Visa inte ett statiskt laddningsläge utan någon rörelse. Ett statiskt laddningsläge ser ut som att det har hängt sig.
Gör aldrig skicka-knappen klickbar medan en fil laddas upp. Gråa ut den eller inaktivera den. Låt inte folk klicka på skicka flera gånger medan en fil laddas upp. Det kan ge dubbla uppladdningar eller fel.
Om uppladdningen tar mer än tre sekunder, visa en beräknad återstående tid. "Laddar upp. Ungefär 30 sekunder kvar." eller "Laddar upp. Stor fil." Låt inte folk undra hur länge det tar.
Felhantering och varför vaga fel gör att färre blir klara
Uppladdningsfel händer. En fil är skadad. En nätverksanslutning bryts. En fil är för stor. Ett filformat som inte stöds laddades upp. När ett fel uppstår avgör ditt meddelande om personen åtgärdar det eller överger formuläret.
Ett vagt fel som "Uppladdningen misslyckades. Försök igen." berättar ingenting. Försöka vad igen. Vad gick fel. Är filen skadad. Är nätverket trasigt. Är filtypen fel. Vaga fel får folk att känna sig hjälplösa.
Ett specifikt fel pekar ut problemet. "Den här filen är för stor. Din fil är 25 MB. Gränsen är 10 MB. Komprimera filen eller välj en mindre." "Det här filformatet stöds inte. Formuläret tar bara emot PDF och textdokument. Konvertera din fil till PDF och försök igen."
Visa felet på en tydlig plats. Inte gömt i grå text längst ned i formuläret. Använd en röd bakgrund, en röd kant eller en röd ikon. Dra uppmärksamheten till det så att de ser felet direkt.
Ta inte bort filen från uppladdningslistan när ett fel uppstår. Låt den vara synlig så att de vet vilken fil som hade problemet. Låt dem åtgärda det på plats eller byta ut den.
Säkerhet och skydd av både användare och webbplats
Filuppladdning är en svag punkt för säkerheten. En person som laddar upp en fil med dold kod kan skada din server. Ett dåligt uppladdningssystem kan exponera filen för andra användare eller för angripare.
Det första säkerhetssteget är att validera filtypen. Lita inte på filändelsen. En fil som heter "cv.pdf" kan i själva verket innehålla körbar kod. Kontrollera själva filens innehåll, inte bara namnet. Det kallas MIME-typsvalidering. Servern läser filens faktiska innehåll och bekräftar att den verkligen är en PDF, verkligen en bild, vad du än förväntar dig.
Det andra steget är att byta namn på filen efter uppladdningen. Lagra inte filer med de namn som användarna gav dem. Byt namn automatiskt. "cv.pdf" blir "upload-a4f9e2k1.pdf" på din server. Det hindrar någon från att gissa filsökvägen och komma åt den direkt eller försöka köra kod genom att ladda upp en fil med ett särskilt namn.
Det tredje steget är att lagra filer utanför webbkatalogen. Lägg inte uppladdade filer i en mapp som är direkt åtkomlig på internet. Lagra dem separat. När någon behöver ladda ned sin fil, skicka den via en säker länk som löper ut, inte en direkt webbadress till filsökvägen.
Det fjärde steget är att sätta gränser för filstorlek och uppladdningar. Begränsa den totala storleken på varje fil. Begränsa hur många filer någon kan ladda upp. Begränsa hur många uppladdningar en enskild person kan göra per timme. De gränserna förhindrar missbruk och skyddar din server.
Det femte steget är att kräva inloggning. Om ditt formulär inte är offentligt, kräv att användare loggar in innan de laddar upp filer. Det hindrar slumpmässiga personer på internet från att ladda upp skadliga filer till din server.
Det sjätte steget är att använda HTTPS. Varje filuppladdning måste vara krypterad under överföring. Om du laddar upp en fil över vanlig HTTP kan en angripare i nätverket avlyssna den. Använd alltid HTTPS för alla formulär som innehåller filuppladdning.
Så hjälper WEMASY dig att bygga säkra formulär för filuppladdning
WEMASY:s formulärbyggare har fält för filuppladdning med inbyggda säkerhets- och användarfunktioner. Du kan ställa in godkända filtyper, högsta filstorlek och om uppladdning är obligatorisk eller valfri utan att skriva kod. Formulärbyggaren validerar filtyper både på klient- och serversidan för att förhindra skadliga uppladdningar.
Uppladdningar via WEMASY-formulär använder säker HTTPS-kryptering. Filer lagras utanför din webbplatskatalog och levereras via säkra nedladdningslänkar som löper ut. Du behöver inte bygga den infrastrukturen själv.
Uppladdningsgränssnittet har dra och släpp, förhandsgranskning av filer, felhantering och förloppsindikator inbyggt. Formulären visar automatiskt användarna vilka filtyper som tas emot och vilka storleksgränser som gäller. Uppladdning från både mobil och dator stöds.
Du kan anpassa knapptexten, de godkända filtyperna och storleksgränserna efter ditt formulärs behov. Se vilka formulärfunktioner som ingår i din WEMASY-plan.