自作lwcコンポーネントで画像をアップロード方法のメモ

前提

・ほとんどの場合で、lightning-file-uploadを使用する方がよい
　https://developer.salesforce.com/docs/component-library/bundle/lightning-file-upload/documentation

・下記のようなユースケース時にファイルアップロードを自作する
　ファイルのアップロード前に画像を加工を行う
　アップロード時に独自の処理を行う

注意点

・Apexのガバナ制限でメモリ(ヒープサイズ)は6MB
　画像のファイルサイズは3MB(くらい)を超えるとヒープエラーとなる
　対応として、lwc(javascript側)で画像のリサイズが必要

コード

Apex

public with sharing class HogeController {
    @AuraEnabled
    public static Void createContentversion(Id recordId, String base64Img) {
        ContentVersion contentVersion = new ContentVersion(
            Title = 'fileTitle',
            VersionData = EncodingUtil.base64Decode(base64Img),
            PathOnClient = '/fileName.jpg',
        );

        insert contentVersion;

        Id contentDocumentId = [SELECT ContentDocumentId FROM ContentVersion WHERE Id = :contentVersion.Id][0].ContentDocumentId;

        insert new ContentDocumentLink(
            ContentDocumentId = ContentDocumentId,
            LinkedEntityId = recordId,
            ShareType = 'I',
            Visibility = 'AllUsers'
        );
    }
}

lwc

<template>
  <input type="file" accept="image/jpg" onchange={changeInputFileHandler} />
</template>

import { LightningElement, api } from 'lwc';
import createContentversion from '@salesforce/apex/HogeController.createContentversion';

export default class HogeComponent extends LightningElement {
  @api recordId = '';

  async changeInputFileHandler(event) {

    const readAsDataURL = (imgFile) => {
      return new Promise((resolve) => {
        const fileReader = new FileReader();
        fileReader.onload = () => {
          resolve(fileReader.result);
        };
        fileReader.readAsDataURL(imgFile);
      });
    };

    const inputImgDataUrl = await readAsDataURL(event.target.files[0]);
    await createContentversion({recordId: this.recordId, base64Img: inputImgDataUrl.split(',')[1]});
  }
}