Change filename before upload

[Jeswin Raj]

Hi - how do I change the source filename to a different name before uploading the file? Let me know. Thanks.

[Deepak Ramakrishnan]

Hi Jeswin, 

 

Greetings from Syncfusion support. 

We have validated and  created a sample as per  your requirement . We can get the file information while selecting the file by using ‘selected’ event . Please find the below highlighted for your reference. 

 

[App.component.html] 

<ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' [dropArea]='dropElement' (selected)='onFileSelect($event)' ></ejs-uploader>  

 

 

 

[App.component.ts] 

public onFileSelect: EmitType<Object> = (args: any) => {  

    args.filesData[0].name = 'modified-'+args.filesData[0].name;  

  } 

 

 

 

Sample Link : https://stackblitz.com/edit/angular-1pfsyx-gc2qnp?file=app.component.ts 

 

 

Thanks, 

Deepak R. 

[Jeswin Raj]

Hi Deepak - thanks for the reply. Is it possible for the user to change it using the interface than changing it in the code-behind? For example, the user does a browse and selects a file called filename-001.jpg but the user wants the file to be called sarasota-vacation-1.jpg. Will it be possible to have a provision for the user to edit and change the filename before uploading it? Let me know. Thanks.

[Deepak Ramakrishnan]

Hi Jeswin, 

 

Thanks for your update. 

 

We have validated your requirement and we will update the possibilities on or before 2^nd , August 2021 .We appreciate your patience until then. 

 

Thanks, 

Deepak R. 

[Deepak Ramakrishnan]

Hi Jeswin, 

 

 

Sorry for the inconvenience caused.

 

We are still working on your requirement. We will update the further details on or before 4^rd,August 2021.Until then We appreciate your patience . 

 

 

Regards, 

Deepak R. 

 

[Deepak Ramakrishnan]

Hi Jeswin, 

 

Thanks for the patience. 

 

We have analysed your requirement and created a custom sample based on your query. Kindly refer the below sample link for your reference.

Steps to achieve the required scenario :  

1.     On file select event we have restricted the rendering of file list using ‘showFileList’ property and given prompt with file name. 

2.     After editing , while clicking the ‘Apply’ button in prompt , We have created the file list using ‘createFileList’ method and uploaded the file manually using ‘upload’ method 

 

public onFileSelect: EmitType<Object> 

        = (args: any) => { 

        this.uploadObj.showFileList = false; 

        this.promptDialog.show(); 

        this.originalFileName = args.filesData[0].name; 

        this.filename.value = args.filesData[0].name; 

        this.eventArgs = args.filesData; 

        } 

 

        public promptDlgBtnClick = (): void => { 

 

        this.eventArgs[0].name = this.filename.value; 

        this.uploadObj.createFileList(this.eventArgs); 

        this.uploadObj.showFileList = true; 

        this.promptDialog.hide(); 

        this.uploadObj.upload(this.uploadObj.getFilesData()); 

 

        } 

 

        public promptCancelClick = (): void => { 

        this.promptDialog.hide(); 

        } 

 

 

Sample Link : https://stackblitz.com/edit/angular-1pfsyx-ms6yxq?file=app.component.ts

Thanks, 

Deepak R. 

[Jeswin Raj]

Hi Deepak - thanks a lot for the sample code. Would it be possible to send me a sample for updating multiple filenames during a bulk upload? Thanks.

[Deepak Ramakrishnan]

Hi Jeswin, 

 

Thanks for the update. 

 

We are currently working on your requirement . We will update the further possibilities on or before 24^th , September 2021. We appreciate your patience until then. 

 

Thanks, 

Deepak R. 

 

[Deepak Ramakrishnan]

Hi Jeswin,  

  

Thanks for the patience.  

  

We are currently working on your requirement  by rendering the input dynamically with selected file names and trying to change while updating all the files . We will update the further possibilities on or before 29^th , September 2021. We appreciate your patience until then.  

  

Thanks,  

Deepak R.