onImageUploadBefore in suneditor-react

[Saeeed-B]

@JiHong88 @LeeJiHong Hi, first I have to say, Your editor is really great. Thank you very much But I want to upload photos, videos, etc. below.

Take the file and upload it (my own way) and then hand over the file address to the editor and he will do the rest. I actually use a Meteor . And I don't really need to have a upload url. And I can upload my files in the same component. I'm actually looking for a method that just gives me the file and takes the address and puts it in the editor.

If you give an example, thank you very much

[Saeeed-B]

I realized this feature exists . in V 2.30.6

But apparently the later version is not supported in suneditor-react/

@JiHong88 And if you act according to what you say That is, we act as follows : onImageUploadBefore(files, info, uploadHandler) { const response = {..}; uploadHandler(response); }

In this case, the address is correct but the previous photo is not removed. And in fact two photos appear in the editor.

1. A photo with the server address
2. Photo with data address image / jpeg; base64

:( :(

[Saeeed-B]

I do not know exactly where the problem is, I only know now that I am using suneditor-react And after executing the following code, two photos with the two addresses I mentioned will be placed in the editor .

onImageUploadBefore(files , info , core ,uploadHandler){

            // Upload image to Server

            const src = UploadToServer(files[0]);

            // result
            const response = {
                // The response must have a "result" array.
                "result": [
                    {
                        "url": src,
                        "name": files[0].name,
                        "size": files[0].size
                    },
            ]}
            
            uploadHandler(response);
        }

What should we do so that only the image with the server address is included ?

[JiHong88]

Hi @Saeed-Bahrami Is everything done synchronously? Try returning false at the end.

[Saeeed-B]

@JiHong88 I used the promise, and when the image upload is complete, I resolve uploadHandler. Like the code below :

return new Promise((resolve, reject) => {
    upload.on('end', function (error, fileObj) {

            // Upload is Ended

           if (error) {
               reject(error);
           } else {
               // Get link Image
              const src = EditorImg.link(fileObj) ;

              const response = {
                    // The response must have a "result" array.
                   "result": [
                     {
                      "url": src,
                      "name": files[0].name,
                      "size": files[0].size
                      },
               ]}
             // Resolve uploadHandler
                 resolve(uploadHandler(response))
               }
            }); 
        });

[JiHong88]

@Saeeed-B Using the async function or primise returns a primise object. Try returning undefined explicitly.

onImageUploadBefore(files , info , core ,uploadHandler) => {
  /*
  ...
  */
  return undefined;
}

[Grouft]

Hi @JiHong88!

return underfined;

is not working for me =( Still editor upload two images but with different sources. Is there something I'm missing?

const onImageUploadBefore = async (files, info, uploadHandler) => {               
        try {
            for (const file of files) {                
                //Do something with image
                const url= await GettingUrl(file);

                let image = {
                    "url": url,
                    "name": file.name,
                    "size": file.size
                }

                images.push(image);
            }

            const response = {
                "result": images
            };
            uploadHandler(response);
        }
        catch (err) {
            uploadHandler(err.toString());
        }
        
        return undefined;
    }

[JiHong88]

Hi @Grouft Do not use async function. async (files, info, uploadHandler) -> (files, info, uploadHandler)

[CyrusZei]

Would be nice if this was in the docs 😄 I spent like 3 hours to figure this out 😄

[JiHong88]

@CyrusZei There is an explanation in the README and document. But I admit it's hard to find. I will improve the demo site.

[Hiteshsu06]

How to upload a local video using videoFileInput method (i just got the window but its not working as expected) in sunEditor react?

[JiHong88]

You can use the videoUploadUrl: "http~"

[Hiteshsu06]

You can use the videoUploadUrl: "http~"

but i want to upload the downloaded video

[JiHong88]

Um.. Just create an upload server and use the "videoUploadUrl" option to upload your video.

[Fahad98723]

I am using socketio for file uploading, If I use async function then getting two images, if I remove the async function then it's getting loading and loading. Is there are any way to show one image with async function `onImageUploadBefore={async (files, info, uploadHandler) => { try { const src = await SocketFileUploader(files); console.log(src); let response;

              response = {
                result: [
                  {
                    url: `https://cdn.ostello.co.in/${src[0].key}`,
                    name: files[0].name,
                    size: files[0].size,
                  },
                ],
              };
              console.log(src, response);
              uploadHandler(response);
            } catch (err) {
              uploadHandler(err.toString());
            }

            return undefined;
          }}`

[JiHong88]

@Fahad98723 https://github.com/JiHong88/SunEditor/issues/551#issuecomment-725858342

[mylastore]

HI,

size in megabytes or with and height 400x200?