Visualforceではapex:inputFileタグをつかってファイルアップロードを実現できますが、RemoteActionで添付ファイルを登録したい場合、JS側の処理で対応する必要があります。
まずアップロードファイルの選択は普通のinputFileタグを使って行います。
<input type="file" name="attamentFile" id="attamentFile" />
ファイルの存在判定、種別判定はこんな感じです。
var uploadFile = document.getElementById('attamentFile');
var file = uploadFile.files[0];
if (!file) {
alert('ファイルを選択してください。');
return false;
}
if (!file.type.match(/(image.*)/)) {
alert('Imageファイルを選択してください。');
return false;
}
File周りの処理はFileReaderを使って対応します。
var reader = new FileReader();
reader.onloadend = function() {
var dataURL = reader.result;
// Apexに渡す値をセット
var apexWrapper = {
account : helper.getAccountObject(),
fileName : file.name,
fileSize : file.size,
uploadFile : dataURL.match(/,(.*)$/)[1]
};
// 保存処理を実行
doSaveByApex(apexWrapper);
};
reader.readAsDataURL(file);これでファイル名、ファイルサイズ、Blob型の値を用意できるので後はApex側で処理すればファイルアップロードを実行できます。
サンプルコード
ザックリですがサンプルコードです。
取引先名を入力して、アップロードするファイルを選択します。
Saveボタンをクリックすると取引先が作成され、詳細ページが表示されます。
添付ファイル関連リストに正しくファイルが保存されていることを確認できます。
ファイルを参照するときちんとアップロードした画像が表示されるので問題なく処理できていると思います。
RemoteActionをつかってファイルアップロードを行う方法は上記のとおりです。
