JavaScriptファイルアップローダー Uppyを使う
JavaScriptのファイルアップローダーにはさまざまなライブラリが存在します。それらのライブラリの中から今回はファイルアップローダーライブラリUppyの基本的な使い方を説明します。Uppyを使うとWEBページから簡単にファイルのアップロードが行えます。
Uppyはローカルディスクだけではなく、Google Drive, Dropbop, Instagamなどからファイルを取得することができます。また、アップロードした画像のプレビュー機能もあり、指定した保存先にファイルのアップロードを行うことができます。
目次
サーバへのファイルアップロード
もっともシンプルなコードでファイルのアップロードを行います。簡単にUppyの動作確認を行うためにcdnを使います。
Uppyのサイトはこちらからアクセスすることができます。
ドラッグ&ドロップエリアの表示
ファイルをアップロードするためのドラッグ&ドロップエリアをWEBページ上に表示させます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Uppyの動作確認</title>
<link href="https://transloadit.edgly.net/releases/uppy/v1.2.0/uppy.min.css" rel="stylesheet">
</head>
<body>
<div id="drag-drop-area"></div>
</body>
<script src="https://transloadit.edgly.net/releases/uppy/v1.2.0/uppy.min.js"></script>
<script>
var uppy = Uppy.Core().
use(Uppy.Dashboard,{
target:'#drag-drop-area',
inline:true}
);
</script>
</html>
Uppyのコアモジュールとプラグインを利用することでさまざまなアップロード方法が提供されています。ここではコアモジュールとDashboardプラグインを利用しています。DashboradプラグインはDrag&Dropエリアやファイルプレビューなどユーザインターフェイスに関係するプラグインです。
Dashboardプラグインではオプション設定を行うことができ、targetオプションを使ってDashboradを表示させる要素を指定します。inlineオプションはモーダルウィンドウの設定に関連しておりモーダルウィンドウを使用しない場合はtrueを設定します。今はモーダルウィンドウを使用しないのでtrueに設定しておきます。
上記のコードを記述したファイルをブラウザで開くとドラッグ&ドロップエリアが下記のように表示されます。
Drop files hereに画像ファイルをドラッグ&ドロップするとプレビューが表示されます。試しに何か画像をドラッグ&ドロップしてみてください。下部にはUpload 1 fileのボタンが表示されていますが、サーバへのアップロード処理は何も行なっていないためボタンをクリックをしても何も起こりません。
ここまでの設定でドラッグ&ドロップを表示させることとファイルをそのエリアにドラッグ&ドロップできることが確認できました。
ファイルのアップロード
ファイルをサーバにアップロードするためには、新たなxhr-uploadプラグインを追加設定する必要があります。xhr-uploadはオプションを設定することができ、endpointオプションでアップロードを行うサーバのURLを指定します。
var uppy = Uppy.Core().
use(Uppy.Dashboard,{
target:'#drag-drop-area',
inline:true}
).
use(Uppy.XHRUpload,{
endpoint: 'http://127.0.0.1:8000/data'
});
ファイルの情報だけではなく、任意の値をサーバ側に渡したい場合は、setMetaメソッドを使用することができます。ここではidに111111を設定しファイルと一緒にid情報を渡そうとしています。
var uppy = Uppy.Core().
use(Uppy.Dashboard,{
target:'#drag-drop-area',
inline:true}
).
use(Uppy.XHRUpload,{
endpoint: 'http://127.0.0.1:8000/data'
}).
setMega({ id : 111111 });
Uppyからサーバへ送信したファイルの保存等の処理については通常のHTMLのinput type=”file”を使用した時と同じなので、ここでは省略します。Laravelを使用している場合は下記が参考になります。
ここまでの設定で、Uppyを利用したファイルのアップロードができます。
ファイルアップロード後の処理
アップロード完了後にサーバから戻られる内容の取得方法を確認します。イベントを利用します。
アップロード完了かcompleteイベントを使います。
uppy.on('complete', (result) => {
console.log('successful files:', result.successful)
console.log('failed files:', result.failed)
})
result.successfulの中にはアップロードした情報やステータスコードも含まれています。アップロード完了後にサーバから戻り値を設定している場合は、responseのbodyを確認すればその値を取得することができます。
エラーがなければ、result.failedの中身は空です。
この他にもcomplete以外にもイベント設定を行うことができるので、公式ドキュメントを参考にしてください。
オプション設定
debug設定やファイルサイズ制限等のvalidationも行うことができます。
var uppy = Uppy.Core({debug:true,
restrictions:{
maxFileSize:1000000,//1MB
maxNumberOfFiles:5,
minNumberOfFiles:2,
allowedFileTypes:['image/*','video/*]
})
debugはデフォルトではfalseなのでtrueにするとデベロッパーツールのコンソールに詳細ログが表示されます。ファイルサイズはアップロードを一度に行えるファイル数やアップロードを行う最小のファイル数の設定も可能です。
日本語化設定
デフォルトの言語は英語に設定されていますが、日本語に変更することが可能です。日本語について情報が記述されているja_JP.min.jsを読みむ必要があります。言語に関する文書はここに記述されているので参考にしてください。
<script src="https://transloadit.edgly.net/releases/uppy/locales/v1.4.0/ja_JP.min.js"></script>
日本語化のJavaScriptを設定したら、Dashboradのオプションにもlocaleを追加します。
var uppy = Uppy.Core().
use(Uppy.Dashboard,{
target:'#drag-drop-area',
locale:Uppy.locales.ja_JP,
inline:true}
)
再度アクセスすると日本語に変わっていることが確認できます。
モーダルウィンドウ設定
Uppyでは簡単にモーダルウィンドウの機能を追加することが可能です。
クリックボタンでDashboardエリアがモーダルウィンドウとして表示させる設定を行います。
クリックボタンを設置します。idにはuppy-select-filesを設定します。
<div id="drag-drop-area"></div>
<button id="uppy-select-files">click</button>
inlineオプションはデフォルトではfalseのため、モーダルウィンドウを使用する際は削除します。inlineオプションをtrueにするとモーダルウィンドウではなく<div id=”drag-drop-area”>にDashboardが表示されます。
モーダルウィンドウの切り替えを行う要素はtriggerオプションによって指定します。デフォルトでは#uppy-select-filesが設定されているので、uppy-select-filesを使っている時は省略可能です。
var uppy = Uppy.Core().
use(Uppy.Dashboard,{
target:'#drag-drop-area',
trigger:'#uppy-select-files',
locale:Uppy.locales.ja_JP}
)
ボタンをクリックするとモーダルウィンドウが表示されます。右上のXまたはもモーダルウィンドウの外側をクリックするとウィンドウは閉じられます。ファイルをアップロードする方法は、モーダルウィンドウなしと変わりません。
他のプラグインの動作確認を行う
Dashboardプラグインを利用すればドラッグ’&ドロップエリアやアップロードのステータス、プレビューもすべて確認を行うことができました。UppyではDashboardプラグイン以外を使ってもファイルのアップロードを行うことができます。
Uppyの理解を深めるために他のプラグインの使い方も確認していきます。
debug機能を使う
Dashboardと違いプラグインによってはユーザには何もメッセージが表示されません。その時はdebugをonにすると行われている内容を確認することができます。
debugオプションはコアモジュールで設定します。
var uppy = Uppy.Core({debug: true})
DragDropプラグインを利用する
DragDropプラグインを使うためにコードを下記のように記述します。
var uppy = Uppy.Core({debug: true}).
use(Uppy.DragDrop,{
target:'#drag-drop-area',
locale:Uppy.locales.ja_JP
})
ドラッグ&ドロップエリアが表示されます。
ファイルをドラッグ&ドロップエリアに入れても画面は何も変化がありません。debugをonにしたのでChromeならデベロッパーツールのConsoleを開いてください。
ファイルをエリアに落とした瞬間に[DragDrop] File were droppedのメッセージが表示され、Drag&Dropが動作していることを確認することができます。
ここまでの設定ではまだサーバにはファイルが送信されていません。自動で送信を行わせるためには、コアモジュールにautoProceedオプションを設定してtrueにする必要があります。
var uppy = Uppy.Core({debug: true, autoProceed:true})
Consoleには、追加で下記のアップロードのメッセージが表示されます。
[Uppy] [15:01:49] [XHRUpload] Uploading...
index.js:2 [Uppy] [15:01:49] uploading 1 of 1
index.js:2 [Uppy] [15:01:49] [XHRUpload] cjxvepw5h00013h5hrberli1s started
index.js:2 [Uppy] [15:01:49] [XHRUpload] cjxvepw5h00013h5hrberli1s progress: 4402 / 4402
index.js:2 [Uppy] [15:01:49] [XHRUpload] cjxvepw5h00013h5hrberli1s finished
index.js:2 [Uppy] [15:01:49] [XHRUpload] timer done
ProgressBarプラグインを利用する
ファイルアップロードを視覚的に見るためにProgressBarプラグインを追加します。html側にプログレスバーを表示させる要素が必要になります。<div id=”drag-drop-progress”>を追加し、targetオプションでその要素を指定します。hideAfterFinishオプションをfalseにしているのは、trueにするとファイルアップロード完了後にバーが消えるためです。
var uppy = Uppy.Core({debug:true,autoProceed:true}).
use(Uppy.DragDrop,{
target:'#drag-drop-area',
locale:Uppy.locales.ja_JP
}).
use(Uppy.ProgressBar, {
target: '#drag-drop-progress',
hideAfterFinish: false}).
use(Uppy.XHRUpload,{
endpoint: 'http://127.0.0.1:8000/api/data'
});
ProgressBar設定後は、ファイルをエリアの下にドロップすると左から右に青い線がプログレスバーとして表示されます。プログレスバーは設定した<div id=”drag-drop-progress”></div>の場所に表示されます。
FileInputプラグインを利用する
DragDropのようなエリアを設定するのではなくファイルを選択させる場合にはFileInputというプラグインがあります。先ほどのコードのDragDropをFileInputに変更します。
var uppy = Uppy.Core({debug:true,autoProceed:true}).
use(Uppy.FileInput,{
target:'#drag-drop-area',
locale:Uppy.locales.ja_JP
}).
use(Uppy.ProgressBar, {
target: '#drag-drop-progress',
hideAfterFinish: false}).
use(Uppy.XHRUpload,{
endpoint: 'http://127.0.0.1:8000/api/data'
});
ファイルを選択ボタンが表示され、ファイルを選択するとファイルのアップロードが開始され、プログレスバーが左から右へ表示されます。
StatusBarプラグインを利用する
ProgressBarよりもより詳細なアップロード状況を知りたい場合には、StatusBarプラグインを使うことができます。
表示に関するオプションでは下記の設定（一部）を行うことができます。
- hideAfterFinish・・・ファイルのアップロードが完了するとステータスバーを消すか消さないか設定できます
- showProgressDetails・・・アップロードのバーセント、アップロードしたサイズを確認することができます。
- hideUploadButton・・・自動アップロードをコアモジュールで設定していない場合falseに設定するとアップロードボタンが表示されます。アップロードボタンを押すとアップロードが開始されます。
ProgressBarよりもオプションが多いので、ファイルのアップロード状況をより詳細に確認することができます。
