Uploadvelden lijken simpel. Een knop met "Kies bestand" en een formulier dat de gegevens verstuurt. Maar bestanden uploaden zijn belangrijke momenten. Iemand vertrouwt je zijn cv, zijn belastingdocument of zijn productfoto toe. Voelt het uploaden onduidelijk, onhandig of alsof het mislukte, dan haakt hij af. Weet hij niet welke bestandstypen je accepteert of hoe groot het bestand mag zijn, dan verspilt hij tijd aan het uploaden van het verkeerde bestand en hoort hij dat het mislukt is. Voelt het uploaden onveilig, dan vraagt hij zich af of je site te vertrouwen is. Dit artikel laat zien wat uploadvelden laat werken, hoe je zowel de gebruiker als je site beschermt en wat de meeste formulieren fout doen waardoor mensen niet doorzetten.
Een uploadveld doet meer dan bestanden accepteren. Het verzamelt informatie over toestemming. Iemand die een cv uploadt, zegt: "hier is mijn informatie, gebruik die voor werving." Iemand die een document uploadt, zegt: "ik vertrouw je dit toe." Het uploadveld moet duidelijk laten zien wat je met het bestand doet, waarom je het nodig hebt en dat het veilig is om te uploaden.
Waarom bestanden uploaden anders is dan andere formuliervelden
Een tekstveld accepteert woorden. Een e-mailveld accepteert een e-mailadres. Een uploadveld accepteert bestanden van elke grootte, elk type en elke herkomst. Daardoor verschilt uploaden op drie punten wezenlijk van andere formuliervelden.
Ten eerste brengt uploaden beveiligingsrisico met zich mee. Een kwaadaardig bestand op je server kan je site beschadigen, gegevens stelen of de apparaten van je bezoekers infecteren. Tekstvelden en e-mailvelden hebben duidelijke grenzen. Uploadvelden niet. Iemand kan een vermomd uitvoerbaar bestand, een script of malware uploaden. Daarom moet je elke upload valideren en je ertegen beschermen.
Ten tweede heeft uploaden duidelijke context nodig. Iemand moet weten welk bestand hij moet uploaden voordat hij op zijn computer gaat zoeken. Een e-mailveld spreekt voor zich. Een uploadveld moet zeggen: "Upload je cv in PDF- of Word-formaat, maximaal 5 MB." Zonder die duidelijkheid zoeken mensen minutenlang een bestand en ontdekken ze dan dat het verkeerde formaat of te groot is.
Ten derde is uploaden traag. Een bestand van 10 MB uploaden op een telefoon via 4G kost tijd. De persoon wacht. Hij moet weten dat het uploaden bezig is en niet vastzit of bevroren is. Een laadstatus en een voortgangsindicator zijn onmisbaar.
Het uploadveld zelf en hoe je het labelt
Het uploadveld is de knop waarop mensen klikken om een bestand te kiezen. De tekst op de knop doet ertoe. Hij moet zeggen wat er daarna gebeurt.
"Kies bestand" is vaag. "Bestanden zoeken" is beter. "Upload je cv" is het best. De knoptekst moet het specifieke bestand noemen dat je wilt. Zo weet de persoon precies waar hij op zijn computer naar moet zoeken.
Het label boven de knop moet de eis herhalen. "Cv (PDF of Word, max. 5 MB)". Zet de limiet voor bestandsgrootte en de toegestane formaten direct onder het label. Verstop deze informatie niet onder een hulpicoontje of in kleine grijze tekst. Mensen moeten het direct zien, anders weten ze niet wat ze moeten uploaden.
Accepteert je formulier meerdere bestanden, dan moet de knop "Bestanden toevoegen" of "Meerdere bestanden uploaden" zeggen. Een uploadveld voor één bestand dat plotseling twee bestanden accepteert, verwart mensen. Wees duidelijk.
Is uploaden optioneel, zeg dat dan. "Portfolio (optioneel, JPG of PNG, max. 20 MB per afbeelding)". Is uploaden verplicht, dan moet het label "verplicht" zeggen of een sterretje hebben. Ga er niet van uit dat mensen het begrijpen.
Toegestane bestandstypen en hoe je ze duidelijk maakt
Je kunt niet elk bestandstype accepteren. Je cv-formulier heeft geen JPEG-foto's nodig. Je documentformulier heeft geen videobestanden nodig. Je moet precies aangeven welke bestandstypen je accepteert.
Gebruik geen vakjargon. Zeg niet "MIME-types" of "bestandsextensies". Zeg "PDF, Word-documenten of Google Docs-exports." Zeg "JPG- of PNG-foto's." Zeg "Excel-spreadsheets." Gebruik de namen die mensen begrijpen.
Uploadt iemand een bestand in het verkeerde formaat, dan moet de foutmelding specifiek zijn. Niet "Ongeldig bestandstype." Maar: "Dit formulier accepteert PDF- of Word-documenten. Zet je bestand om en probeer het opnieuw." Vertel wat er misging en wat ze eraan kunnen doen.
Heeft je formulier voor verschillende velden meerdere bestandstypen nodig, maak dan elk veld duidelijk. Een sollicitatie vraagt misschien om een cv als PDF en een motivatiebrief in Word. Elk veld moet een eigen knop en eigen toegestane typen hebben. Laat mensen niet raden welk bestand waar hoort.
Maak een lijst van toegestane bestandstypen, nooit een lijst van verboden typen. Zeg niet "alle bestandstypen behalve uitvoerbare bestanden." Zeg precies welke typen zijn toegestaan. Een lijst van toegestane typen is eenvoudiger voor gebruikers en sterker voor de beveiliging.
Limieten voor bestandsgrootte en hoe je ermee omgaat
Elk uploadveld heeft een maximale bestandsgrootte nodig. Zonder limiet kan iemand per ongeluk een video van 500 MB uploaden en kan je server crashen of zonder opslagruimte komen.
De limiet moet passen bij wat mensen echt gebruiken. Een cv is meestal 1 tot 3 MB. Stel je limiet in op 10 MB voor wat ruimte. Een profielfoto is 2 tot 5 MB. Stel je limiet in op 20 MB. Een videoclip kan 50 MB tot 500 MB zijn. Stel je limiet in op basis van wat je echt nodig hebt.
Vertel mensen de limiet voor ze uploaden. "Maximale bestandsgrootte is 5 MB." Zet het direct naast de knop. Uploadt iemand een te groot bestand, dan moet de fout direct en duidelijk zijn. Geen draaiend icoon dat 30 seconden draait en dan faalt. Toon de fout zodra het bestand is gekozen, voordat het uploaden begint.
Ondersteun je grote bestanden, overweeg dan uploaden in delen of hervatbaar uploaden. Mislukt het bestand van 100 MB van iemand halverwege, dan laat hervatbaar uploaden hem verdergaan waar het stopte in plaats van opnieuw te beginnen. Dat voorkomt frustratie bij trage verbindingen.
Slepen en meerdere manieren om te kiezen
Uploadvelden moeten meerdere manieren ondersteunen om bestanden te kiezen. Sommige mensen klikken op de knop. Sommige mensen slepen bestanden vanaf hun bureaublad. Sommige mensen bladeren door hun fotobibliotheek op hun telefoon. Je moet ze allemaal ondersteunen.
De knop is de primaire methode. Die opent de standaard bestandskiezer, die op elk apparaat en in elke browser werkt.
Slepen is de tweede methode. Iemand moet een bestand van zijn bureaublad kunnen slepen en in het uploadgebied kunnen neerzetten. Dat voelt sneller en intuïtiever dan op een knop klikken en wachten tot de bestandskiezer opent. Toon een duidelijke visuele aanwijzing als iemand een bestand over de sleepzone houdt. Het gebied moet oplichten, van kleur veranderen of een stippellijn tonen. Zo weten mensen dat ze het bestand hier kunnen neerzetten.
Op mobiel werkt het kiezen van bestanden anders. Iemand tikt op de knop en kiest tussen zijn fotobibliotheek, zijn bestanden-app of een nieuwe foto maken. Ondersteun wat op zijn apparaat werkt. Beperk mobiele gebruikers niet tot alleen klikken.
Accepteert je formulier meerdere bestanden, sta dan zowel meerdere bestanden tegelijk kiezen als één voor één toevoegen toe. Laat mensen vijf bestanden tegelijk kiezen in de bestandskiezer. Laat ze er daarna ook nog één toevoegen. Dwing niet af dat alle selectie in één browservenster gebeurt.
Tonen wat is geüpload en bestanden verwijderen
Toon na het kiezen van een bestand precies wat ze hebben geüpload. Toon de bestandsnaam, de bestandsgrootte en een klein icoon met het bestandstype. Zo bevestigen ze dat ze het juiste bestand uploadden.
Accepteert het formulier meerdere bestanden, toon ze dan allemaal in een lijst. Laat mensen zien wat ze gaan versturen. Hebben ze het verkeerde bestand geüpload, laat ze het dan verwijderen en een ander uploaden voordat het formulier wordt verstuurd.
De verwijderknop moet "Verwijderen" zeggen of een kruisje hebben. Klikken verwijdert dat bestand uit de uploadlijst. Het mag het bestand niet van hun computer verwijderen, alleen uit het formulier.
Moet iemand een bestand vervangen, laat hem dan niet eerst verwijderen en opnieuw uploaden. Laat hem op de verwijderknop en daarna op de uploadknop klikken in één flow. Of laat hem op het bestand klikken om de bestandskiezer te openen en een vervangend bestand ter plekke te kiezen. Minder stappen betekent meer afgeronde formulieren.
Voortgangsindicatie en wat je toont tijdens het uploaden
Bestanden uploaden kost tijd. In die tijd wacht de persoon en vraagt hij zich af of er iets gebeurt. Je moet voortgang tonen.
Een voortgangsbalk is de duidelijkste optie. Die toont een percentage dat klaar is. 25%. 50%. 75%. Klaar. Iemand ziet hem bewegen en weet dat het uploaden bezig is. Een voortgangsbalk die direct van 0% naar 100% springt, helpt niet. Toon vloeiende voortgang.
Kun je geen exact percentage tonen, toon dan een draaiend icoon of laadanimatie. Iets wat beweegt en activiteit laat zien. Toon geen statische laadstatus zonder beweging. Statisch laden ziet er bevroren uit.
Laat de verzendknop nooit klikbaar zijn terwijl een bestand wordt geüpload. Maak hem grijs of schakel hem uit. Laat mensen niet meerdere keren op versturen klikken terwijl een bestand wordt geüpload. Dat kan dubbele uploads of fouten veroorzaken.
Duurt het uploaden langer dan drie seconden, toon dan een geschatte resterende tijd. "Bezig met uploaden. Nog ongeveer 30 seconden." of "Bezig met uploaden. Groot bestand." Laat mensen zich niet afvragen hoe lang het nog duurt.
Foutafhandeling en waarom vage fouten afgeronde formulieren kosten
Uploadfouten gebeuren. Een bestand is beschadigd. Een netwerkverbinding valt weg. Een bestand is te groot. Er is een niet-ondersteund formaat geüpload. Als er een fout optreedt, bepaalt je melding of de persoon het oplost of het formulier verlaat.
Een vage fout zoals "Upload mislukt. Probeer het opnieuw." vertelt niets. Wat opnieuw proberen? Wat ging er mis? Is het bestand beschadigd? Is het netwerk kapot? Is het bestandstype fout? Vage fouten laten mensen zich hulpeloos voelen.
Een specifieke fout noemt het probleem. "Dit bestand is te groot. Je bestand is 25 MB. Het maximum is 10 MB. Comprimeer het of kies een kleiner bestand." "Dit bestandsformaat wordt niet ondersteund. Dit formulier accepteert alleen PDF- en Word-documenten. Zet je bestand om naar PDF en probeer het opnieuw."
Toon de fout op een duidelijke plek. Niet verstopt in grijze tekst onderaan het formulier. Gebruik een rode achtergrond, een rode rand of een rood icoon. Trek de aandacht, zodat ze de fout direct zien.
Verwijder het bestand niet uit de uploadlijst als er een fout optreedt. Houd het zichtbaar, zodat ze weten welk bestand het probleem had. Laat ze het ter plekke oplossen of vervangen.
Beveiliging en het beschermen van gebruiker en site
Uploads zijn een zwak punt in de beveiliging. Iemand die een bestand met verborgen code uploadt, kan je server beschadigen. Een slecht uploadsysteem kan het bestand blootstellen aan andere gebruikers of aanvallers.
De eerste beveiligingsstap is het bestandstype valideren. Vertrouw de bestandsextensie niet. Een bestand met de naam "cv.pdf" kan in werkelijkheid uitvoerbare code bevatten. Controleer de inhoud van het bestand zelf, niet alleen de naam. Dit heet MIME-type-validatie. De server leest de werkelijke inhoud van het bestand en bevestigt dat het echt een PDF is, echt een afbeelding, wat je ook verwacht.
De tweede stap is het bestand hernoemen na het uploaden. Sla bestanden niet op met de namen die gebruikers ze gaven. Hernoem ze automatisch. "cv.pdf" wordt "upload-a4f9e2k1.pdf" op je server. Zo voorkom je dat iemand het bestandspad raadt en er direct bij kan, of probeert code uit te voeren door een bestand met een specifieke naam te uploaden.
De derde stap is bestanden buiten de webmap opslaan. Zet geüploade bestanden niet in een map die direct toegankelijk is via internet. Sla ze apart op. Moet iemand zijn bestand downloaden, stuur het dan via een beveiligde link die verloopt, niet via een directe URL naar het bestandspad.
De vierde stap is een maximale bestandsgrootte en uploadlimieten instellen. Beperk de totale grootte van elk bestand. Beperk het aantal bestanden dat iemand kan uploaden. Beperk hoeveel uploads één persoon per uur mag doen. Deze limieten voorkomen misbruik en beschermen je server.
De vijfde stap is authenticatie eisen. Is je formulier niet openbaar, laat gebruikers dan inloggen voordat ze bestanden uploaden. Zo voorkom je dat willekeurige mensen op internet kwaadaardige bestanden naar je server uploaden.
De zesde stap is HTTPS gebruiken. Elke upload moet tijdens verzending versleuteld zijn. Upload je een bestand via gewone HTTP, dan kan een aanvaller op het netwerk het onderscheppen. Gebruik altijd HTTPS voor elk formulier met bestandsupload.
Hoe WEMASY je helpt veilige formulieren met bestandsupload te bouwen
De formulierbouwer van WEMASY bevat uploadvelden met ingebouwde beveiliging en gebruiksfuncties. Je stelt toegestane bestandstypen, maximale bestandsgroottes en of uploaden verplicht of optioneel is in zonder code te schrijven. De formulierbouwer valideert bestandstypen zowel aan de kant van de bezoeker als op de server om kwaadaardige uploads te voorkomen.
Uploads via WEMASY-formulieren gebruiken veilige HTTPS-versleuteling. Bestanden worden buiten de map van je website opgeslagen en geleverd via beveiligde downloadlinks die verlopen. Je hoeft deze infrastructuur niet zelf te bouwen.
De uploadinterface bevat slepen, bestandsvoorbeeld, foutafhandeling en voortgangsindicatie. De formulieren tonen gebruikers automatisch welke bestandstypen worden geaccepteerd en wat de groottelimieten zijn. Uploads op mobiel en computer worden ondersteund.
Je kunt de knoptekst, de toegestane bestandstypen en de groottelimieten aanpassen aan wat je formulier nodig heeft. Bekijk welke formulierfuncties erbij zitten in je WEMASY-abonnement.