読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:RemoteActionと複数ファイルのアップロード

salesforce.com Force.com Angular

JavaScript Remotingでファイルの一括アップロードする方法についてです。

f:id:tyoshikawa1106:20160131002119p:plain

input type="file"にmultiple属性を宣言することで一括アップロードが可能になります。accept属性でアップロード対象を特定のファイル種別に絞込できます。

<input type="file" name="attamentFile[]" id="attamentFile" multiple="multiple" accept="image/*" />

セットしたファイル情報はdocument.getElementByIdで取得したあと、.filesで取得することができます。

var uploadFile = document.getElementById('attamentFile');
uploadFile.file
// ファイル数 → uploadFile.file.length

f:id:tyoshikawa1106:20160131004046p:plain


ファイルの読み込み処理は『FileReader』を利用します。
f:id:tyoshikawa1106:20160131004430p:plain


注意点としてFileReaderは非同期処理となります。そのため複数アップロードのためにループ処理を行うときは実行順序を意識する必要があります。


AngularJSでは$q.defer()をつかって実行順序を制御できます。
f:id:tyoshikawa1106:20160131004700p:plain


$q.deferについてはこちらが参考になりました。


RemoteActionでApexクラスに値を渡す必要がありますが、Wrapperクラスを用意して渡す方法があります。
f:id:tyoshikawa1106:20160131005229p:plain

f:id:tyoshikawa1106:20160131005254p:plain

f:id:tyoshikawa1106:20160131010027p:plain


という感じでファイルアップロード処理を実装できました。

サンプルコード

追記

上記方法ではいくつか考慮しなくてはいけない問題が考慮できていませんでした。以下リンク先にそのあたりについてまとめています。