Besplatno ES5 / ES6 JavaScript File Upload Plugin - Uppy
Jedan od najzahtjevnijih oblika ulaza u dizajn je prijenos datoteka. Ima zadani HTML stil, ali nije najljepša stvar na svijetu.
Uppy preuzima prijenos datoteka na novu razinu s a prilagođeno sučelje i a dinamički proces učitavanja u Ajax stilu.
To radi na ES5 / ES6 kodu, tako da možete izraditi web-aplikacije s najnovijim JavaScript standardima. I to čak podržava prijenos datoteka s web-mjesta za pohranu u oblaku kao što su Dropbox ili Google Drive, tako da je višestruka skripta za prijenos datoteka za web.
Uppy jest potpuno slobodan i otvoren izvor, s repo na GitHubu. Međutim, najlakši način za instaliranje ovog dodatka je putem npm ili pređe, tako da možete pokrenite ga kao pravi paket.
Jednom kada dobijete datoteke koje ste dodali na svoju web-lokaciju, upravo ste uključuju datoteku Uppy.js i CSS kod. Zatim ciljate bilo koje polje za unos koje želite i Uppy se brine za ostalo.
To je jedinstveno sučelje koje izgleda kao jedan veliki kvadratni položaj za povlačenje i ispuštanje datoteka. Također možete odaberite stavke s tvrdog diska ili čak učitati datoteke na daljinu s vanjskih URL-ova. Prilično ludo!
Cijeli postupak postavljanja možete pronaći na stranici s dokumentacijom, ali to zahtijeva barem neko razumijevanje ECMAScripta 6. Ova knjižnica gleda prema budućnosti skriptiranja i nije najjednostavnija za korištenje s čistim vanilijskim JavaScriptom.
No, ako ste ozbiljni u vezi s razvojem weba, svakako je vrijedno učenja ES6. Možeš naći tona resursa na mreži za samostalno podučavanje i čak možete koristiti Uppy kao svoj prvi “stvaran” projekt za ronjenje i početak učenja.
Pogledajte primjer kontrolne ploče na vidjeti Uppy na djelu. Za ovu stranicu, upload je skriven iza gumba okidača, gdje kliknete na gumb za prikaz modalnog prijenosnog polja.
Odatle možete odabrati želite li prenijeti sliku s računala, s weba ili čak s web-kamere!
Stranica Primjeri nudi hrpu za pregledavanje, uključujući a primjer povlačenja i ispuštanja, zajedno s internacionalizirana demo stranica.
No, da bi stvarno saznali kako to radi, preporučujem da skicirate dokumente i pregledate glavni GitHub repo. Također možete podijeliti svoje misli s kreatorima na Twitteru @transloadit.