Pola przesyłania plików wydają się proste. Przycisk "Wybierz plik" i formularz wysyła dane. Ale przesyłanie plików to momenty o wysokiej stawce. Ktoś powierza Ci swoje CV, dokument podatkowy, zdjęcie produktu. Jeśli przesyłanie wydaje się niejasne, nieporęczne albo zakończone błędem, porzuci formularz. Jeśli nie wie, jakie typy plików akceptujesz ani jak duży może być plik, zmarnuje czas na przesłanie niewłaściwego pliku, żeby usłyszeć, że się nie udało. Jeśli przesyłanie wydaje się niebezpieczne, zacznie wątpić, czy Twojej stronie można zaufać. Ten artykuł pokazuje, co sprawia, że pola przesyłania plików działają, jak chronić użytkownika i stronę oraz w czym większość formularzy zawodzi, przez co ludzie nie doprowadzają sprawy do końca.
Pole przesyłania plików robi więcej niż przyjmowanie plików. Zbiera informacje o uprawnieniach. Osoba przesyłająca CV mówi "oto moje dane, użyj ich do rekrutacji". Osoba przesyłająca dokument mówi "ufam Ci z tym". Pole przesyłania musi jasno komunikować, co zrobisz z plikiem, dlaczego go potrzebujesz i że przesłanie jest bezpieczne.
Dlaczego przesyłanie plików różni się od innych pól formularza
Pole tekstowe przyjmuje słowa. Pole e-mail przyjmuje adres e-mail. Pole przesyłania plików przyjmuje pliki o dowolnym rozmiarze, typie i pochodzeniu. Dlatego przesyłanie plików zasadniczo różni się od innych pól formularza pod trzema względami.
Po pierwsze, przesyłanie plików niesie ryzyko dla bezpieczeństwa. Złośliwy plik przesłany na Twój serwer może uszkodzić stronę, wykraść dane albo zainfekować urządzenia odwiedzających. Pola tekstowe i e-mail mają wyraźne granice. Przesyłanie plików nie. Ktoś może przesłać zamaskowany program wykonywalny, skrypt albo złośliwe oprogramowanie. Oznacza to, że musisz weryfikować i chronić się przed każdym przesłaniem.
Po drugie, przesyłanie plików wymaga jasnego kontekstu. Ktoś musi wiedzieć, jaki plik przesłać, zanim zacznie go szukać na komputerze. Pole e-mail tłumaczy się samo. Pole przesyłania plików musi powiedzieć "Prześlij swoje CV w formacie PDF lub DOC, maksymalnie 5 MB". Bez tej jasności ludzie będą spędzać minuty na szukaniu pliku, żeby odkryć, że ma zły format albo jest za duży.
Po trzecie, przesyłanie plików jest wolne. Przesłanie pliku 10 MB na telefonie przez 4G zajmuje czas. Osoba czeka. Musi wiedzieć, że przesyłanie trwa i że nie utknęło ani się nie zawiesiło. Stan ładowania i wskaźnik postępu są niezbędne.
Samo pole przesyłania i jak je opisać
Pole przesyłania to przycisk, który ludzie klikają, żeby wybrać plik. Tekst przycisku ma znaczenie. Powinien mówić, co stanie się dalej.
"Wybierz plik" jest niejasne. "Przeglądaj pliki" jest lepsze. "Prześlij swoje CV" jest najlepsze. Tekst przycisku powinien nazywać konkretny plik, którego potrzebujesz. Dzięki temu osoba dokładnie wie, czego szukać na komputerze.
Etykieta nad przyciskiem powinna powtarzać wymaganie. "CV (PDF lub DOC, maks. 5 MB)". Umieść limit rozmiaru pliku i akceptowane formaty bezpośrednio pod etykietą. Nie chowaj tej informacji pod ikoną pomocy ani w małym szarym tekście. Ludzie muszą ją zobaczyć od razu, bo inaczej nie będą wiedzieć, co przesłać.
Jeśli formularz przyjmuje wiele plików, przycisk powinien mówić "Dodaj pliki" lub "Prześlij wiele plików". Pole przesyłania jednego pliku, które nagle przyjmuje dwa pliki, myli ludzi. Bądź jednoznaczny.
Jeśli przesłanie jest opcjonalne, napisz to. "Portfolio (opcjonalne, JPG lub PNG, maks. 20 MB na obraz)". Jeśli przesłanie jest wymagane, etykieta powinna mówić "wymagane" albo mieć gwiazdkę. Nie zakładaj, że ludzie rozumieją.
Akceptowane typy plików i jasne ich komunikowanie
Nie możesz akceptować każdego typu pliku. Twój formularz CV nie potrzebuje zdjęć JPEG. Twój formularz dokumentów nie potrzebuje plików wideo. Musisz dokładnie określić, jakie typy plików akceptujesz.
Nie używaj żargonu technicznego. Nie pisz "typy MIME" ani "rozszerzenia plików". Napisz "PDF, dokumenty tekstowe lub eksporty z Google Docs". Napisz "zdjęcia JPG lub PNG". Napisz "arkusze kalkulacyjne". Używaj nazw, które ludzie rozumieją.
Gdy ktoś prześle plik w złym formacie, błąd musi być konkretny. Nie "Nieprawidłowy typ pliku". Zamiast tego: "Ten formularz przyjmuje dokumenty PDF lub DOC. Przekonwertuj plik i spróbuj ponownie." Powiedz, co poszło nie tak i co z tym zrobić.
Jeśli formularz potrzebuje wielu typów plików w różnych polach, każdy opisz jasno. Aplikacja o pracę może prosić o CV w PDF i list motywacyjny w DOC. Każde pole powinno mieć własny przycisk i własne akceptowane typy. Nie każ ludziom zgadywać, który plik gdzie trafia.
Twórz listę dozwolonych typów plików, nigdy listę zakazanych. Nie pisz "wszystkie typy plików oprócz wykonywalnych". Zamiast tego napisz dokładnie, które typy są dozwolone. Podejście z listą dozwolonych jest prostsze dla użytkowników i mocniejsze dla bezpieczeństwa.
Limity rozmiaru plików i jak je obsłużyć
Każde pole przesyłania plików potrzebuje maksymalnego rozmiaru pliku. Bez niego ktoś mógłby przypadkowo przesłać wideo o rozmiarze 500 MB, a Twój serwer mógłby się zawiesić lub wyczerpać miejsce.
Limit rozmiaru musi odpowiadać temu, czego ludzie naprawdę używają. CV ma zwykle 1 do 3 MB. Ustaw limit na 10 MB, żeby zostawić zapas. Zdjęcie profilowe ma 2 do 5 MB. Ustaw limit na 20 MB. Klip wideo może mieć od 50 MB do 500 MB. Ustaw limit na podstawie tego, czego naprawdę potrzebujesz.
Powiedz ludziom o limicie rozmiaru, zanim prześlą plik. "Maksymalny rozmiar pliku to 5 MB." Umieść to tuż obok przycisku. Jeśli ktoś prześle za duży plik, błąd powinien pojawić się natychmiast i być jasny. Nie kręcące się przez 30 sekund kółko, po którym przesyłanie się nie udaje. Pokaż błąd od razu po wybraniu pliku, zanim zacznie się przesyłanie.
Jeśli obsługujesz duże pliki, rozważ przesyłanie w partiach lub wznawialne przesyłanie. Jeśli plik 100 MB przerwie się w połowie, wznawialne przesyłanie pozwala kontynuować od miejsca przerwania zamiast zaczynać od nowa. Zapobiega to frustracji przy wolnych połączeniach.
Przeciąganie i upuszczanie oraz wiele metod wyboru
Pola przesyłania plików powinny obsługiwać wiele sposobów wyboru plików. Niektórzy klikają przycisk. Niektórzy przeciągają pliki z pulpitu. Niektórzy przeglądają bibliotekę zdjęć w telefonie. Musisz obsłużyć wszystkie te sposoby.
Przycisk jest metodą podstawową. Otwiera natywną przeglądarkę plików, która działa na każdym urządzeniu i w każdej przeglądarce.
Przeciąganie i upuszczanie jest metodą dodatkową. Ktoś powinien móc przeciągnąć plik z pulpitu i upuścić go w obszarze przesyłania. Wydaje się to szybsze i bardziej intuicyjne niż klikanie przycisku i czekanie na otwarcie przeglądarki plików. Pokaż wyraźny sygnał wizualny, gdy ktoś przeciąga plik nad strefą upuszczania. Obszar powinien się podświetlić, zmienić kolor lub pokazać przerywaną ramkę. Informuje to ludzi, że mogą tu upuścić plik.
Na telefonie wybór plików działa inaczej. Ktoś dotyka przycisku i wybiera między biblioteką zdjęć, aplikacją plików albo zrobieniem nowego zdjęcia. Obsłuż to, co działa na jego urządzeniu. Nie ograniczaj użytkowników telefonów tylko do klikania.
Jeśli formularz przyjmuje wiele plików, pozwól zarówno na wybór zbiorczy, jak i dodawanie pojedynczo. Niech ludzie wybiorą pięć plików naraz w przeglądarce plików. Niech mogą też dodać jeszcze jeden plik później. Nie wymuszaj, żeby cały wybór odbywał się w jednym oknie przeglądarki.
Pokazywanie przesłanych plików i ich usuwanie
Gdy ktoś wybierze plik, pokaż dokładnie, co przesłał. Wyświetl nazwę pliku, rozmiar pliku i małą ikonę typu pliku. Potwierdza to, że przesłano właściwy plik.
Jeśli formularz przyjmuje wiele plików, pokaż je wszystkie na liście. Niech ludzie widzą, co zaraz wyślą. Jeśli przesłano zły plik, pozwól go usunąć i przesłać inny przed wysłaniem formularza.
Przycisk usuwania powinien mówić "Usuń" albo mieć ikonę X. Kliknięcie powinno usuwać ten plik z listy przesyłanych. Nie powinno usuwać pliku z komputera, tylko z formularza.
Jeśli ktoś musi zamienić plik, nie każ mu usuwać i przesyłać ponownie. Pozwól kliknąć przycisk usuwania, a potem przycisk przesyłania w jednym przebiegu. Albo pozwól kliknąć plik, żeby otworzyć przeglądarkę i wybrać plik zastępczy na miejscu. Mniej kroków to wyższy odsetek ukończeń.
Wskaźnik postępu i co pokazać podczas przesyłania
Przesyłanie plików zajmuje czas. W tym czasie osoba czeka i zastanawia się, czy coś się dzieje. Musisz pokazać postęp.
Pasek postępu jest najjaśniejszą opcją. Pokazuje procent ukończenia. 25%. 50%. 75%. Gotowe. Osoba widzi, jak się porusza, i wie, że przesyłanie trwa. Pasek postępu, który skacze od 0% do 100% natychmiast, nie pomaga. Pokaż płynny postęp.
Jeśli nie możesz pokazać dokładnego procentu, pokaż kręcące się kółko albo animację ładowania. Coś, co się porusza i pokazuje aktywność. Nie pokazuj statycznego stanu ładowania bez żadnego ruchu. Statyczne ładowanie wygląda na zawieszone.
Nigdy nie pozwalaj klikać przycisku wysyłania, gdy plik jest przesyłany. Wyszarz go albo wyłącz. Nie pozwól ludziom klikać wyślij wiele razy podczas przesyłania pliku. Może to spowodować zduplikowane przesłania lub błędy.
Jeśli przesyłanie trwa dłużej niż trzy sekundy, pokaż szacowany pozostały czas. "Przesyłanie. Zostało około 30 sekund." albo "Przesyłanie. Duży plik." Nie każ ludziom zastanawiać się, ile to jeszcze potrwa.
Obsługa błędów i dlaczego niejasne błędy zmniejszają liczbę ukończonych formularzy
Błędy przesyłania się zdarzają. Plik jest uszkodzony. Połączenie sieciowe zrywa się. Plik jest za duży. Przesłano nieobsługiwany format. Gdy wystąpi błąd, Twój komunikat decyduje, czy osoba go naprawi, czy porzuci formularz.
Niejasny błąd, taki jak "Przesyłanie nie powiodło się. Spróbuj ponownie.", nic nie mówi. Spróbować czego ponownie. Co poszło nie tak. Czy plik jest uszkodzony. Czy sieć nie działa. Czy typ pliku jest zły. Niejasne błędy sprawiają, że ludzie czują się bezradni.
Konkretny błąd nazywa problem. "Ten plik jest za duży. Twój plik ma 25 MB. Maksimum to 10 MB. Skompresuj plik albo wybierz mniejszy." "Ten format pliku nie jest obsługiwany. Ten formularz przyjmuje tylko dokumenty PDF i DOC. Przekonwertuj plik na PDF i spróbuj ponownie."
Pokaż błąd w wyraźnym miejscu. Nie ukryty w szarym tekście na dole formularza. Użyj czerwonego tła, czerwonej ramki lub czerwonej ikony. Zwróć na niego uwagę, żeby od razu go zobaczono.
Nie usuwaj pliku z listy przesyłanych, gdy wystąpi błąd. Zostaw go widocznego, żeby było wiadomo, który plik miał problem. Pozwól naprawić go na miejscu albo zamienić.
Bezpieczeństwo i ochrona użytkownika oraz strony
Przesyłanie plików to słaby punkt bezpieczeństwa. Osoba przesyłająca plik z ukrytym kodem może uszkodzić Twój serwer. Słaby system przesyłania może wystawić plik na dostęp innych użytkowników albo atakujących.
Pierwszy krok zabezpieczenia to walidacja typu pliku. Nie ufaj rozszerzeniu pliku. Plik o nazwie "cv.pdf" może faktycznie zawierać kod wykonywalny. Sprawdzaj zawartość samego pliku, a nie tylko nazwę. Nazywa się to walidacją typu MIME. Serwer odczytuje rzeczywistą zawartość pliku i potwierdza, że to naprawdę PDF, naprawdę obraz, czymkolwiek ma być.
Drugi krok to zmiana nazwy pliku po przesłaniu. Nie przechowuj plików pod nazwami nadanymi przez użytkowników. Zmieniaj je automatycznie. "cv.pdf" staje się "upload-a4f9e2k1.pdf" na Twoim serwerze. Zapobiega to zgadywaniu ścieżki pliku i bezpośredniemu dostępowi albo próbom uruchomienia kodu przez przesłanie pliku o konkretnej nazwie.
Trzeci krok to przechowywanie plików poza katalogiem publicznym strony. Nie umieszczaj przesłanych plików w folderze bezpośrednio dostępnym w internecie. Przechowuj je osobno. Gdy ktoś musi pobrać swój plik, wyślij go przez bezpieczny link, który wygasa, a nie bezpośredni adres URL do ścieżki pliku.
Czwarty krok to ustawienie maksymalnego rozmiaru pliku i limitów przesyłania. Ogranicz łączny rozmiar każdego pliku. Ogranicz liczbę plików, które ktoś może przesłać. Ogranicz, ile przesłań jedna osoba może wykonać w ciągu godziny. Te limity zapobiegają nadużyciom i chronią Twój serwer.
Piąty krok to wymaganie uwierzytelnienia. Jeśli Twój formularz nie jest publiczny, wymagaj od użytkowników zalogowania przed przesłaniem plików. Zapobiega to przesyłaniu złośliwych plików na Twój serwer przez przypadkowe osoby z internetu.
Szósty krok to użycie HTTPS. Każde przesłanie pliku musi być szyfrowane w trakcie przesyłania. Jeśli przesyłasz plik przez zwykłe HTTP, atakujący w sieci mógłby go przechwycić. Zawsze używaj HTTPS dla każdego formularza z przesyłaniem plików.
Jak WEMASY pomaga budować bezpieczne formularze z przesyłaniem plików
Kreator formularzy WEMASY zawiera pola przesyłania plików z wbudowanymi funkcjami bezpieczeństwa i wygody użytkownika. Możesz ustawić akceptowane typy plików, maksymalne rozmiary plików i to, czy przesłanie jest wymagane, czy opcjonalne, bez pisania kodu. Kreator formularzy weryfikuje typy plików zarówno po stronie klienta, jak i serwera, żeby zapobiegać złośliwym przesłaniom.
Przesyłanie przez formularze WEMASY używa bezpiecznego szyfrowania HTTPS. Pliki są przechowywane poza katalogiem Twojej strony i udostępniane przez bezpieczne, wygasające linki do pobrania. Nie musisz budować tej infrastruktury samodzielnie.
Interfejs przesyłania zawiera wbudowane przeciąganie i upuszczanie, podgląd plików, obsługę błędów i wskaźnik postępu. Formularze automatycznie pokazują użytkownikom, jakie typy plików są akceptowane i jakie są limity rozmiaru. Obsługiwane jest przesyłanie na telefonie i komputerze.
Możesz dostosować tekst przycisku, akceptowane typy plików i limity rozmiaru do potrzeb formularza. Zobacz, jakie funkcje formularzy zawiera Twój pakiet WEMASY.