tinymce
images_upload_handler: Only works if I pass image URL to progress() function
I have "@tinymce/tinymce-react": "^6.0.0" isntalled in my React/Vite app.
I am trying to implement the images_upload_handler for the first time. I have it working so that the file is uploading and the server is returning the uploaded image's URL.
The problem is that after I call resolve(data.toString()), nothing changes on the UI. The UI continues spinning as if it is still uploading the image.
The only way I have been able to get this to work is by passing the image's URL to the progress() function (ex: progress(data.toString())). If I do that, the UI behaves as expected and updates the Insert/Edit Image modal with the image URL in the "Source" field. This doesn't seem like the correct behaviour.
Would you please review the code below and let me know if I am doing something wrong?
Thank you!
<Editor
init={{
height: height || 250,
plugins: plugins || [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
fullPage ? 'fullpage' : ''
],
toolbar: toolbar || etc...
...disableContainingPTags ? {
mode: 'textareas',
force_br_newlines: false,
force_p_newlines: false,
forced_root_block: '',
} : {},
images_upload_handler: async (blobInfo, progress) => new Promise(async (resolve, reject) => {
const formData = new FormData();
formData.append('File', blobInfo.blob(), blobInfo.filename());
try {
const {data} = await FilesApi.apiFilesPost(formData.get('File') as File) // Use the api to upload the image
if (data) {
console.log('Image uploaded successfully:', data);
resolve(data.toString()); // Pass the image URL back to TinyMCE
//progress(data.toString()) // Uncommenting this will cause the UI to update correctly.
} else {
reject({
message: 'Image upload failed. Response was empty.',
remove: true // Remove the image from the editor if upload fails
});
}
} catch (error) {
reject({
message: 'Image upload failed',
remove: true // Remove the image from the editor if upload fails
});
}
}),
}}
onEditorChange={helpers.setValue}
value={field.value}
disabled={disabled}
/>
@todb-mif hi, am meet same problem, Is your problem solved?
My env:
- "@tinymce/tinymce-react": "5.1.1"
- reactjs 18.x
TinyMCE 5 uses a callback-based api for image_upload_handler, not a Promise-based one. https://www.tiny.cloud/docs/tinymce/5/local-upload/ You should upgrade to TinyMCE 6 or adjust your code to use the callbacks provided.
@carlosmintfan Thanks for responding. This is good to know. We ended up using the Beefree email builder SDK instead of TinyMCE to solve this problem, but we will keep this in mind for other areas where we are still using TinyMCE.
