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に含めてください。
または、TransloaditのCDN：Smart CDNの事前に構築されたバンドルを使用することもできます。その場合、 Uppyグローバルwindow.Uppyオブジェクトにそれ自体を取り付けます。
ショ和 バンドルはほとんどの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 - プレビュー、進行状況バー、メタデータエディター、およびすべてのクールなものを備えたユニバーサルUI。ウェブカメラやInstagramなどのほとんどのUIプラグインに必要ですProgress Bar - アップロードが進行するときに自分自身を満たす最小限の進捗バーStatus Bar - より詳細な進捗、一時停止/履歴書/キャンセルボタン、パーセンテージ、速度、アップロード/合計サイズ（デフォルトではDashboardに含まれています）Informer - すべてDashboard紛失したときに自撮りをする前に「Smile」などの通知を送信Drag & Drop - プレーンドラッグアンドドロップエリアFile Input - さらに、「ファイルの選択」ボタンをさらに均一にしますWebcam - それらのセルフィーをスナップして録音しますか？Google Drive - GoogleドライブからファイルをインポートしますDropbox - DropboxからファイルをインポートしますBox - ボックスからファイルをインポートしますInstagram - Instagramから画像とビデオをインポートしますFacebook - Facebookから画像とビデオをインポートしますOneDrive - Microsoft OnedriveからファイルをインポートしますImport From URL - ウェブ上のどこからでも直接URLをインポートするマークは、プラグインが機能するためには、サーバー側のコンポーネントである@uppy/companionが必要であることを意味します。
Tus - オープンTUS標準を介して再開可能なアップロードXHR Upload - 任意のバックエンド用の通常のアップロード（Apache、Nginxなど）AWS S3 - AWS S3または互換性のあるサービスにプレーンアップロードAWS S3 Multipart - S3スタイルの「マルチパート」アップロードAWSまたは互換性のあるサービスTransloadit - Transloaditの堅牢なファイルのアップロードとエンコードバックエンドのサポートGolden Retriever - ブラウザのクラッシュ後にファイルを復元します。Thumbnail Generator - 画像プレビューを生成します（デフォルトでDashboardに含まれています）Form - Uppyアップロードの直前に<form>からメタデータを収集し、オプションで結果をフォームに戻しますRedux - 新たな時間旅行のニーズのためChrome、Firefox、およびSafariの最近のバージョンをサポートすることを目指しています。
<input type="file">を使用してみませんか？JavaScriptがそれをたくさん持っていることを持っていないので、それは公正な質問です！アップロードとエンコードビジネスを10年間実行していますが、ファイル入力には必要なものが残っていることがわかりました。
すべてのアプリがこれらすべての機能を必要とするわけではありません。 <input type="file">多くの状況で問題ありません。しかし、これらは私たちの顧客がUppyを開発するために私たちを刺激するのに十分なことについてヒット /尋ねたいくつかのことでした。
Transloaditのチームは小さく、オープンソースから生計を立てるという共通の野望があります。 Tus.ioやUppyのようなプロジェクトを配ることで、最先端を前進させ、すべての人にとって人生を少し良くすることを望んでおり、そうすることで仕事をして、コンテンツの摂取と処理プラットフォームに目を向けています。
私たちの考えは、オープンソースのユーザーベースのほんの一部だけが、ソースから直接ホストされたバージョンの魅力を見ることができれば、それはすでに私たちの仕事を維持するのに十分である可能性があるということです。これまでのところ、これはうまくいっています！オープンソースに時間の80％を捧げることができ、まだ破産していません。 ：d
はい、詳細についてはドキュメントをご覧ください。
はい、バックエンドで必要なものはすべて、 @uppy/xhr-uploadプラグインで動作します。これは、 POSTまたはPUTのみを行うためです。これがPHPバックエンドの例です。
TUSプラグインで再開したい場合は、TUSサーバーの実装の1つを使用しますか？
ユーザーがInstagram、Googleドライブ、Dropbox、またはDirect URLからファイルを選択できるようにしたい場合は、 @uppy/companionが必要です（より多くのサービスが登場）。
.github/CONTRIBUTING.mdの寄稿者ガイドCHANGELOG.md Uppyは、フォトボックス、Issuu、Law Insider、Cool Tabs、Soundoff、Scrumi、Criveなどで使用されます。
あなたのプロジェクトでuppyを使用しますか？教えてください！
MITライセンス。
