unlayer / react-email-editor

Drag-n-Drop Email Editor Component for React.js
https://unlayer.com/embed
MIT License
4.53k stars 730 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()} />