Notice the .AutoUpload(false) statement. That causes the Upload control not to fire the SaveAttachment() and RemoveAttachment() server side methods. But, this creates another problem which is that you now have 2 big autogenerated buttons which then will allow the user to upload or remove the current file at a later time. I didn’t want this to happen, as I wanted to submit the entire form, along with the IFormFile object, which contains the file that user uploaded. So, I wrote some custom CSS to get rid of those ugly buttons!
Your view model would contain a base 64 string version of the actual file:
And, the file can be any form of a byte or stream. You simply convert that in your view model, in order to easily display it in the files list. So, once you have your base 64 version of the file, simply add an <img> tag with your actual file before the default telerik <span> tags and now you have thumbnails:
Now, the upload control renders correctly, and you have a nice image preview, which I think is a minimum for this scenario. Telerik doesn’t have an image preview option, so unfortunately that’s the only way to get it to work.
This will then conveniently be passed to the server side function on form submit, and you can simply create custom logic on the server to handle all 3 cases:
The user did nothing, so the File property is null, so you don’t have to do anything.
The user added a file, so the File property contains the new file that was uploaded.
The user removed a file by clicking the “x” beside the thumbnail so you check the PerformDelete flag, and delete the file if it is true:
Also, make sure to include your ‘dummy’ async methods, otherwise, the async functionality will simply not work, and you will be wondering why not:
Now, our Batch mode upload control is complete. It performs all the functions I wanted it to, including:
Initial Files list WITH Thumbnail Image Preview
Auto population of View model with users uploaded file
Batch mode operation, with file addition and deletion only occurring on form submit
New file upload image preview generated as users add and remove files automatically
Although, it took a bit of extra effort, than just dropping the Kendo Upload control on a form, I have exactly what I was looking for. I’m sure this will be a standard requirement for those working with images, versus the stripped down functionality of the basic upload only control. There are also many demos on the telerik site: https://demos.telerik.com/aspnet-core/upload/index, But, they all miss the mark in terms of Batch mode functionality. I’ve also included the source code on git hub so you can reuse all the code in your own projects!
Hi there! I just want to give an enormous thumbs up for the nice information you’ve got right here on this post. I might be coming back to your weblog for extra soon.
Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something. I think that you can do with some pics to drive the message home a little bit, but other than that, this is fantastic blog. A fantastic read. I will certainly be back.