This is a migrated thread and some comments may be shown as answers.

Is it possible to remove an input upon successful upload?

4 Answers 84 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
LeBear
Top achievements
Rank 1
LeBear asked on 19 Feb 2013, 10:16 PM
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!

4 Answers, 1 is accepted

Sort by
0
Peter Filipov
Telerik team
answered on 22 Feb 2013, 12:02 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
LeBear
Top achievements
Rank 1
answered on 22 Feb 2013, 02:14 PM
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.
0
Peter Filipov
Telerik team
answered on 22 Feb 2013, 03:57 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
LeBear
Top achievements
Rank 1
answered on 22 Feb 2013, 04:09 PM
Thanks!
Tags
AsyncUpload
Asked by
LeBear
Top achievements
Rank 1
Answers by
Peter Filipov
Telerik team
LeBear
Top achievements
Rank 1
Share this question
or