FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

JavaScriptで作る簡単ファイルアップローダー

f:id:mbaasdevrel:20201118171226g:plain

Webフォームなどでファイルや画像をアップロードするためのフォームを設置することはよくあります。サーバに送られてきたファイルデータを使ってファイルとして保存したり、加工したりします。ファイルはばいなりなので、その扱いが面倒だったりします。

そこでmBaaSを使ってクライアントサイドでファイルをmBaaSにアップロードすれば、サーバに送信するのはファイルのURLだけになります。今回はそんな仕組みを簡単に作る方法を紹介します。

実装例

まず実装例を紹介します。ファイルを指定(複数)すると、自動的にアップロードが開始されます。結果として、画像のURLが取得できます。

f:id:mbaasdevrel:20201118171226g:plain

利用する変数

今回は画像をアップロードして、それを表示する機能を実装します。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

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。