This is a migrated thread and some comments may be shown as answers.

Rename file before upload

7 Answers 2518 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Jonathan asked on 06 Dec 2019, 05:53 PM

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!

7 Answers, 1 is accepted

Sort by
0
Jonathan
Top achievements
Rank 1
answered on 09 Dec 2019, 06:00 PM
I thought I should mention -- I'm using the Kendo React Uploader.
0
Stefan
Telerik team
answered on 10 Dec 2019, 07:09 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Nilton
Top achievements
Rank 1
Iron
answered on 03 Jun 2020, 02:44 AM

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"
}

```

0
Stefan
Telerik team
answered on 03 Jun 2020, 01:29 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Talin
Top achievements
Rank 1
answered on 08 Feb 2021, 11:19 PM
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.
0
Stefan
Telerik team
answered on 09 Feb 2021, 06:17 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Talin
Top achievements
Rank 1
answered on 09 Feb 2021, 07:45 PM
Upgraded from 3.11.0 to 3.18.0. Works perfectly! Problem resolved. Thank you!
Tags
General Discussions
Asked by
Jonathan
Top achievements
Rank 1
Answers by
Jonathan
Top achievements
Rank 1
Stefan
Telerik team
Nilton
Top achievements
Rank 1
Iron
Talin
Top achievements
Rank 1
Share this question
or