uppy
Uppy 4.9.0
Uppy - это гладкий модульный загрузчик файла JavaScript, который легко интегрируется с любым приложением. Он быстро, имеет понятный API и позволяет вам беспокоиться о более важных проблемах, чем создание загрузчика файла.
Код, используемый в приведенном выше примере:
import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import RemoteSources from '@uppy/remote-sources'
import ImageEditor from '@uppy/image-editor'
import Webcam from '@uppy/webcam'
import Tus from '@uppy/tus'
const uppy = new Uppy ( )
. use ( Dashboard , { trigger : '#select-files' } )
. use ( RemoteSources , { companionUrl : 'https://companion.uppy.io' } )
. use ( Webcam )
. use ( ImageEditor )
. use ( Tus , { endpoint : 'https://tusd.tusdemo.net/files/' } )
. on ( 'complete' , ( result ) => {
console . log ( 'Upload result:' , result )
} )Попробуйте онлайн или прочитайте документы для получения более подробной информации о том, как использовать Uppy и его плагины.
npm install @uppy/core @uppy/dashboard @uppy/tus Добавьте css uppy.min.css, либо в свою HTML -страницу <head> , либо включите в JS, если ваш выбор поддерживает его.
В качестве альтернативы, вы также можете использовать предварительно построенный пакет от CDN TransLuduitIt: Smart CDN. В этом случае Uppy будет прикрепляться к глобальному объекту window.Uppy .
️ Пакет состоит из большинства огромных плагинов, поэтому этот метод не рекомендуется для производства, так как вашим пользователям придется загружать все плагины, когда вы, вероятно, используете только несколько.
<!-- 1. Add CSS to `<head>` -->
< link
href =" https://releases.transloadit.com/uppy/v4.9.0/uppy.min.css "
rel =" stylesheet "
/>
<!-- 2. Initialize -->
< div id =" files-drag-drop " > </ div >
< script type =" module " >
import {
Uppy ,
Dashboard ,
Tus ,
} from 'https://releases.transloadit.com/uppy/v4.9.0/uppy.min.mjs'
const uppy = new Uppy ( )
uppy . use ( Dashboard , { target : '#files-drag-drop' } )
uppy . use ( Tus , { endpoint : 'https://tusd.tusdemo.net/files/' } )
</ script > Dashboard - универсальный пользовательский интерфейс с превью, бары прогресса, редактор метаданных и все классные вещи. Требуется для большинства плагинов пользовательского интерфейса, таких как веб -камера и InstagramProgress Bar - минимальный панель прогресса, который заполняется при загрузкеStatus Bar - более подробный прогресс, кнопки паузы/резюме/отмены, процент, скорость, загруженные/общие размеры (включены по умолчанию с Dashboard )Informer - Отправьте уведомления, такие как «Улыбка», прежде чем сделать селфи или «загрузка неудачной», когда все потеряно (также включено по умолчанию с Dashboard )Drag & Drop - простая площадь перетаскиванияFile Input - даже более простая кнопка «Выбрать файлы»Webcam - защелка и записывает эти селфи?Google Drive - Импортные файлы с Google DriveDropbox - импортные файлы из DropboxBox - импортные файлы из коробкиInstagram - Импорт изображений и видео из InstagramFacebook - импортируйте изображения и видео из FacebookOneDrive - импортные файлы от Microsoft OneDriveImport From URL - импорт прямых URL -адресов из любой точки Интернета Ⓒ Mark означает, что @uppy/companion , компонент на стороне сервера, необходим для работы плагина.
Tus - Восстанавливаемые загрузки через стандарт Open TUSXHR Upload - обычная загрузка для любого бэкэнда (например, Apache, Nginx)AWS S3 - простая загрузка на AWS S3 или совместимые сервисыAWS S3 Multipart -S3 в стиле «Multipart» загрузку в AWS или совместимые сервисыTransloadit - поддержка надежной загрузки и кодирования файлов TransLoadItGolden Retriever - восстанавливает файлы после сбоя браузера, как будто это ничегоThumbnail Generator - генерирует предварительные просмотра изображений (включенные по умолчанию с Dashboard )Form - собирает метаданные из <form> прямо перед повышенной загрузкой, а затем при добавлении результатов обратно в формуRedux - для ваших новых потребностей в путешествиях во времени Мы стремимся поддержать недавние версии Chrome, Firefox и Safari.
<input type="file"> ?Не имея битов JavaScript, имея много этого, так что это справедливый вопрос! Запуск бизнеса загрузки и кодирования в течение десяти лет, хотя мы обнаружили, что в случаях ввод файла оставляет некоторые желаемые:
Не всем приложениям нужны все эти функции. <input type="file"> в порядке во многих ситуациях. Но это были несколько вещей, которые наши клиенты попали / спрашивали достаточно, чтобы вызвать нас, чтобы развиваться.
Команда Transudultit небольшая, и у нас есть общие амбиции, чтобы зарабатывать на жизнь открытым исходным кодом. Размещая такие проекты, как TUS.IO и Uppy, мы надеемся продвинуть состояние искусства, сделать жизнь немного лучше для всех, и при этом есть полезные работы и посмотреть на нашу коммерческую услугу: платформу для приема контента и обработки.
Мы думаем, что если только часть нашей базы пользователей с открытым исходным кодом сможет увидеть привлекательность размещенных версий прямо из источника, этого уже может быть достаточно, чтобы поддерживать нашу работу. Пока это работает! Мы можем посвятить 80% нашего времени на открытый исходный код и еще не обанкротились. : D.
Да, пожалуйста, ознакомьтесь с документами для получения дополнительной информации.
Да, все, что вы хотите на бэкэнд, будет работать с плагином @uppy/xhr-upload , так как он делает только POST или PUT . Вот пример бэкэнд PHP.
Если вы хотите возобновить плагин TUS, используйте одну из реализаций сервера TUS ??
И вам понадобится @uppy/companion если вы хотите, чтобы ваши пользователи могли выбирать файлы из Instagram, Google Drive, Dropbox или через прямые URL -адреса (с появлением большего количества сервисов).
.github/CONTRIBUTING.mdCHANGELOG.md Uppy используется: Photobox, Issuu, Law Insider, Cool Tabs, Soundoff, Scrumi, Crive и другие.
Используйте uppy в своем проекте? Дайте нам знать!
Лицензия MIT.
