ReactQuillで画像をAmazon S3に保存する方法

概要

React用のQuillのライブラリであるReactQuillで画像を添付すると、デフォルトの挙動だとBase64形式に変換されます。

<img src="data:image/png;base64,ioARw0KtVGAAG..." />

そこで今回は、画像をAmazon S3に保存し、そのURLをimgタグのsrc属性にセットする方法をまとめました。

<img src="Amazon S3のURL" />

サンプルコード

Amazon S3に画像を保存するHooksであるuseSaveImageToS3Mutationは、Apollo ClientとGraphQL Code Generatorを使っている場合を想定しているので、ご自身の環境に応じてよしなに関数を作成してくださいませ。

App.tsx

function App() {
  // Amazon S3に画像を保存する関数
  const [saveImageToS3] = useSaveImageToS3Mutation({
    onCompleted: ({ saveImageToS3: { imageUrl } = {} }) => {
      // 画像が保存できたら、その保存先のURL(imageUrl)をinsertToEditor関数に渡す。
      insertToEditor(imageUrl);
    },
  });

  const ref = useRef(null);

  const insertToEditor = (url: string) => {
    const range = ref.current.editor.getSelection();
    ref.current.editor.insertEmbed(range.index, "image", url);
  };

  const selectLocalImage = () => {
    const input = document.createElement("input");
    input.setAttribute("type", "file");
    input.click();

    input.onchange = () => {
      const file = input.files[0];

      // file type is only image.
      if (/^image\//.test(file.type)) {
        saveImageToS3({ variables: { image: file } });
      } else {
        alert("画像のみアップロードできます。");
      }
    };
  };

  const modules = useMemo(() => {
    return {
      toolbar: {
        handlers: {
          image: selectLocalImage,
        },
        container: [["image"]],
      },
    };
  }, []);

  return <ReactQuill modules={modules} ref={ref} />;
}

export default App;

参考

https://github.com/quilljs/quill/issues/1400
https://github.com/zenoamaro/react-quill/issues/688