Bezpłatna wtyczka do ładowania plików JavaScript ES5 / ES6 - Uppy

Jednym z najtrudniejszych wejść do projektowania jest Udostępnianie pliku. Ma domyślny styl HTML, ale nie jest to najładniejsza rzecz na świecie.

Uppy przenosi pliki na zupełnie nowy poziom za pomocą niestandardowy interfejs i a dynamiczny proces ładowania w stylu Ajax.

To działa na kodzie ES5 / ES6, dzięki czemu możesz budować swoje aplikacje internetowe przy użyciu najnowszych standardów JavaScript. I to nawet obsługuje przesyłanie plików z witryn przechowywania w chmurze takich jak Dropbox lub Google Drive, więc jest to wieloaspektowy skrypt do przesyłania plików dla sieci.

Uppy jest całkowicie darmowy i open-source, z repo na GitHub. Jednak najłatwiejszym sposobem zainstalowania tej wtyczki jest npm lub Yarn, więc możesz uruchom go jak prawdziwy pakiet.

Po dodaniu plików do witryny wystarczy dołącz plik Uppy.js i kod CSS. Następnie celujesz w dowolne pole wejściowe, a Uppy zajmuje się resztą.

Ma unikalny interfejs wygląda jak jedno duże kwadratowe rozmieszczenie przeciągać i upuszczać pliki. Możesz również wybierz elementy z dysku twardego lub nawet przesyłaj pliki zdalnie z zewnętrznych adresów URL. Trochę szalony!

Cały proces instalacji można znaleźć na stronie dokumentacji, ale to wymaga przynajmniej pewnego zrozumienia ECMAScript 6. Ta biblioteka patrzy w przyszłość skryptów i nie jest najłatwiejsza do użycia z czystym, waniliowym JavaScriptem.

Ale jeśli poważnie myślisz o tworzeniu stron internetowych, warto i tak nauczyć się ES6. Możesz znaleźć ton zasobów online do samodzielnego nauczania i możesz nawet użyć Uppy jako swojego pierwszego “real” projekt do nurkowania i rozpocznij naukę.

Sprawdź przykład pulpitu nawigacyjnego patrz Uppy w akcji. Dla tej strony przesyłanie jest ukryte za przyciskiem spustu, gdzie klikniesz przycisk, aby wyświetlić modalne pole przesyłania.

Stamtąd możesz wybrać, czy chcesz przesłać zdjęcie z komputera, z Internetu, a nawet z kamery internetowej!

Strona Przykłady oferuje kilka przejrzeć, w tym przykład przeciągnij i upuść, wraz z umiędzynarodowiona strona demonstracyjna.

Ale aby naprawdę dowiedzieć się, jak to działa, polecam przeglądanie dokumentów i przeglądanie głównego repozytorium GitHub. Możesz także podzielić się swoimi przemyśleniami z twórcami na Twitterze @transloadit.