Свободен ES5 / ES6 JavaScript Качване на файл Plugin - Uppy

Една от най-трудните форми на въвеждане в дизайна е качване на файл. Той има HTML стил по подразбиране, но не е най-красивото нещо в света.

Uppy прехвърля качени файлове на ново ниво с a персонализиран интерфейс и a динамичен процес на зареждане в стил Аякс.

То работи с код ES5 / ES6, така че можете да създавате уеб приложения с най-новите стандарти на JavaScript. И дори поддържа качване на файлове от сайтове за съхранение в облак като Dropbox или Google Диск, така че е многостранен скрипт за качване на файлове за мрежата.

Uppy е напълно свободен и с отворен код, с репо на GitHub. Най-лесният начин за инсталиране на този плъгин е чрез npm или Yarn, така че можете пуснете го като истински пакет.

След като получите файловете, добавени към уебсайта си, вие просто включват файла Uppy.js и CSS кода. След това се насочвате към всяко поле за въвеждане, което искате и Uppy се грижи за останалото.

Той има уникален интерфейс, който изглежда като едно голямо квадратно разположение за плъзгане и пускане на файлове. Можете също изберете елементи от вашия твърд диск или дори да качвате файлове дистанционно от външни URL адреси. Много луд!

Можете да намерите целия процес на настройка на страницата с документацията, но тя изисква поне малко разбиране на ECMAScript 6. Тази библиотека гледа към бъдещето на скриптовете и не е най-лесното нещо да се използва с чист JavaScript.

Но, ако сте сериозно за уеб разработката, си струва да научите ES6. Можете да намерите тона ресурси онлайн за самообучение и дори можете да използвате Uppy като своя първа “реален” проект за гмуркане и започване на обучение.

Вижте примера на таблото за управление за виж Uppy в действие. За тази страница качването е скрито зад бутон за задействане, където кликнете върху бутона, за да се покаже поле за модално качване.

Оттук можете да изберете дали искате да качите снимка от компютъра, от интернет или дори от уеб камерата!

Страницата „Примери“ предлага купчина за преглед, включително a плъзнете и пуснете примера, заедно с интернационализирана демонстрационна страница.

Но, за да научите наистина как работи това, препоръчвам да се спуснат документите и да се прегледат основните репо GitHub. Можете също така да споделите мислите си с създателите на Twitter @transloadit.