I initially utilized the upload control for a simple upload only control on a form. And, that’s really what it is designated for.
Nonetheless, I wanted it to operate in a sort of ‘Batch Mode’. What I was trying to affirm by that is to just upload the files to the web internet browser itself, and not just automatically post the files exactly back to the server when user uploads a file. And, to worsen it all I didn’t want the file to be removed immediately when they remove a file from the list of uploaded files either.
Have a look at .AutoUpload(false) statement. You should notice That prompts the Upload control not to fire the SaveAttachment() and RemoveAttachment() server side methods. Nevertheless, this creates another huge blow which is that you now have two big autogenerated buttons which will now allow the user to upload or delete the current file at the long run. This happening is a huge blow, as what I had in mind was to submit the whole form, together with the IFormFile object, which contains the file that the user uploaded.
So, I put down some custom Cascading Style Sheet (CSS) to remove those ugly buttons!
Your view model should contain a base 64 string version of the real file:
Bear in mind that the file can be any form of a byte or stream. You basically convert that in your view model, in order to simply display it in the files list. So, the moment you have your base 64 version of the file, simply include an <img> tag with your real file before including the default telerik <span> tags and now you have the thumbnails:
Now, the upload control renders perfectly, and you have an awesome image preview, personally I think this is a minimum for this scenario. Their is no image preview option in Telerik , so unluckily that’s the only way you can let it work.
Now, we still have the problem of creating the logic to take care of the new file uploads, and output the image previews in the file list properly.
This will then easily be returned to the server side function when the form is submitted, and you can easily create custom logic on the server to take care of all the three cases:
The user did nothing, so the File property is null, so you don’t have to do take any part.
The user included a file, so the File property include the new file that was uploaded.
The user deleted a file by clicking the “x” button beside the thumbnail so you check the PerformDelete flag, and delete the file if statement is true:
Furthermore, be sure to add your ‘dummy’ async methods, if this is not done, the async functionality will simply not work, and you will be kept wondering:
Now, our Batch mode upload control is accomplished. It executes all the functions I wanted it to, which include:
Auto population of View model with users uploaded file
- Initial Files list WITH Thumbnail Image Preview
New file upload image preview generated as users add and remove files automatically
- Batch mode operation, with file addition and deletion only occurring on form submit
Even though, it took a tad of extra effort, than mere dropping the Kendo Upload control on a form, the I achieve my aim i.e. 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 plenty demos on the official telerik site , I don’t like the fact that they all miss the mark in terms of Batch mode functionality. I’ve also added the source code on git hub so you can reuse all of the code for your own personal projects!