Gratis ES5 / ES6 JavaScript File Upload Plugin - Uppy

En av de svåraste inmatningsformerna är att filuppladdning. Den har en standard HTML-stil, men det är inte det vackraste i världen.

uppy tar filuppladdningar till en helt ny nivå med a anpassat gränssnitt och a dynamisk laddningsprocess för Ajax-stil.

Det körs på ES5 / ES6-kod, så att du kan bygga dina webbapps med de senaste JavaScript-standarderna. Och det ens Stödjer filuppladdningar från molnlagringsplatser till exempel Dropbox eller Google Drive, så det är en mångfacetterat filuppladdningsscript för webben.

Uppy är helt gratis och öppen källkod, med en rep på GitHub. Det enklaste sättet att installera detta plugin är dock via npm eller Garn, så du kan köra det som ett riktigt paket.

När du väl har fått filerna till din webbplats, du bara Inkludera Uppy.js-filen och CSS-koden. Därefter målar du vilket inmatningsfält du vill ha och Uppy tar hand om resten.

Det har ett unikt gränssnitt som ser ut som en stor kvadrat placering att dra och släppa filer. Du kan också välj objekt från din hårddisk eller ens ladda upp filer på distans från externa webbadresser. Ganska galen!

Du hittar hela installationsprocessen på dokumentationssidan, men den kräver åtminstone en del förståelse av ECMAScript 6. Biblioteket ser fram mot skripts framtid och är inte det enklaste att använda med ren vanilj JavaScript.

Men om du är seriös om webbutveckling är det värt att lära dig ES6 ändå. Du kan hitta massor av resurser på nätet för självundervisning och du kan till och med använda Uppy som din första “verklig” Projekt att dyka i och börja lära.

Kolla in Dashboard-exemplet till se Uppy i åtgärd. För den här sidan, den Uppladdningen är dold bakom en utlösningsknapp, där du klickar på knappen för att visa ett modalt uppladdningsfält.

Därifrån kan du välja om du vill ladda upp en bild från din dator, från webben eller från din webbkamera!

Exempel-sidan erbjuder ett gäng att titta igenom, inklusive a dra och släpp exempel, tillsammans med en internationaliserad demosida.

Men för att verkligen lära mig hur det fungerar rekommenderar jag att skumma dokumenten och bläddra igenom huvud GitHub repo. Du kan också dela dina tankar med skaparna på Twitter @transloadit.