Image upload to AWS S3

[dgandhi1993]

Can someone help me with getting the images uploaded to AWS S3 first and then using that link here in the editor?

@JiHong88 This can be integrated as a core offering since it is very common to have images on S3. It is available in many other editors out-of-the-box (check out Froala).

[langston8182]

If you want any help, don't hesitate.

[Elsha-Destino]

How do I customize the image upload button in javascript?

[JiHong88]

@Elsha-Destino https://github.com/JiHong88/SunEditor#options You can refer option about "image*"

[Elsha-Destino]

@JiHong88 I am a beginner at programming. I am having trouble formulating an Ideal upload-url for the files so I thought since you already formulated a filemanager.js it doesn't really work form me. So basically I was thinking of creating one of my own beacause my project is more JAVA-spring-mvc.

[JiHong88]

@Elsha-Destino Um.. The spring controller just needs to return a response in this format.

{
  "errorMessage": "insert error message",
  "result": [
    {
      "url": "/download/editorImg/test_image.jpg",
      "name": "test_image.jpg",
      "size": "561276"
    },
  ]
}

[borhan-dev]

import axios from "axios"; import { useRef } from "react"; import Editor from "suneditor-react";

export default function TestSunEditorJsx() { const editor = useRef();

const getSunEditorInstance = (sunEditor) => { editor.current = sunEditor; };

function onImageUploadBefore() { return (files, _info, _core, uploadHandler) => { (async () => { const formData = new FormData(); formData.append("file", files[0]);

    const { data } = await axios.post(
      "http://localhost:1000/api/v1/upload/single",
      formData
    );

    const res = {
      result: [
        {
          url: data?.url,
          name: "thumbnail",
        },
      ],
    };

    uploadHandler(res);
  })();

  // called here for stop double image
  uploadHandler();
};

}

return ( <Editor getSunEditorInstance={getSunEditorInstance} onImageUploadBefore={onImageUploadBefore()} setOptions={{ buttonList: [["image"]], }} height="50vh" /> ); }