Upload image directly to AWS S3 using pre-signed URL

[Glauber]

In an attempt to send the image directly to S3 with a signed url, I added the necessary attributes to the customFormData and the request is performed correctly. Two points prevent this functionality from being a success.

1 - The UploadFiles attribute of the formData where the file binary is sent, should be "file", AWS expects this attribute name.

2 - The order of the formData attributes is relevant, when AWS identifies the "file" attribute at the beginning, all other parameters are discarded. The "file" attribute must be added to the end of all added customFormData attributes.

[Vinitha Jeyakumar]

Hi Glauber,

Query 1. "The UploadFiles attribute of the formData where the file binary is sent, should be "file", AWS expects this attribute name."

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-s447ak-lazb9b?file=src%2Fapp.component.html,src%2Fapp.component.ts

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

Query 2. The order of the formData attributes is relevant, when AWS identifies the "file" attribute at the beginning, all other parameters are discarded. The "file" attribute must be added to the end of all added customFormData attributes"

Currently, we are checking with the possibilities, we will update you the further details on or before 13^th January 2023.

Regards,

Vinitha

[Glauber]

Hi Vinitha, 

any news?

Regards, 

Glauber

[Glauber]

Hello, any updates on this topic?

Regards, 

Glauber

[Buvana Sathasivam]

Hi Glauber,

We apologize for the delay in response. To change the order of the Form Data, you can use the following code in the ngOnInit method. This will override the uploadFilesRequest method at the source level.

 ngOnInit() {

    (Uploader as any).prototype.uploadFilesRequest = function (

      selectedFiles: FileInfo[],

      i: number,

      custom?: boolean

    ) {

      const cloneFiles: Blob[] = [];

      const chunkEnabled: boolean = this.checkChunkUpload();

      const ajax: Ajax = new Ajax(

        this.asyncSettings.saveUrl,

        'POST',

        true,

        null

      );

      ajax.emitError = false;

      let getFileData: FileInfo[];

      const eventArgs: UploadingEventArgs = {

        fileData: selectedFiles[i as number],

        customFormData: [],

        cancel: false,

      };

      const formData: FormData = new FormData();

      ajax.beforeSend = (e: BeforeSendEventArgs) => {

        eventArgs.currentRequest = ajax.httpRequest;

        this.trigger(

          'uploading',

          eventArgs,

          (eventArgs: UploadingEventArgs) => {

            /* istanbul ignore next */

            if (eventArgs.cancel) {

              this.eventCancelByArgs(e, eventArgs, selectedFiles[i as number]);

            }

            this.updateFormData(formData, eventArgs.customFormData);

            const name: string = this.element.getAttribute('name');

            formData.append(

              name,

              selectedFiles[i as number].rawFile,

              selectedFiles[i as number].name

            );

          }

        );

      };

      if (selectedFiles[i as number].statusCode === '1') {

        if (

          chunkEnabled &&

          selectedFiles[i as number].size > this.asyncSettings.chunkSize

        ) {

          this.chunkUpload(selectedFiles[i as number], custom, i);

        } else {

          ajax.onLoad = (e: Event): object => {

            if (eventArgs.cancel) {

              return {};

            } else {

              this.uploadComplete(e, selectedFiles[i as number], custom);

              return {};

            }

          };

          ajax.onUploadProgress = (e: Event): object => {

            if (eventArgs.cancel) {

              return {};

            } else {

              this.uploadInProgress(

                e,

                selectedFiles[i as number],

                custom,

                ajax

              );

              return {};

            }

          };

          /* istanbul ignore next */

          ajax.onError = (e: Event) => {

            this.uploadFailed(e, selectedFiles[i as number]);

            return {};

          };

          ajax.send(formData);

        }

      }

    };

  }

Please note that you should run the service provided in the link https://www.syncfusion.com/downloads/support/directtrac/general/ze/ImageUpload_RTE1737757220-1854469404 before running the sample code at https://stackblitz.com/edit/angular-tnzt6z?file=src%2Fapp.component.html,src%2Fapp.component.ts,package.json

Regards,

Buvana S

[Glauber]

Buvana, the presented solution worked.

Thanks.

[Vinothkumar Yuvaraj]

Hi Glauber,

We are happy to hear your problem has been solved. Please let us know if you have any further queries. 

Regards,

Vinothkumar