unlayer / react-email-editor

Drag-n-Drop Email Editor Component for React.js
https://unlayer.com/
MIT License
4.63k stars 744 forks source link

Api call happening on using registerCallback images #337

Open yogiis98 opened 1 year ago

yogiis98 commented 1 year ago

Why api call is happening to https://api.tools.unlayer.com/v1/image?url=customImageUrl when using custom image library.

Is there any way to disable this call happening to unlayer server.

yogiis98 commented 1 year ago

We use it this editor for private mailers and don't want anything to go to any external service, currently unlayer editor is making call for images.

yogiis98 commented 1 year ago

@adeelraza @lucasbesen @umairsiddique Is there any way we can disable these proxy calls happening because right now we are using custom image chooser where we are passing the image url back to done callback on registerCallback('images')

Currently it is looking like things are unnecessarily making api call when they are not being used as well. or Is it a bug. Please help.

Shashankd48 commented 1 year ago

I'm looking for the same issue Is there any way we can upload images to our domain and giver URL here?

SebastianLindback commented 1 year ago

selectImage callback will place you in direct control of the image uploading and management. https://docs.unlayer.com/docs/custom-image-library

unlayer.registerCallback('selectImage', function (data, done) { // Open your image library // Once a user picks an image, call the done function with URL done({ url: "IMAGE URL GOES HERE" }); });

SebastianLindback commented 1 year ago

to use your own storage you can use the "image" callback.

const onReady = async () => {

emailEditorRef?.current?.registerCallback(
  "image",
  async function (file, done) {
    var dataa = new FormData();
    dataa.append("file", file.attachments[0]);
    done({ progress: 0 });

    axios
      .post(`/files/v1`, dataa, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then(({ data }) => done({ progress: 100, url: data?.url }));
  }
);

.....

<EmailEditor ref={emailEditorRef} onReady={() => onReady()} />

greedysiru commented 1 month ago

even when using the image callback for custom image handling, I observe that a request is still made to:

https://api.tools.unlayer.com/v1/image?url=...

adeelraza commented 1 month ago

This call happens when you try to edit the image. This is because the image editor in browser does not allow CORS URLs so Unlayer has to proxy the image from our servers.

Do you want to disable the image editor in the builder?