Telerik blogs

File API and Drag and Drop

RadAsyncUpload has undergone significant changes since it's initial release back in Q1 2010. With the advent of the HTML 5 FileAPI and the updates to the XMLHttpRequest object, it is now easier than ever to utilize AJAX mechanisms when uploading files, a practice that was hardly possible prior to that. As you may have expected, RadAsyncUpload is not lagging behind these concepts and since Q2 2011 it utilizes a FileAPI module, which is now the default one under FireFox 4.0+, Safari 5+ and Google Chrome and will be used by default in the upcoming IE10.

The File API module provides all functionalities provided by the other modules (multiple selection, client-side size validation, extension validation) plus support for drag and drop! Yes, forth from Q3, RadAsyncUpload supports uploading files as easy as dragging and dropping them over the upload:

drag and drop 

You can check out the drag and drop demo here

Persisting Uploaded Files

A common problem that our customers encounter is when there are multiple controls on the page that can trigger a postback (say RadComboBox) and RadAsyncUpload placed before that controls. Then, any files uploaded will be processed on the server as soon as one of one of the combos do a postback. As one may expect, this is not always the desired behavior. Here is one example: Imagine, that we are filling a form. Only after all the validation has passed the server should process the selected files. Unfortunately, this was hardly possible with RadAsyncUpload, because the files were processed as soon as a postback occur.

Well, this is not a problem any more! Forth from Q2 2011, RadAsyncUpload utilizes the PostbackTriggers property, that accepts, as one may suggest, a list of IDs that upon postback should trigger the server-side files processing. A typical use case scenario is to set the ID of your Submit button as a postback trigger ID. More details can be found in this demo

Additional Fields

Adding the RadUpload's additional fields functionality to RadAsyncUpload is a long time requested feature. Well, I am happy to anounce that the wait is over and from Q3 2011 it is possible to use additional fields in pretty much the same manner as with RadUpload. You can check out the following demo for details.

RadAsyncUpload Layout

Having an option to chose whether the uploaded files appear below or above the file input is another feature that is highly requested. Until now, all uploaded files were displayed above the file input and it was not possible to change this behavior. The good news are that we have listened to your feedback and it is now possible (Q3 2011) to chose whether the files should appear, below or above the input. You can use the UploadedFilesRendering property to do that.

UploadedFilesRendering="BelowFileInput"

upload-layout 

We hope that you would enjoy these new features. As always, we are open to any feedback and criticism. :)


Genady-Sergeev
About the Author

Genady Sergeev

is a Senior Manager in the Progress Web UI & Tools division, which develops the Kendo UI, UI for ASP.NET MVC and UI for ASP.NET AJAX products. He joined the company back in 2009 and since then he has been involved with the web UI products on a variety of levels, from a single contributor to a senior manager. Genady's main interests are in the field of client-side development and he is a big fan of the DevOps philosophy. In his free time he likes skiing and cross-country cycling.

Comments

Comments are disabled in preview mode.