Uploading images with TinyMCE does not replace the src attribute inside the image tag

[aiphton]

📝 Provide detailed reproduction steps (if any)

I'm trying to upload images from my React frontend to my Laravel backend using TinyMCE the image plugin that is provided from TinyMCE. My backend and frontend are glued together with inertiajs. The upload process works fine and saves the image, but when I try to save the form with the image inside of the TinyMCE Editor I get an error. This error comes from my backend where I first validate the request and then allow it to be processed. This request fails because the image gets omitted as a base64 string inside of the src attribute inside of the <img> tag and the resulting string exceeds my max limit of 65535 characters. Now strangely after that first unsuccessful attempt the src attribute wihtin the <img> tag has been replaced successfully with the location string from my backend and I now can save the form without a problem.

I will also provide my a snippet of my current TinyMCE setup. My current implementation is that the image is first added locally as a blob and then uploaded to the server when the user saves the form. After that, TinyMCE should automatically replace the src attribute with the appropriate location string.

My current implementation is as follows

 const submit = (e) => {
    e.preventDefault()

    editorRef.current.uploadImages().then((uploadResults) => {
      if (!memory) {
        post(route('memory'), {
          onSuccess: handleSuccess,
          onError: (errors) => {
            console.error(Object.values(errors))
            handleError()
          }
        })
      } else {
        post(route('memory.update', { slug: memory.slug }), {
          onSuccess: handleSuccess,
          onError: (errors) => {
            console.error(errors)
            handleError()
          }
        })
      }
    })
  }

const handleSuccess = () => {
    toast({
      title: <Check className="text-blue-500"/>,
      description: !memory
        ? t('apiResponse.success.add')
        : t('apiResponse.success.text'),
    })
  }

  const handleError = () => {
    toast({
      title: t('apiResponse.error.title')
    })
  }

Is there something wrong with how I'm handling the Promise?

I am grateful for anyone's efforts to point me in the right direction. I have spent hours trying to fix this problem. I just can't seem to get behind it. If you need additional context, please ask. I'm more than happy to provide it.

I have already tried setting the state of body manually and replacing the base64 string with the url from the promise result

async function uploadImages() {
  const results = await editorRef.current.uploadImages();
  const body= data.body; // Create a copy of the state

  for (const result of results) {
    if (result.status === true) {
      const imageUrl = result.uploadUri;
      updatedBody = updatedBody.replace(result.blobInfo.base64(), imageUrl);
    }
  }

  setData('body', updatedBody);
  return results.map(result => result.status === true);
}

and then using it like this:

const submit = async (e) => {
  e.preventDefault();

  try {
    const uploadResults = await uploadImages();

    if (uploadResults.every(value => value)) {
      if (typeof memory === 'undefined') {
        post(route('memory'), { onSuccess: handleSuccess });
      } else {
        patch(route('memory.update', { slug: memory.slug }), { onSuccess: handleSuccess });
      }
    } else {
      toast({ title: t('apiResponse.error.title') });
    }
  } catch (error) {
    console.error('Error during image uploads:', error);
  }
};

Here is my TinyMCE implementation:

<Editor
  init={{
    file_picker_types: 'image',
    relative_urls: false,
    remove_script_host: false,
    document_base_url: '../',
    images_upload_handler: handleImageUpload,
    images_upload_url: route('file.store'),
    automatic_uploads: false,
  }}
/>

const handleImageUpload = (blobInfo, progress) => new Promise((resolve, reject) => {
    const formData = new FormData()
    formData.append('file', blobInfo.blob())

    axios.post(route('file.store'), formData, {
      onUploadProgress: ({loaded, total}) => {
        progress(Math.round((loaded * 100) / total))
      },
      withXSRFToken: true,
    }).then((response) => {
      const { location } = response.data
      resolve(location)
    }).catch((error) => {
      console.error('Error:', error)
      reject(error.response.data.location)
    })
  })

✔️ Expected result

The src attribute gets replaced before the form is submitted.

❌ Actual result

The form gets omitted with the blob URI still in the src attribute.

📃 Other details

• Browser: Opera GX
• OS: Windows 10

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[aiphton]

Upon debugging, I discovered that the onEditorChange function isn't triggered after invoking uploadImages(). Despite implementing a method to update the body state, the body remains unchanged.

Here's how I integrate TinyMCE as a component in my form:

<TinyEditorComponent
  onInit={(evt, editor) => (editorRef.current = editor)}
  init={{
    content_style: 'body { font-size:14px };',
    height: '100vh',
  }}
  onEditorChange={onEditorChange}
  initialValue={text}
/>

Here, the text value in the initialValue prop is simply a state derived from data retrieved from the database.

And here's the method I've implemented:

const onEditorChange = (newContent) => {
  setData('body', newContent);
  console.log("Body changed:", newContent);
};

This method simply updates the state of the body, which is later sent via the request. Note that I'm using the setData function from the InertiaJS userForm hook, but I've also experimented with a conventional useState hook from React with the same outcome: the state data isn't updated.

Additionally, I have to manually invoke the onEditorChange method because TinyMCE doesn't trigger it automatically after uploadImages() completes. So, the submission process looks something like this:

const submit = (e) => {
  e.preventDefault();

  editorRef.current.uploadImages().then((uploadResults) => {
    const updatedContent = editorRef.current.getContent();
    onEditorChange(updatedContent);
  }).then(() => {
    // Additional actions after image upload
  });
};

[aiphton]

I resolved the issue through sending the updatedContent immediatly with the help of the interiaJS router and not depending on the state of data.body state.

[TheSpyder]

Apologies, this should've been moved to our React integration. Not updating the state after image upload might be a bug, so I'm reopening it and moving it over.

[aiphton]

If you need any more details or informations feel free to ask.

[danoaky-tiny]

Internal ref: INT-3289