Τα πεδία ανεβάσματος αρχείων φαίνονται απλά. Ένα κουμπί που γράφει «Επιλογή αρχείου» και μια φόρμα που υποβάλλει τα δεδομένα. Το ανέβασμα αρχείου όμως είναι στιγμή με μεγάλο διακύβευμα. Ο άνθρωπος σου εμπιστεύεται το βιογραφικό του, ένα φορολογικό έγγραφο, τη φωτογραφία του προϊόντος του. Αν το ανέβασμα φαίνεται ασαφές, αδέξιο ή σαν να απέτυχε, θα εγκαταλείψει τη φόρμα. Αν δεν ξέρει ποιους τύπους αρχείων δέχεσαι ή πόσο μεγάλο μπορεί να είναι το αρχείο, θα χάσει χρόνο ανεβάζοντας λάθος αρχείο και μετά θα μάθει ότι απέτυχε. Αν το ανέβασμα φαίνεται ανασφαλές, θα αναρωτηθεί αν η ιστοσελίδα σου είναι αξιόπιστη. Αυτό το άρθρο καλύπτει τι κάνει τα πεδία ανεβάσματος να δουλεύουν, πώς να προστατεύεις και τον χρήστη και την ιστοσελίδα σου και τι κάνουν λάθος οι περισσότερες φόρμες ώστε οι άνθρωποι να μην ολοκληρώνουν.
Ένα πεδίο ανεβάσματος αρχείου δεν απλώς δέχεται αρχεία. Συλλέγει πληροφορίες για δικαιώματα. Κάποιος που ανεβάζει βιογραφικό λέει «ορίστε τα στοιχεία μου, χρησιμοποίησέ τα για την πρόσληψη». Κάποιος που ανεβάζει ένα έγγραφο λέει «σε εμπιστεύομαι με αυτό». Το πεδίο ανεβάσματος πρέπει να δείχνει καθαρά τι θα κάνεις με το αρχείο, γιατί το χρειάζεσαι και ότι είναι ασφαλές να το ανεβάσει.
Γιατί το ανέβασμα αρχείων διαφέρει από τα άλλα πεδία φόρμας
Ένα πεδίο κειμένου δέχεται λέξεις. Ένα πεδίο email δέχεται διεύθυνση email. Ένα πεδίο ανεβάσματος δέχεται αρχεία κάθε μεγέθους, τύπου και προέλευσης. Αυτό κάνει το ανέβασμα αρχείων ουσιαστικά διαφορετικό από τα άλλα πεδία με τρεις τρόπους.
Πρώτον, το ανέβασμα αρχείων έχει κίνδυνο ασφάλειας. Ένα κακόβουλο αρχείο που ανεβαίνει στον διακομιστή σου μπορεί να βλάψει την ιστοσελίδα σου, να κλέψει δεδομένα ή να μολύνει τις συσκευές των επισκεπτών σου. Τα πεδία κειμένου και email έχουν καθαρά όρια. Το ανέβασμα αρχείων όχι. Κάποιος θα μπορούσε να ανεβάσει ένα μεταμφιεσμένο εκτελέσιμο, ένα script ή malware. Αυτό σημαίνει ότι πρέπει να ελέγχεις και να προστατεύεσαι από κάθε ανέβασμα που φτάνει.
Δεύτερον, το ανέβασμα αρχείων χρειάζεται καθαρό πλαίσιο. Ο άνθρωπος πρέπει να ξέρει ποιο αρχείο να ανεβάσει πριν αρχίσει να ψάχνει στον υπολογιστή του. Ένα πεδίο email εξηγεί τον εαυτό του. Ένα πεδίο ανεβάσματος πρέπει να λέει «Ανέβασε το βιογραφικό σου σε PDF ή Word, μέγιστο 5 MB». Χωρίς αυτή τη σαφήνεια, οι άνθρωποι θα ξοδέψουν λεπτά για να βρουν ένα αρχείο και μετά θα ανακαλύψουν ότι έχει λάθος μορφή ή είναι πολύ μεγάλο.
Τρίτον, το ανέβασμα αρχείων είναι αργό. Το ανέβασμα ενός αρχείου 10 MB στο κινητό μέσω 4G παίρνει χρόνο. Ο άνθρωπος περιμένει. Πρέπει να ξέρει ότι το ανέβασμα γίνεται και ότι δεν έχει κολλήσει ή παγώσει. Μια κατάσταση φόρτωσης και μια ένδειξη προόδου είναι απαραίτητες.
Το ίδιο το πεδίο ανεβάσματος και τι ετικέτα να του βάλεις
Το πεδίο ανεβάσματος είναι το κουμπί που πατούν οι άνθρωποι για να διαλέξουν αρχείο. Το κείμενο του κουμπιού μετράει. Πρέπει να λέει τι θα γίνει μετά.
Το «Επιλογή αρχείου» είναι αόριστο. Το «Αναζήτηση αρχείων» είναι καλύτερο. Το «Ανέβασε το βιογραφικό σου» είναι το καλύτερο. Το κείμενο του κουμπιού πρέπει να ονομάζει το συγκεκριμένο αρχείο που θέλεις. Έτσι ο άνθρωπος ξέρει ακριβώς τι να ψάξει στον υπολογιστή του.
Η ετικέτα πάνω από το κουμπί πρέπει να επαναλαμβάνει την απαίτηση. «Βιογραφικό (PDF ή Word, μέγιστο 5 MB)». Βάλε το όριο μεγέθους και τις αποδεκτές μορφές ακριβώς κάτω από την ετικέτα. Μην κρύβεις αυτή την πληροφορία πίσω από εικονίδιο βοήθειας ή σε μικρό γκρι κείμενο. Οι άνθρωποι πρέπει να τη δουν αμέσως, αλλιώς δεν θα ξέρουν τι να ανεβάσουν.
Αν η φόρμα σου δέχεται πολλά αρχεία, το κουμπί πρέπει να γράφει «Πρόσθεσε αρχεία» ή «Ανέβασε πολλά αρχεία». Ένα πεδίο ενός αρχείου που ξαφνικά δέχεται δύο αρχεία μπερδεύει τους ανθρώπους. Να είσαι σαφής.
Αν το ανέβασμα είναι προαιρετικό, πες το. «Portfolio (προαιρετικό, JPG ή PNG, μέγιστο 20 MB ανά εικόνα)». Αν το ανέβασμα είναι υποχρεωτικό, η ετικέτα πρέπει να γράφει «υποχρεωτικό» ή να έχει αστερίσκο. Μην υποθέτεις ότι οι άνθρωποι καταλαβαίνουν.
Αποδεκτοί τύποι αρχείων και πώς να τους εξηγείς καθαρά
Δεν μπορείς να δέχεσαι κάθε τύπο αρχείου. Η φόρμα βιογραφικού σου δεν χρειάζεται φωτογραφίες JPEG. Η φόρμα εγγράφων σου δεν χρειάζεται αρχεία βίντεο. Πρέπει να ορίσεις ακριβώς ποιους τύπους δέχεσαι.
Μη χρησιμοποιείς τεχνικούς όρους. Μη γράφεις «τύποι MIME» ή «επεκτάσεις αρχείων». Γράψε «PDF, έγγραφα Word ή εξαγωγές από Google Docs». Γράψε «φωτογραφίες JPG ή PNG». Γράψε «υπολογιστικά φύλλα Excel». Χρησιμοποίησε τα ονόματα που καταλαβαίνουν οι άνθρωποι.
Όταν κάποιος ανεβάζει αρχείο σε λάθος μορφή, το σφάλμα πρέπει να είναι συγκεκριμένο. Όχι «Μη έγκυρος τύπος αρχείου». Αντί γι' αυτό, «Αυτή η φόρμα δέχεται έγγραφα PDF ή Word. Μετέτρεψε το αρχείο σου και δοκίμασε ξανά.» Πες τους τι πήγε στραβά και τι να κάνουν.
Αν η φόρμα σου χρειάζεται διαφορετικούς τύπους αρχείων για διαφορετικά πεδία, κάν' το καθαρό για το καθένα. Μια αίτηση εργασίας μπορεί να ζητά βιογραφικό σε PDF και συνοδευτική επιστολή σε Word. Κάθε πεδίο πρέπει να έχει το δικό του κουμπί και τους δικούς του αποδεκτούς τύπους. Μην αναγκάζεις τους ανθρώπους να μαντεύουν ποιο αρχείο πάει πού.
Όρισε λίστα επιτρεπόμενων τύπων, ποτέ λίστα απαγορευμένων. Μη γράφεις «όλοι οι τύποι αρχείων εκτός από εκτελέσιμα». Γράψε ακριβώς ποιοι τύποι επιτρέπονται. Η προσέγγιση της λίστας επιτρεπόμενων είναι πιο απλή για τους χρήστες και ισχυρότερη για την ασφάλεια.
Όρια μεγέθους αρχείων και πώς να τα χειρίζεσαι
Κάθε πεδίο ανεβάσματος χρειάζεται μέγιστο μέγεθος αρχείου. Χωρίς αυτό, κάποιος θα μπορούσε να ανεβάσει κατά λάθος ένα βίντεο 500 MB και ο διακομιστής σου να κρασάρει ή να μείνει από χώρο αποθήκευσης.
Το όριο μεγέθους πρέπει να ταιριάζει με όσα χρησιμοποιούν πραγματικά οι άνθρωποι. Ένα βιογραφικό είναι συνήθως 1 έως 3 MB. Όρισε το όριο στα 10 MB για να υπάρχει περιθώριο. Μια φωτογραφία προφίλ είναι 2 έως 5 MB. Όρισε το όριο στα 20 MB. Ένα βίντεο μπορεί να είναι 50 MB έως 500 MB. Όρισε το όριο με βάση όσα πραγματικά χρειάζεσαι.
Πες στους ανθρώπους το όριο μεγέθους πριν ανεβάσουν. «Το μέγιστο μέγεθος αρχείου είναι 5 MB.» Βάλε το ακριβώς δίπλα στο κουμπί. Αν κάποιος ανεβάσει αρχείο που είναι πολύ μεγάλο, το σφάλμα πρέπει να είναι άμεσο και καθαρό. Όχι ένας κύκλος φόρτωσης που γυρίζει 30 δευτερόλεπτα και μετά αποτυγχάνει. Δείξε το σφάλμα μόλις επιλεγεί το αρχείο, πριν αρχίσει το ανέβασμα.
Αν υποστηρίζεις μεγάλα αρχεία, σκέψου να επιτρέπεις ανέβασμα σε κομμάτια ή ανέβασμα που συνεχίζεται από το σημείο διακοπής. Αν το αρχείο των 100 MB κάποιου αποτύχει στη μέση, το ανέβασμα με δυνατότητα συνέχισης τον αφήνει να συνεχίσει από εκεί που σταμάτησε αντί να ξεκινήσει από την αρχή. Αυτό αποτρέπει την απογοήτευση σε αργές συνδέσεις.
Σύρσιμο και απόθεση και πολλαπλοί τρόποι επιλογής
Τα πεδία ανεβάσματος πρέπει να υποστηρίζουν πολλούς τρόπους επιλογής αρχείων. Κάποιοι πατούν το κουμπί. Κάποιοι σέρνουν αρχεία από την επιφάνεια εργασίας τους. Κάποιοι ψάχνουν στη βιβλιοθήκη φωτογραφιών του κινητού τους. Πρέπει να υποστηρίζεις όλους.
Το κουμπί είναι ο βασικός τρόπος. Ανοίγει τον εξερευνητή αρχείων της συσκευής, που δουλεύει σε κάθε συσκευή και κάθε browser.
Το σύρσιμο και η απόθεση είναι ο δευτερεύων τρόπος. Ένας άνθρωπος πρέπει να μπορεί να σύρει ένα αρχείο από την επιφάνεια εργασίας και να το αφήσει στην περιοχή ανεβάσματος. Αυτό είναι πιο γρήγορο και πιο διαισθητικό από το να πατάς κουμπί και να περιμένεις να ανοίξει ο εξερευνητής αρχείων. Δείξε καθαρή οπτική ένδειξη όταν κάποιος σέρνει αρχείο πάνω από την περιοχή απόθεσης. Η περιοχή πρέπει να τονίζεται, να αλλάζει χρώμα ή να δείχνει διακεκομμένο περίγραμμα. Αυτό λέει στους ανθρώπους ότι μπορούν να αφήσουν το αρχείο εδώ.
Στο κινητό, η επιλογή αρχείων δουλεύει διαφορετικά. Ο άνθρωπος πατά το κουμπί και διαλέγει ανάμεσα στη βιβλιοθήκη φωτογραφιών, την εφαρμογή αρχείων ή τη λήψη νέας φωτογραφίας. Υποστήριξε ό,τι δουλεύει στη συσκευή τους. Μην περιορίζεις τους χρήστες κινητού μόνο στο πάτημα.
Αν η φόρμα σου δέχεται πολλά αρχεία, επίτρεψε και μαζική επιλογή και προσθήκη ενός ενός. Άφησε τους ανθρώπους να επιλέξουν πέντε αρχεία μαζί από τον εξερευνητή αρχείων. Άφησέ τους και να προσθέσουν ένα ακόμα αργότερα. Μην αναγκάζεις όλη την επιλογή να γίνεται σε ένα παράθυρο του browser.
Πώς να δείχνεις τι ανέβηκε και πώς να αφαιρούνται αρχεία
Αφού κάποιος επιλέξει αρχείο, δείξε του ακριβώς τι ανέβασε. Εμφάνισε το όνομα του αρχείου, το μέγεθος και ένα μικρό εικονίδιο που δείχνει τον τύπο. Αυτό επιβεβαιώνει ότι ανέβασε το σωστό αρχείο.
Αν η φόρμα δέχεται πολλά αρχεία, δείξε τα όλα σε λίστα. Άφησε τους ανθρώπους να δουν τι πρόκειται να υποβάλουν. Αν ανέβασαν λάθος αρχείο, άφησέ τους να το αφαιρέσουν και να ανεβάσουν άλλο πριν υποβληθεί η φόρμα.
Το κουμπί αφαίρεσης πρέπει να γράφει «Αφαίρεση» ή να έχει εικονίδιο X. Το πάτημά του πρέπει να διαγράφει το αρχείο από τη λίστα ανεβάσματος. Δεν πρέπει να διαγράφει το αρχείο από τον υπολογιστή τους, μόνο από τη φόρμα.
Αν κάποιος χρειάζεται να αντικαταστήσει ένα αρχείο, μην τον αναγκάζεις να αφαιρέσει και να ανεβάσει ξανά. Άφησέ τον να πατήσει το κουμπί αφαίρεσης και μετά το κουμπί ανεβάσματος σε μία ροή. Ή επίτρεψε το πάτημα του αρχείου ώστε να ανοίγει ο εξερευνητής και να επιλέγεται αντικατάσταση επιτόπου. Λιγότερα βήματα σημαίνει υψηλότερα ποσοστά ολοκλήρωσης.
Ένδειξη προόδου και τι να δείχνεις κατά το ανέβασμα
Το ανέβασμα αρχείων παίρνει χρόνο. Στο διάστημα αυτό, ο άνθρωπος περιμένει και αναρωτιέται αν γίνεται κάτι. Πρέπει να του δείξεις πρόοδο.
Η μπάρα προόδου είναι η πιο καθαρή επιλογή. Δείχνει ποσοστό ολοκλήρωσης. 25%. 50%. 75%. Ολοκληρώθηκε. Ο άνθρωπος μπορεί να τη δει να κινείται και να ξέρει ότι το ανέβασμα γίνεται. Μια μπάρα προόδου που πηδά από 0% σε 100% αμέσως δεν βοηθά. Δείξε ομαλή πρόοδο.
Αν δεν μπορείς να δείξεις ακριβές ποσοστό προόδου, δείξε έναν κύκλο φόρτωσης ή ένα κινούμενο εικονίδιο. Κάτι που κινείται και δείχνει δραστηριότητα. Μη δείχνεις στατική κατάσταση φόρτωσης χωρίς καμία κίνηση. Η στατική φόρτωση φαίνεται παγωμένη.
Μην αφήνεις ποτέ το κουμπί υποβολής να πατιέται όσο ανεβαίνει ένα αρχείο. Κάν' το γκρι ή απενεργοποίησέ το. Μην αφήνεις τους ανθρώπους να πατούν υποβολή πολλές φορές όσο ανεβαίνει αρχείο. Αυτό μπορεί να προκαλέσει διπλά ανεβάσματα ή σφάλματα.
Αν το ανέβασμα παίρνει πάνω από τρία δευτερόλεπτα, δείξε εκτιμώμενο χρόνο που απομένει. «Ανεβαίνει. Περίπου 30 δευτερόλεπτα ακόμα.» ή «Ανεβαίνει. Μεγάλο αρχείο.» Μην αφήνεις τους ανθρώπους να αναρωτιούνται πόσο ακόμα θα κρατήσει.
Διαχείριση σφαλμάτων και γιατί τα αόριστα σφάλματα χάνουν ολοκληρώσεις
Σφάλματα ανεβάσματος συμβαίνουν. Ένα αρχείο είναι κατεστραμμένο. Μια σύνδεση δικτύου πέφτει. Ένα αρχείο είναι πολύ μεγάλο. Ανέβηκε μορφή που δεν υποστηρίζεται. Όταν συμβεί σφάλμα, το μήνυμά σου καθορίζει αν ο άνθρωπος θα το διορθώσει ή θα εγκαταλείψει τη φόρμα.
Ένα αόριστο σφάλμα όπως «Το ανέβασμα απέτυχε. Δοκίμασε ξανά.» δεν τους λέει τίποτα. Να δοκιμάσουν τι ξανά; Τι πήγε στραβά; Είναι κατεστραμμένο το αρχείο; Είναι χαλασμένο το δίκτυο; Είναι λάθος ο τύπος αρχείου; Τα αόριστα σφάλματα κάνουν τους ανθρώπους να νιώθουν αβοήθητοι.
Ένα συγκεκριμένο σφάλμα ονομάζει το πρόβλημα. «Αυτό το αρχείο είναι πολύ μεγάλο. Το αρχείο σου είναι 25 MB. Το μέγιστο είναι 10 MB. Συμπίεσέ το ή διάλεξε μικρότερο αρχείο.» «Αυτή η μορφή αρχείου δεν υποστηρίζεται. Αυτή η φόρμα δέχεται μόνο έγγραφα PDF και Word. Μετέτρεψε το αρχείο σου σε PDF και δοκίμασε ξανά.»
Δείξε το σφάλμα σε καθαρό σημείο. Όχι κρυμμένο σε γκρι κείμενο στο κάτω μέρος της φόρμας. Χρησιμοποίησε κόκκινο φόντο, κόκκινο περίγραμμα ή κόκκινο εικονίδιο. Τράβηξε την προσοχή ώστε να δουν το σφάλμα αμέσως.
Μη διαγράφεις το αρχείο από τη λίστα ανεβάσματος όταν συμβεί σφάλμα. Κράτα το ορατό ώστε να ξέρουν ποιο αρχείο είχε το πρόβλημα. Άφησέ τους να το διορθώσουν επιτόπου ή να το αντικαταστήσουν.
Ασφάλεια και προστασία του χρήστη και της ιστοσελίδας
Το ανέβασμα αρχείων είναι αδύναμο σημείο ασφάλειας. Κάποιος που ανεβάζει αρχείο με κρυφό κώδικα θα μπορούσε να βλάψει τον διακομιστή σου. Ένα κακό σύστημα ανεβάσματος θα μπορούσε να εκθέσει το αρχείο σε άλλους χρήστες ή σε επιτιθέμενους.
Το πρώτο βήμα ασφάλειας είναι ο έλεγχος του τύπου αρχείου. Μην εμπιστεύεσαι την επέκταση του αρχείου. Ένα αρχείο με όνομα «resume.pdf» θα μπορούσε να περιέχει εκτελέσιμο κώδικα. Έλεγξε το ίδιο το περιεχόμενο του αρχείου, όχι μόνο το όνομα. Αυτό λέγεται επικύρωση τύπου MIME. Ο διακομιστής διαβάζει το πραγματικό περιεχόμενο του αρχείου και επιβεβαιώνει ότι είναι πράγματι PDF, πράγματι εικόνα, ό,τι περιμένεις.
Το δεύτερο βήμα είναι η μετονομασία του αρχείου μετά το ανέβασμα. Μην αποθηκεύεις αρχεία με τα ονόματα που έδωσαν οι χρήστες. Μετονόμασέ τα αυτόματα. Το «resume.pdf» γίνεται «upload-a4f9e2k1.pdf» στον διακομιστή σου. Έτσι κανείς δεν μπορεί να μαντέψει τη διαδρομή του αρχείου και να έχει άμεση πρόσβαση ή να προσπαθήσει να εκτελέσει κώδικα ανεβάζοντας αρχείο με συγκεκριμένο όνομα.
Το τρίτο βήμα είναι η αποθήκευση των αρχείων εκτός του δημόσιου φακέλου. Μη βάζεις τα ανεβασμένα αρχεία σε φάκελο που είναι άμεσα προσβάσιμος στο διαδίκτυο. Αποθήκευσέ τα ξεχωριστά. Όταν κάποιος χρειάζεται να κατεβάσει το αρχείο του, στείλ' το μέσω ασφαλούς συνδέσμου που λήγει, όχι με άμεσο URL προς τη διαδρομή του αρχείου.
Το τέταρτο βήμα είναι ο ορισμός μέγιστου μεγέθους αρχείου και ορίων ανεβάσματος. Περιόρισε το συνολικό μέγεθος κάθε αρχείου. Περιόρισε τον αριθμό αρχείων που μπορεί να ανεβάσει κάποιος. Περιόρισε πόσα ανεβάσματα μπορεί να κάνει ένα άτομο σε μία ώρα. Αυτά τα όρια αποτρέπουν την κατάχρηση και προστατεύουν τον διακομιστή σου.
Το πέμπτο βήμα είναι η απαίτηση ταυτοποίησης. Αν η φόρμα σου δεν είναι δημόσια, ζήτα από τους χρήστες να συνδεθούν πριν ανεβάσουν αρχεία. Έτσι δεν μπορούν τυχαίοι άνθρωποι του διαδικτύου να ανεβάσουν κακόβουλα αρχεία στον διακομιστή σου.
Το έκτο βήμα είναι η χρήση HTTPS. Κάθε ανέβασμα αρχείου πρέπει να είναι κρυπτογραφημένο κατά τη μεταφορά. Αν ανεβάσεις αρχείο μέσω απλού HTTP, ένας επιτιθέμενος στο δίκτυο μπορεί να το υποκλέψει. Χρησιμοποίησε πάντα HTTPS σε κάθε φόρμα που περιλαμβάνει ανέβασμα αρχείων.
Πώς σε βοηθά η WEMASY να φτιάξεις ασφαλείς φόρμες ανεβάσματος αρχείων
Μπορείς να προσθέσεις μια φόρμα στον δημιουργό ιστοσελίδων της WEMASY. Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου.
Όταν στήνεις φόρμα με ανέβασμα αρχείων, φρόντισε να χρησιμοποιείς HTTPS και να φυλάς τα αρχεία εκτός του δημόσιου φακέλου, όπως περιγράφεται παραπάνω.
Φρόντισε το πεδίο να δείχνει στους χρήστες ποιοι τύποι αρχείων γίνονται δεκτοί και ποια είναι τα όρια μεγέθους, ώστε να ανεβάζουν το σωστό αρχείο με την πρώτη.
Μπορείς να προσαρμόσεις το κείμενο του κουμπιού, τους αποδεκτούς τύπους αρχείων και τα όρια μεγέθους ώστε να ταιριάζουν στη φόρμα σου. Δες ποιο πακέτο WEMASY σου ταιριάζει.