Rename file before upload

[Jonathan]

I need to be able to rename a file before uploading (for example, to strip bad characters).  Simply renaming the file in any of the events doesn't work -- once it hits the actual upload mechanism, the filename goes back to the original name.

Thanks for any assistance!

[Jonathan]

I thought I should mention -- I'm using the Kendo React Uploader.

[Stefan]

Hello, Jonathan,

I was able to change the name using the onAdd event:

https://stackblitz.com/edit/react-hajozj?file=app/main.jsx

Please have in mind that the Upload has to be in controlled mode, as this will allow the developer to have full control over the uploaded files:

https://www.telerik.com/kendo-react-ui/components/upload/modes/#toc-controlled-mode

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Nilton]

I am with the same issue here.

 

Using the change proposed by @Stefan on the `onAdd` event can fix for what we see.

 

But this approach doesn't rename the files sent to the backend after clicking on the Upload button.

Do you know how to handle this?

 

Please take a look on the below message...

It is log response from the API request on backend.

 

```

Processing by Api::V1::RequestsController#upload_photo as JSON
Parameters: 
{
  "uuid"=>"b074af81-3ef9-477c-8642-b75807d8e7ca", 
  "picture"=>#<ActionDispatch::Http::UploadedFile:0x00007fa1bd879270 @tempfile=#<Tempfile:/var/folders/1w/xmvzf1vx20x73xc3c5nb2wv40000gn/T/RackMultipart20200602-99071-bngk60.png>, @original_filename="image.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"picture\"; filename=\"image.png\"\r\nContent-Type: image/png\r\n">,
  "id"=>"123165"
}

```

[Stefan]

Hello, Nilton,

Indeed with the current version and name that will be set will be only visible in the upload list.

If we need to change it in the  data that will be sent to the server, the change has to be made on the onBeforeUpload event:

onBeforeUpload = event => {
      event.files[0].name = 'customName.jpg';
  }

As this requires modifications to the source code as well to apply it to the actual file, we made a pull request with the change.

The new functionality is expected to be in the dev version tomorrow.

Regards,
Stefan
Progress Telerik

[Talin]

Did this new functionality (modifying the original filename as it is passed to the server) end up making it into the released code? I'm still having trouble getting a transformed file name from our client to our api by way of any of the existing Uploader events.

[Stefan]

Hello, Talin,

This has been added in version 3.15.0:

https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/#768ebfec-180e-57de-8d85-9589ff4cf16b

`upload: file name from state is not applied to form data during upload`

If the issue still occurs, please share an example reproducing the issue and I will be happy to inspect it locally,

Regards,
Stefan
Progress Telerik

[Talin]

Upgraded from 3.11.0 to 3.18.0. Works perfectly! Problem resolved. Thank you!