Webフォームなどでファイルや画像をアップロードするためのフォームを設置することはよくあります。サーバに送られてきたファイルデータを使ってファイルとして保存したり、加工したりします。ファイルはばいなりなので、その扱いが面倒だったりします。
そこでmBaaSを使ってクライアントサイドでファイルをmBaaSにアップロードすれば、サーバに送信するのはファイルのURLだけになります。今回はそんな仕組みを簡単に作る方法を紹介します。
実装例
まず実装例を紹介します。ファイルを指定（複数）すると、自動的にアップロードが開始されます。結果として、画像のURLが取得できます。
利用する変数
今回は画像をアップロードして、それを表示する機能を実装します。mBaaSのファイルストアにはHTTPSでファイルへアクセスする機能がありますが、その際のURLは管理画面のURLから取得できます。たとえば管理画面のURLは次のようになっています。
https://console.mbaas.nifcloud.com/#/applications/XHYtlDWSSUaupzkO
この時の XHYtlDWSSUaupzkO をアプリIDと呼びます。このアプリIDを利用します。つまり用意する変数は次の3つです。
- アプリケーションキー
- クライアントキー
- アプリID
mBaaSを初期化する
JavaScript SDKを読み込んでmBaaSを初期化します。
const applicationKey = '87e...b89'; const clientKey = 'd31...fb6'; const appId = 'XHYtlDWSSUaupzkO'; const ncmb = new NCMB(applicationKey, clientKey);
ファイルを指定した際のイベントを利用する
Webフォームの <input type="file"> でファイルを指定した時には onchange イベントが発火します。これを使って処理を作ります。
document.querySelector('#file').onchange = async (e) => { document.querySelector('#results').innerHTML = 'アップロード中'; }
ファイルは e.target.files で取得できます。これは複数ファイル指定可能か否かに関わらず同じです。このファイルの配列を ncmb.File.upload に渡すだけです。
const promises = []; for (const file of e.target.files) { promises.push(ncmb.File.upload(file.name, file)); }
ネットワーク処理なので Promise.all を使ってまとめて結果を得ます。
const ary = await Promise.all(promises);
後は結果をHTMLに出力します。この際、画像のURLとしてアプリIDを利用します。
document.querySelector('#results').innerHTML = ary.map(image => `<img src="https://mbaas.api.nifcloud.com/2013-09-01/applications/${appId}/publicFiles/${image.fileName}" width="300" /><br />`).join('')
まとめ
この方法を使えば、サーバ側にストレージ環境がない状態であってもファイルアップロード機能が利用できます。画像のURLをデータベースに入れておけば、再利用も簡単です。mBaaSでのファイルアップロードは簡単なので、ぜひお使いください。
ファイルストア (JavaScript) : 基本的な使い方 | ニフクラ mobile backend
