Бесплатный плагин загрузки файлов ES5 / ES6 JavaScript - Uppy

Одним из самых сложных входных форм для проектирования является файл загружен. У него есть стиль HTML по умолчанию, но это не самая красивая вещь в мире.

Uppy переводит файлы на совершенно новый уровень с пользовательский интерфейс и динамический процесс загрузки в стиле Ajax.

Это работает на коде ES5 / ES6, так что вы можете создавать свои веб-приложения с последними стандартами JavaScript. И это даже поддерживает загрузку файлов с облачных хранилищ например Dropbox или Google Drive, так что это многогранный скрипт загрузки файлов для сети.

Уппи это совершенно бесплатно и с открытым исходным кодом, с репо на GitHub. Тем не менее, самый простой способ установить этот плагин через npm или Yarn, так что вы можете запустить как настоящий пакет.

Как только вы добавите файлы на ваш сайт, вы просто включите файл Uppy.js и код CSS. Затем вы выбираете любое поле ввода, а Uppy позаботится об остальном..

Имеет уникальный интерфейс, который выглядит как одно большое квадратное размещение перетаскивать файлы. Вы также можете выбрать элементы с вашего жесткого диска или даже загружать файлы удаленно с внешних URL. Довольно сумасшедший!

Вы можете найти весь процесс установки на странице документации, но это требует хотя бы некоторого понимания ECMAScript 6. Эта библиотека смотрит в будущее сценариев и ее не так просто использовать с чистым ванильным JavaScript.

Но если вы серьезно относитесь к веб-разработке, в любом случае стоит изучить ES6. Ты можешь найти тонны ресурсов онлайн для самообучения, и вы даже можете использовать Uppy в качестве первого “реальный” проект, чтобы погрузиться и начать учиться.

Посмотрите пример Dashboard для увидеть Uppy в действии. Для этой страницы загрузка скрыта за триггерной кнопкой, где вы нажимаете кнопку для отображения модального поля загрузки.

Оттуда вы можете выбрать, хотите ли вы загрузить изображение с вашего компьютера, из Интернета или даже с веб-камеры!

На странице «Примеры» можно просмотреть несколько групп, включая пример перетаскивания, вместе с интернациональная демонстрационная страница.

Но, чтобы действительно понять, как это работает, я рекомендую просмотреть документы и просмотреть основной репозиторий GitHub. Вы также можете поделиться своими мыслями с создателями в Twitter @transloadit.