Auto aupload file and rename it on server side.

[Karol Statek]

Hi,

In my scenario I would like to upload file using UploaderComponent into server, rename it on server side and send a response do React app with new  (changed) name file to UploaderComponent.

I have tried to do that but in my case in every Uploader API Event I received my previous file name (which i selected to upload). Backend has changed file name and this new name is attached in body response.

Is it possible to do that?

[Priyanka Karthikeyan]

Hi Karol Statek,

You can rename the files using the "selected" event, as demonstrated below. Subsequently, you'll be able to retrieve the modified file name using args.fileData.name within the scope of the "uploading" event. For further clarity, we have attached a sample for your reference. 

 onsuccess(args) {

    console.log(args);

  }

  onSelect(args) {

    args.filesData[0].name = 'custom_name';

  }

  onfileSelect(args) {

    debugger;

    console.log(args.fileData.name);

    var accessToken = 'Basic test123';

    args.customFormData = [{ name: 'Custom response Name' }];

  }

  render() {

    return (

           <UploaderComponent

                id="UploadFiles"

                name="UploadFiles"

                type="file"

                ref={(scope) => {

                  this.uploadObj = scope;

                }}

                asyncSettings={this.asyncSettings}

                removing={this.onRemoveFile.bind(this)}

                selected={this.onSelect.bind(this)}

                uploading={this.onfileSelect.bind(this)}

                success={this.onsuccess.bind(this)}

             ></UploaderComponent>

Sample: https://stackblitz.com/edit/react-hx7uhh-wuiwng?file=index.js

 

Documentation: https://ej2.syncfusion.com/react/documentation/api/uploader/#selected

https://ej2.syncfusion.com/react/documentation/api/uploader/#uploading

 

Regards,

Priyanka K