Modify the Default Kendo UI Upload Control for ASP.NET Core to handle multiple files

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.

Nonetheless, this proved to be more tedious to carryout than I thought. I had a ‘catch 22; case  eventuating: If you utilized async mode ( the mode calls server side functions upon either file upload or the removal of file.), I could get  preliminary files list to show, so when the user open the form, they could  easily spot which files they uploaded beofore, which is fantastically. But, that’s not exactly what I wanted, as in async mode, the files are added or removed when the user uploads or removes. So, I had to write somewhat  custom javascript, and basically ploy the upload control into trusting it was in async mode, but not uploading the files immediately, which I tried to get working with the ensuing code: 


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!


The CSS got rid of those ugly buttons!, Great but now, there’s still an enormous amount of javascript code to write, since I wanted the   images I uploaded previously to display as thumbnails, when the form loads before.

Without this extra code (that I will show you soon), the former files list will still populate, but in an inconvinient way without thumbnails. So, basically the idea is to ingeminate through all of the files added to the files property of the control itself, in javascript, recover the image and display it as a thumbnail, and then replace the existing default view in the files list. loadImages() is called on document.ready:


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.

That  basically is the same as the javascript code shown above, only that it is fired utilizing the onSelect event of the upload control. And, I included a Boolean flag to take care of removal of files, so that is returned back with the view model when form is submitted. The function is fired utilizing the onRemove event:


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:

  1. The user did nothing, so the File property is null, so you don’t have to do take any part.
  2. The user included a file, so the File property include the new file that was uploaded.
  3. 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:

  1. Auto population of View model with users uploaded file
  2. Initial Files list WITH Thumbnail Image Preview
  3. New file upload image preview generated as users add and remove files automatically
  4. 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!

Source code

Categories:

3 Responses

  1. Jonie says:

    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.

  2. Technology Advance says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *