Gratis ES5 / ES6 JavaScript File Upload Plugin - Uppy

En af de vanskeligste formindgange til design er fil upload. Den har en standard HTML-stil, men det er ikke den smukkeste ting i verden.

uppy tager filoverførsler til et helt nyt niveau med a brugerdefineret interface og a dynamisk loading-proces i Ajax-stil.

Det kører på ES5 / ES6 kode, så du kan opbygge dine webapps med de nyeste JavaScript-standarder. Og det selv understøtter filoploader fra cloud storage sites f.eks. Dropbox eller Google Drive, så det er en multifacet filopdatering script til internettet.

Uppy er helt fri og åben kilde, med en repo på GitHub. Den nemmeste måde at installere dette plugin på er imidlertid via npm eller Garn, så du kan køre det som en rigtig pakke.

Når du har fået filerne tilføjet til dit websted, er du bare Indtast Uppy.js-filen og CSS-koden. Derefter målretter du mod det ønskede inputfelt, og Uppy tager sig af resten.

Det har en unik grænseflade der ligner en stor firkantet placering at trække og slippe filer. Du kan også vælg genstande fra harddisken eller endda Upload filer eksternt fra eksterne webadresser. Ganske skør!

Du kan finde hele installationsprocessen på dokumentationssiden, men den kræver i det mindste en vis forståelse af ECMAScript 6. Dette bibliotek ser ud til fremtiden for scripting og er ikke den nemmeste ting at bruge med ren vanilla JavaScript.

Men hvis du er seriøs om webudvikling, er det værd at lære ES6 alligevel. Du kan finde masser af ressourcer online til selvundervisning, og du kan endda bruge Uppy som din første “ægte” Projekt at dykke i og begynde at lære.

Tjek Dashboard Eksempel på se Uppy i aktion. For denne side, den upload er gemt bag en udløserknap, hvor du klikker på knappen for at vise et modalt upload felt.

Derfra kan du vælge om du vil uploade et billede fra din computer, fra internettet eller endda fra dit webcam!

Eksempler-siden giver en masse at se igennem, herunder en Træk & slip eksempel, sammen med en internationaliseret demo side.

Men for virkelig at lære, hvordan dette virker, anbefaler jeg at skumme dokumenterne og gennemse de vigtigste GitHub repo. Du kan også dele dine tanker med skaberne på Twitter @transloadit.