I uploaded images to S3 from frontend using tinymce images_upload_handler function. It uploaded fine and showed a preview in the editor whereas when I tried the same except handling the image uploading to S3 from backend of my nextJs app, it is not showing any preview in the editor. I made sure the API call is successful, I see the complete response with correct image URL.
Frontend S3 Upload Response:
{
Bucket: "bucket-name"
Etag: "....."
Key: "image-name.png"
Location: "https://bucket-name.s3.amazonaws.com/image-name.png"
key: "image-name.png"
}
Backend S3 Upload Response:
{
Bucket: "bucket-name"
Etag: "....."
Key: "image-name.png"
Location: "https://bucket-name.s3.amazonaws.com/image-name.png"
ServerSideEncryption: "AES256"
key: "image-name.png"
}
One thing I observed is that uploading from frontend automatically fetches and displays image dimensions in the popup whereas it doesn't when I upload from backend. Below is my code:
<Editor apiKey={process.env.NEXT_PUBLIC_EDITOR_KEY}
init={{
selector: 'textarea#file-picker',
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
'emoticons',
'link',
'image',
],
toolbar: 'undo redo spellcheckdialog | blocks fontfamily fontsize | bold italic underline forecolor backcolor | image | align lineheight checklist bullist numlist | indent outdent | removeformat typography link emoticons',
fontsize_formats: '8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt',
statusbar: true,
menubar: true,
height: 500,
images_upload_handler: async (blobInfo) => {
return new Promise((resolve, reject) => {
handleImageUpload(blobInfo).then((response) => {
resolve(response?.Location);
}).catch((error) => {
reject(error);
});
});
},
}}
initialValue={ description }
onEditorChange={(newText) => setFieldValue('description', newText)}
/>
export default async function uploadHandler(req, res) {
try {
const fileName = req.headers['imagename'];
const params = {
Bucket: process.env.NEXT_PUBLIC_AWS_BUCKET_NAME,
Key: fileName,
Body: req.body,
};
const response = await s3.upload(params).promise();
res.status(200).send(response);
} catch (error) {
res.status(500).send(error);
}
}