こんにちは!
今回は「Reactのフォームで画像をコピペ(コピー&ペースト)でアップロードする方法」についてお伝えしたいと思います。
工数かかるかと思ったら意外と簡単にできたので共有いたします。
Typescriptを導入されている方も多いと思いますので、型宣言についても記述していきます。
Reactのフォームで画像をコピペ(コピー&ペースト)でアップロードする方法
ポイント
Reactのinput要素にはonPaste
Propsがあり、貼り付けイベントをトリガーにすることができる
input, textareaタグのtype=file
と基本的な扱い方は同じでbase64を取得できる
以下に具体例を用いて説明します。
const SampleComponent = () => {
const [files, setFiles] = useState([]);
// コピペした時の処理
const handlePaste = async (pasteEvent: React.ClipboardEvent) => {
const fileList = pasteEvent.clipboardData.items || [];
const fileCount = fileList.length;
if (fileList.length > 0 && fileList[0].kind !== 'file') return; // ファイル以外をペーストした場合は対象外
pasteEvent.preventDefault(); // inputのvalueにファイル名が設定されないようにする
if ((files.length + fileCount) > maxFileUpload) {
alert(`一度にアップロードできるファイルは${maxFileUpload}個までです。`);
return;
}
for (let i = 0; i < fileCount; i++) {
const file = fileList[i].getAsFile() as File;
const pattern = /^image\/(jpeg|png|gif)|^text.*$|^application.*$/;
if (!file.type.match(pattern)) return; // 対象のファイル以外は添付しない
const reader = new FileReader();
// ファイルを読み込み終わったタイミングで実行するイベントハンドラー
reader.onload = () => {
//base64形式の画像データをfilesに格納
if (typeof reader.result === 'string') {
const base64 = reader.result.replace(/^data:\w+\/[a-zA-Z_0-9-.]+;base64,/, ''); // 接頭部は削除
setFiles((prevFiles) => {
return [...prevFiles, {name: file.name, base64}];
});
}
}
// ファイルを読み込む
reader.readAsDataURL(file);
}
};
return (
<div className={styles.table__messageArea}>
<textarea
id='content'
name='content'
className={styles.table__message}
placeholder={'画像をコピペしてください'}
onPaste={handlePaste}
/>
</div>
);
};
export default SampleComponent;
こんな感じでコピペした画像をbase64で取得することができます!
以上、お疲れさまでした〜🍵