I have a scenario where am processing files completely via Ajax with a custom handler.  As a file is uploaded and processed on the server, it is referenced in another area/control on the page where it can be deleted or otherwise affected.  As such, I want to remove it from the collection of files shown.

I attempted to do this in the fileUploaded event.  I traverse the files array returned from getUploadedFiles, compare the file names, and if it's the same, call deleteFileInputAt.  Unfortunately, this isn't working.  (I'm testing with multiple files of various sizes so that they finish in a random order).  It appears that the array of files returned from getUploadedFiles only includes the actual files that have been completed, so when I attempt to use the index from that array, it doesn't match the index I need to pass to deleteFileInputAt.

In the fileUploaded event handler, I would like a definitive reference to the file related file input, and then have a mechanism to remove that specific input.

Is this possible?

Here's some background in case there's another better way to do this...

I have a list of "things" on a page.  I have a window that I can open that allows me to add a new thing, and optionally upload file attachments for the thing.  I also open the window so the user can edit existing things and manage the attached files.  I would like the mechanism for deleting the files to be the same regardless if this is a new thing or an existing thing.  My plan was to have a list of uploaded files with a delete button for each.  The user could then just click the delete button to delete any attachments.  In order to be consistent with existing things and new things, I wanted to add a file reference to the list of attached files as soon as the file completes uploading, and at the same time, remove the file from the list of files shown in the AsyncUpload control.  Again, is this possible?

Thanks!

Hello Bary,

Here is my suggestion. In case that you want to remove some of the files you could use  jQuery to find the
particular row with the searched name and trigger "click" on the remove button. The name of the file is situated in a span with the following class - ruUploadSuccess. Iterate through all of the span elements check their names and then get the remove button form the row (the span and the button are rendered in the same li element).

All the best,
Peter Filipov
the Telerik team

Thanks Peter,

Good idea, but got me thinking a bit more on options.

If the FileUploaded event, the eventArgs expose the same li element.  I simply do eventArgs.get_row().parentNode.removeChild(eventArgs.get_row());  It works like a charm.

It appears that the FileUploaded event only fires upon a successful upload, which I tested by throwing an error in the custom handler.

Am I missing anything that would make this fail?

Thanks.

Hi Bary,

I writing you to confirm that you could safely use the described approach. The event is fired only for successfully uploaded files.

Regards,
Peter Filipov
the Telerik team

Thanks!