Gratis ES5 / ES6 JavaScript File Upload Plugin - Uppy
En av de vanskeligste skjemainngangene til design er filopplasting. Den har en standard HTML-stil, men det er ikke den peneste tingen i verden.
uppy tar filopplastinger til et helt nytt nivå med a tilpasset grensesnitt og a dynamisk Ajax-stil lasteprosess.
Den kjører på ES5 / ES6 kode, slik at du kan bygge webappene dine med de nyeste JavaScript-standardene. Og det selv støtter filopplastinger fra cloud-lagringssteder for eksempel Dropbox eller Google Drive, så det er en flerfasettert filopplastingskript for nettet.
Uppy er helt gratis og åpen kildekode, med en repo på GitHub. Den enkleste måten å installere denne plugin er imidlertid gjennom npm eller Garn, så du kan Kjør det som en ekte pakke.
Når du får filene lagt til nettstedet ditt, er du bare Inkluder Oppy.js-filen og CSS-koden. Deretter målretter du mot hvilket felt du vil ha, og Uppy tar vare på resten.
Den har et unikt grensesnitt som ser ut som en stor firkantet plassering å dra og slippe filer. Du kan også velg elementer fra harddisken din eller Last opp filer eksternt fra eksterne nettadresser. Ganske gal!
Du finner hele oppsettprosessen på dokumentasjonssiden, men den krever i det minste noen forståelse av ECMAScript 6. Dette biblioteket ser på fremtiden for skripting, og er ikke den enkleste tingen å bruke med ren vanilla JavaScript.
Men hvis du er seriøs om webutvikling, er det verdt å lære ES6 uansett. Du kan finne tonnevis av ressurser på nettet for selvundervisning og du kan til og med bruke Uppy som din første “ekte” prosjekt å dykke i og begynne å lære.
Se på Dashboard Eksempel på se Uppy i aksjon. For denne siden, er Opplastingen er skjult bak en utløserknapp, hvor du klikker på knappen for å vise et modalt opplastingsfelt.
Derfra kan du velge om du vil laste opp et bilde fra din datamaskin, fra nettet, eller fra webkameraet ditt!
Eksempler-siden gir en gjeng å se gjennom, inkludert a dra og slipp eksempel, sammen med en internasjonalisert demo side.
Men for å virkelig lære hvordan dette virker, anbefaler jeg å skumme dokumentene og bla gjennom hovedgitHub-repo. Du kan også dele tankene dine med skaperne på Twitter @transloadit.
