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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: Создание стильной адаптивной формы с CSS3 и HTML5

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

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

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

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

Но если вы серьезно относитесь к веб-разработке, то в любом случае стоит изучить ES6. Вы можете найти тонны ресурсов в Интернете для самообучения, и вы даже можете использовать Uppy как ваш первый «настоящий» проект, чтобы погрузиться и начать учиться.
Проверьте Пример панели инструментов увидеть Уппи в действии. Для этой страницы загрузка скрыта за триггерной кнопкой, где вы нажимаете кнопку, чтобы отобразить модальное поле загрузки.

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

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

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

Читайте также: 4 UX Design Form UX, которые вы должны знать (с примерами)

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>