Безкоштовний ES5 / ES6 JavaScript Завантажити файл плагін - Uppy

Одним з найскладніших форм входів для розробки є завантаження файлу. Він має стиль HTML за замовчуванням, але це не найгарніша річ у світі.

Uppy завантажує файли на новий рівень з a користувальницький інтерфейс а динамічний процес завантаження Ajax-стилю.

Це працює за кодом ES5 / ES6, щоб ви могли створювати веб-програми за допомогою останніх стандартів JavaScript. І це навіть підтримує завантаження файлів з сайтів хмарних сховищ наприклад, Dropbox або Google Drive, тому це a багатогранний скрипт завантаження файлів для Інтернету.

Uppy є абсолютно вільний і відкритий, з репо на GitHub. Проте найпростіший спосіб встановити цей плагін - npm або Yarn, так що ви можете запустити його як справжній пакет.

Як тільки ви отримаєте файли, додані на ваш сайт, ви просто включити файл Uppy.js і код CSS. Потім, ви націлюєте будь-яке поле введення, яке ви хочете, і Uppy піклується про решту.

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

Ви можете знайти весь процес налаштування на сторінці документації, але це вимагає принаймні певного розуміння ECMAScript 6. Ця бібліотека виглядає на майбутнє сценаріїв і не є найпростішим у використанні чистого JavaScript для ванілі.

Але, якщо ви серйозно ставитеся до веб-розробки, варто вивчити ES6. Ви можете знайти тонн ресурсів онлайн для самонавчання і ви навіть можете використовувати Uppy як ваш перший “реальний” проект для занурення та початку навчання.

Перевірте приклад панелі інструментів для див. Uppy в дії. Для цієї сторінки завантаження приховано за кнопкою тригера, де ви натиснете кнопку, щоб відобразити поле модального завантаження.

Звідти можна вибрати, чи потрібно завантажити зображення з комп'ютера, з Інтернету або навіть з веб-камери!

Сторінка "Приклади" пропонує купу для перегляду, включаючи a перетягніть приклад, разом з інтернаціоналізована демо-сторінка.

Але, щоб дійсно дізнатися, як це працює, я рекомендую спускати документи і переглядати головний репозитарій GitHub. Ви також можете поділитися своїми думками з творцями на Twitter @transloadit.