Ilmainen ES5 / ES6 JavaScript-tiedostonlatauslaite - Uppy
Yksi hankalimmista muotoilun muodoista on tiedostojen lataaminen. Siinä on oletusarvoinen HTML-tyyli, mutta se ei ole kaikkein kaunein asia maailmassa.
uppy ottaa tiedoston lataukset kokonaan uudelle tasolle a mukautettu käyttöliittymä ja a dynaaminen Ajax-tyylinen lastausprosessi.
Se toimii ES5 / ES6-koodilla, joten voit rakentaa web-sovelluksesi uusimpien JavaScript-standardien mukaisesti. Ja se jopa tukee tiedostojen lataamista pilvipalvelualueilta kuten Dropbox tai Google Drive, joten se on a monipuolinen tiedostojen latausskripti verkossa.
Uppy on täysin vapaa ja avoin lähde, repo GitHubissa. Helpoin tapa asentaa tämä plugin on kuitenkin npm tai Yarn, joten voit suorita se kuin todellinen paketti.
Kun saat tiedostot, jotka on lisätty sivustoosi, vain sisältää Uppy.js-tiedoston ja CSS-koodin. Sitten kohdistat haluamasi syöttökentän ja Uppy hoitaa loput.
Siinä on ainutlaatuinen liitäntä näyttää suurelta neliöpaikalta vetää ja pudottaa tiedostoja. Voit myös Valitse kohteet kiintolevyltä tai jopa ladata tiedostoja etäältä ulkoisista URL-osoitteista. Melko hullu!
Koko asennusprosessi löytyy dokumentointisivulta, mutta se on edellyttää ainakin jonkin verran ymmärrystä ECMAScript 6: sta. Tämä kirjasto etsii skriptien tulevaisuutta ja ei ole helpoin käyttää puhdasta vanilja JavaScript.
Mutta jos olet vakavasti web-kehityksessä, kannattaa oppia ES6: ta joka tapauksessa. Voit löytää tonnia resursseja verkossa itseopetusta varten ja voit jopa käyttää Uppyä ensimmäisenä “todellinen” hanke sukeltamaan ja aloittamaan oppimisen.
Tutustu Dashboardin esimerkkiin katso Uppy toiminnassa. Tällä sivulla lataaminen on piilotetun painikkeen takana, Näet modaalinlatauskentän napsauttamalla painiketta.
Sieltä voit valita, haluatko ladata kuvan tietokoneesta, verkosta tai jopa verkkokamerasta!
Esimerkkisivulla on joukko katsomista, mukaan lukien a vedä ja pudota esimerkki, yhdessä kansainvälistetty demo-sivu.
Mutta, kun todella opit, miten tämä toimii, suosittelen ohittaa asiakirjat ja selata GitHubin tärkeintä repoa. Voit myös jakaa ajatuksiasi Twitter @transloadit -sovelluksen luojien kanssa.
