Intercept image paste

[masudhossain]

Our users are pasting in images and they're often very large. We've been saving that to the state and it's been causing a lot of performance issues storing large base64 data.

Is there a way to intercept an image paste and get the base64? or even disable it.

[megahertz]

This component doesn't manage assets, so such a feature should be implemented manually.

[masudhossain]

How can we intercept a base64 pasted image so we can upload it to our server?

[megahertz]

I have no idea

[masudhossain]

In case anyone else is wondering how to intercept large base64 image pastes so it doesn't destroy your load time and how much data is in your state.

Take the array in content to create an image using that base64.

const handlePaste = (event) => {
    const clipboardData = event.clipboardData //|| window.clipboardData;
    
    console.log(clipboardData)
    if (clipboardData && clipboardData.items) {
      for (let i = 0; i < clipboardData.items.length; i++) {
        const item = clipboardData.items[i];

        if (item.type.indexOf("image") !== -1) {
          const imageBlob = item.getAsFile();

          // Create a URL for the image blob
          const imageUrl = URL.createObjectURL(imageBlob);

          // Update the content state with the image URL
          setContent([...content, imageUrl]);
          event.preventDefault();
        }
      }
    }
  };

<Editor value={comment} onChange={(e) => setComment(e.target.value)} containerProps={{ style: { minHeight: 150 } }} onPaste={handlePaste}/>