Kendo upload with image editor

Hello, Tomasz,

This can be done when the component is in a controlled state:

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

This allows full control over the files when they are added, uploaded or have any progress when uploading.

Also the "getRawFile" method can be used to obtain the add file during the events:

https://www.telerik.com/kendo-react-ui-develop/components/upload/api/UploadFileInfo/#toc-getrawfile

I hope that this will allow achieving the desired result.

Regards,
Stefan
Progress Telerik

Yes,

this is correct, however onAdd event is triggered when i select the file from file browser. 
As a user I would like to do the following:

1. Fill in form with all relevant data

2. Select and edit image files.

3. Submit form

Unfortunately I couldn't find a way to modify already selected file.

Here is some example:
https://stackblitz.com/edit/react-ts-lwsyc2

Hello, Tomasz,

Thank you for the example.

I can see that after the editing, the image is stored as image/data base64 string.

In this case I can suggest checking both threads that advise how to upload this type of data in a form:

https://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata

https://stackoverflow.com/questions/15675063/how-to-create-an-image-file-on-server-from-dataurl

In this case, as the form data will be uploaded programmatically, there is no need to set the file back to the Upload, as the Upload will only be used to get the files and list them.

Regards,
Stefan
Progress Telerik

Hello Stefan,

thank you for your quick response - will go through that links. Yes, we store images in base64 string as user may want to edit image multiple times before he submits the form.

Beside this we are going to send images as base64 string in request body.
So, seems that in this case Kendo Upload control will create additional boilerplate with not so many benefits and it's better to follow up with custom component based on this: MDN - Working with files. 

Regards

Hello, Tomasz,

Thank you for the feedback.

If an a later state you decide to work with the Upload and have additional question I will be happy to assist.

Regards,
Stefan
Progress Telerik