Image Upload Buffer

[Gabriel]

Hi,

I'm trying to upload images to server.

The request works well, but the body are buffered.

What can i do to get real data from body buffered?

I tried Buffer.from(req.body, 'utf8'), but it wrong converts the image.

"Input buffer contains unsupported image format"

Angular 14.

"@syncfusion/ej2-angular-richtexteditor": "^20.3.47",

"@syncfusion/ej2-locale": "^20.3.47",

"@syncfusion/ej2-richtexteditor": "^20.3.47",

Insert Image Settings:

Front Events:

Backend:

"parse-multipart": "^1.0.4",

newBuffer = image buffer

"Input buffer contains unsupported image format"

[Vinitha Jeyakumar]

Hi Gabriel,

Can you please share us with some more details about your reported issue for our better understanding,

• Your exact use case scenario.
• What is the data you are trying to get using buffer?
• Video illustration.
• If possible, please share with us the issue reproducing runnable sample.

Regards,

Vinitha

[Gabriel]

Hello Vinitha,

sorry for my english.

I'm using rich text editor in my web aplication. I need to save the image in our AWS server and replace the generated URL on HTML text, making HTML size smaller.

The HTML will be use in our FAQ texts.

So i configured the saveUrl​ passing the backend save route:

Before upload the image, we check size and set on currentRequest the authorization to execute saveUrl.

In backend, i need to process the image, getting the buffer from rich text save url request and converting to WEBP, using the module "sharp".

So, first, we're using "parse-multipart" module to parse the request body.

After getting the parts, we convert the image, using the "sharp" module, to WEBP image.

After upload imagem success, replace URL generated in HTML text:

Running localy, front-end and back-end, works well, using latin1 to get buffer data.

I'm from Brazil, by the way.

But running in production, server at USA/Miami, lambda AWS, we get this error from sharp converter:

"Input buffer contains unsupported image format"

So how we convert the body buffered from request and get real and correct image data buffer?

[Vinitha Jeyakumar]

Hi Gabriel,

We suspect that the reported issue occurrs while converting the image, using the "sharp" module, to WEBP image. please refer to the below general blogs for your reference,

https://stackoverflow.com/questions/63350001/sharp-error-input-buffer-contains-unsupported-image-format

https://stackoverflow.com/questions/64120977/input-buffer-contains-unsupported-image-format

Regards,

Vinitha

[Gabriel]

Hi Vinitha,

We don't know what encoding is needed to get buffer data from req.body sent by syncfusion rich text editor save image.

​The problem isn't sharp module.

Using latin1 at Buffer.from works well running localy in my computer, front-end and back-end

But running our aplication at aws lambda, latin1 don't work.

Which encoding are necessary to get correct buffer data from req.body?

[Vinitha Jeyakumar]

Hi Gabriel,

If you want to add additional data on image upload, which is used to get in the server-side. By using the imageUploading
event and its customFormData argument, you can achieve this behavior. Refer to the following code snippet,

Code Snippet:

<ejs-richtexteditor id="defaultRTE" [insertImageSettings]="insertImageSettings" (imageUploading)="onImageSelected($event)"> 

</ejs-richtexteditor> 

public onImageSelected(args: any): void { 

  // Setting Authorization Header 

  args.currentRequest.setRequestHeader( 

    "Authorization", 

    "Bearer ${token key to be passed}" 

  ); 

  // You can also add additional parameters as key-value pair 

  args.customFormData = [{ name: "Syncfusion INC" }]; 

} 

Please let us know if you have any concerns,

Regards,

Vinitha

[Gabriel]

Hi Vinitha,

It's possible change UploadFiles parameter to name File?

Because it is compatible with s3.

And, one more thing. Its possible get file data, base64 information, before send in request?

[Vinitha Jeyakumar]

Hi Gabriel,

Your requirement to change the UploadFiles name attribute to File can be achieved by using the dialogOpen event of the RichTextEditor,

Code snippet:

<ejs-richtexteditor

    id="defaultRTE"

    (dialogOpen)="dialogOpen($event)"

  >

  </ejs-richtexteditor>

 public dialogOpen() {

    (document.getElementsByClassName('e-uploader')[0] as any).name = 'file';

  }

Sample: https://stackblitz.com/edit/angular-kmypul?file=src%2Fapp.component.html

API Link: https://helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/#dialogopen

Query "Its possible get file data, base64 information, before send in request?"

You can get image data using the arguments of the imageUploading event of Rich Text Editor control.

API Link: https://helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/#imageuploading

Regards,

Vinitha