2024/1/25に開催した「Salesforce Developer Group Tokyo」のMeetupで発表した資料です。 https://trailblazercommunitygroups.com/events/details/salesforce-salesforce-developer-group-tokyo-japan-presents-onrainkai-cui-salesforce-developers-meetup-32-xin-chun-ltda-hui/

1. Takashi Hatamoto
訳あってLWCから添付ファイル上げ
ようとした話
VFからLWCまで、実装方法いろいろ
SFDG 運営サブリーダー

2. 自己紹介
畑本 貴史 / Takashi Hatamoto
株式会社チームスピリット
サービスディベロプメント本部
TSFエンジニアリングチーム エキスパート
• Salesforceエンジニア歴14年
• 現職では5年近くAppExchange開発
• Salesforce Developer Group Tokyo 運営メンバー
• Salesforce Saturday Japan (京橋) 主催
• 元Lightning App Dev Champion
• 学生時代は空を飛んでいたらしい・・

3. 前提情報
機能要件
• 画像ファイルをSalesforceにアップロードする画面を作りたい
• 画面はVisualforceで作成する
• 画像ファイルは、添付ファイル[Attachment]として登録する
• 画像ファイルのサイズは最大10MBまで想定する
（Attachmentの上限）

4. ①VisualforceからApexを使ってアップロード
VisualforceのApexコントローラからレコードを登録する
Visualforce側
• バイナリファイルのフォーム登録には以下のいずれ
かを使う
• Input type=“file”(HTML5標準)
• apex:inputFile (VF専用)
• ファイル名とファイルデータをApexに送る
Apex側
• Attachmentオブジェクトを宣言
• ファイル名とファイルデータを登録
// ApexでAttachmentを登録
public saveAttachment(String fileName, Blob fileBody)
{
Attachment attach = new Attachment();
attach.ParentId = 'xxxxxxxxxxxxxxx';
attach.Body = fileBody;
attach.Name = fileName;
insert Attachment;
}
<input type="file" accept="image/*" name="image_file"
id="image_file" ></input>
<apex:inputFile value="{!fileBody}"
filename="{!fileName}"/>
大容量ファイルを上げたときに
ヒープサイズエラーになる！

5. ②Visualforceから「Apexを使わずに」アップロード
“Ajax Toolkit”を用いて、VFのJavaScriptからSOAP
APIを使って接続
https://developer.salesforce.com/docs/atlas.en-us.aj
ax.meta/ajax/sforce_api_ajax_introducing.htm
SOAP APIを用いて38MBまでアップロード可能
Visualforce側
• Ajax Toolkit(connection.js)をロードしておく
• フォームから取得したファイル名とファイルデータを
使ってAttachmentレコードを作成
<script type="text/javascript"
src="/soap/ajax/60.0/connection.js"></script>
<script type="text/javascript">
// Toolkitにセッションを渡す
sforce.connection.sessionId='{!GETSESSIONID()}’;
// ToolkitでAttachentを登録
const attachment = new sforce.SObject("Attachment");
attachment.Name = img.data('filename');
attachment.ContentType = img.data('filetype');
attachment.ParentId = result.cardStatementLineId;
attachment.body = img.attr('src').split(',')[1];
const attachCreateResult =
sforce.connection.create([attachment]);
</script>
この画面、LWCでリファクタリングします！

6. ③LWCからファイルをアップロード
LWCからSalesforceのデータを登録する場合、
以下の手順が考えられる
1. データをApexに送り、Apexから登録(①と同様)
2. lightning/uiRecordApiを使ってJavaScriptから登録
(②と同様)
3. lightning-file-uploadを使う⇒登録した時点でファイ
ルがアップロードされる！
// uiApiをインポート
import { createRecord } from 'lightning/uiRecordApi’;
// uiRecordApiでContentVersionを登録
const fileData={
Title:fileName,
PathOnClient:'file.jpg',
VersionData: fileData
}
const recordInput = {
apiName:'ContentVersion',fields:fileData };
createRecord(recordInput: Record);
<!-- コントローラ処理不要で自動的にアップロードされる -->
<lightning-file-upload
label="ファイルアップロード "
name="fileUploader"
accept=['.jpg','.png']
record-id={parentdId}
onuploadfinished={handleUploadFinished}
multiple
>
</lightning-file-upload>
２，３の方法では[ContentDocument]
オブジェクトとして登録される
⇒[Attachment]は登録できない！？

7. ④LWCからファイル[Attachment]をアップロード
SOAP/REST APIでなら[Attachment]登録できる？
⇒ LWCからAPIアクセスすることはできない！？
• LWC画面から直接Salesforceセッションを取得する
ことはできない
• Apexから(UserInfo)セッションを取得できるが、API
アクセスに使うことはできない
• LWCからのAPIコールはApex経由で行うことが推
奨されている
// uiApiをインポート
import { createRecord } from 'lightning/uiRecordApi’;
// uiRecordApiでCOntentVersionを登録
const fileData={
Title:fileName,
PathOnClient:'file.jpg',
VersionData: fileData
}
const recordInput = {
apiName:'ContentVersion',fields:fileData };
createRecord(recordInput: Record);
<!-- コントローラ処理不要で自動的にアップロードされる -->
<lightning-file-upload
label="ファイルアップロード "
name="fileUploader"
accept=['.jpg','.png']
record-id={parentdId}
onuploadfinished={handleUploadFinished}
multiple
>
</lightning-file-upload>
他の部分からセッションを取得できれば、
あるいは・・・

8. 補足情報：[Attachment]と[ContentDocument]の違い
[Attachment]の特徴
● Classic時代の古いファイルシステム
● データの更新不可
● 親レコードと主従関係で紐づく(移動不可)
○ 紐づけない場合は[Document]を用いる
● ファイルサイズ：上限25MB
○ SFサポートに依頼することで65MBまで拡張可能
○ SOAP APIで送信
[ContentDocument]の特徴
● LEX時代標準の新しいファイルシステム
● データ更新可能
○ [ContentVersion]で更新差分が記録される
● 複数のレコードへの紐づけ・付け替えやユーザ・グループに対する共有設定が可能
○ [ContentDocumentLink]で連結する
● ファイルサイズ：上限2GB

9. 補足情報：[Attachment]と[ContentDocument]の違い
比較表
※より詳細な情報は以下を参照
https://help.salesforce.com/s/articleView?id=sf.collab_files_differences.htm&type=5&language=ja
Attachment Document ContentDocument
実装時期 Classic Classic 最新
データの更新 × ○ ◎
レコードへの紐づけ ○ × ◎
ユーザへの共有 × ○ ◎
ファイルサイズ上限 25MB 5MB 2GB

10. 結論
カスタムコード内でセッションIDを取得してAPIアクセスをする手順や問題については、
こちらで詳しく解説されています。
How to get Session ID for Salesforce managed packages
https://medium.com/noltic/how-to-get-session-id-for-salesforce-managed-packages-533c1a654549
今度何かあったら、
素直に新しいオブジェクト(ContentDocument)を
使いましょう・・・