NCMBの機能をjQueryプラグイン化することで、特定の目的を素早く解決できるようになります。今回はファイルアップロードを簡単にするプラグインを作りました。動作は下の画像をご覧ください。
使い方
まず必要なJavaScriptファイルとCSSファイルを読み込みます。なお、jQueryに依存しているのでjQueryも読み込んでください。リポジトリはNCMBMania/fileuploaderになります。
CDNを使う場合には下記のようになります。
<script src="//cdn.rawgit.com/NCMBMania/fileuploader/master/ncmb_fileuploader.js"></script> <link rel="stylesheet" href="//cdn.rawgit.com/NCMBMania/fileuploader/master/ncmb_fileuploader.css">
HTMLの用意
HTMLではファイルをD&Dする枠を用意します。CSS側で #drag-drop-area で固定で指定していますが、必要に応じてCSSを変更してください。
<div id="drag-drop-area"> <p class="drag-drop-info">ここにファイルをドロップ</p> </div>
JavaScript側は下記のように実装します。fileUploadメソッドがファイルアップロード処理を行います。引数としてアプリケーションキーとクライアントキー、そして管理画面のURLあるアプリケーションIDを指定します。
const applicationKey = 'YOUR_APPLICATION_KEY'; const clientKey = 'YOUR_CLIENT_KEY'; const applicationId = 'YOUR_APPLICATION_ID'; $('#drag-drop-area').fileUpload({ applicationKey: applicationKey, clientKey: clientKey, applicationId: applicationId }, (urls) => { // アップロード後されたファイルのURL console.log(urls); }, (err) => { });
後はファイルのD&Dが行われて、ファイルストアへアップロードが完了すると、そのURLが返ってきます。
アプリケーションIDとは
アプリケーションIDは下記のような管理画面のURLで言うところの TTuIeDIVY6fSS5Hk になります。
https://console.mb.cloud.nifty.com/#/applications/TTuIeDIVY6fSS5Hk
このアプリケーションIDはファイルストアをHTTPS経由で公開されるURLに使われます。
https://mb.api.cloud.nifty.com/2013-09-01/applications/TTuIeDIVY6fSS5Hk/publicFiles/image.png
このため、引数で指定する必要があります。
注意点
返ってくるURLの配列はHTTPSでファイルへアクセス可能なものとなっています。このURLを使うためには管理画面のファイルストアの設定にある、公開ファイル設定 > HTTPSでの取得を有効にしなければなりません。
まとめ
このプラグインを使うことでファイルストアへの画像アップロードが簡単になります。ぜひお試しください。
