Tinymce not previewing s3 uploaded image from server end

61 Views Asked by At

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);
  }
}
0

There are 0 best solutions below