Keep Upload/Retry Button on success or error

[Aaron]

For usability, I need the users to be able to re-upload a file multiple times without having to select it again.  For example, a user can upload a file that my controller parses and determines there are formatting or schema issues with it.  The user will open the local file, fix the issue, and then upload it again.  I'd like them to be able to press a retry or upload button again without having to click the Select button, browse through their list of files to find it, and pick it again.

Is there any way to do this?  I've tried to leverage the client side upload and success events, but I've not been able to figure it out.

I can use my own Upload button (using css to hide the built in one) if there is a way for me to tell the control to start the upload in javascript.  However, I don't know if the control will still have a handle on the file to upload after it has done it successfully once already.  Also, I am currently using Async mode (AutoUpload = false), but if there is a way to do it using Sync mode then I am open to trying it.

Any ideas?

Thanks.

[T. Tsonev]

Hello,

The reference to the selected file is preserved after successful upload. This makes re-uploading possible.

You can trigger the uploading by simulating a "retry" button click:
$(".k-file .k-icon").removeClass("k-delete").addClass("k-retry").click();

We're in the process of re-designing the Upload public API and we'll make sure there's a more convenient way to do this in the future.

I hope this helps.

Regards,
Tsvetomir Tsonev
Telerik

[T. Tsonev]

Hi,

Well, I spoke too soon. After some additional testing I can say that this approach only works reliably in Chrome.

Firefox caches the initially selected file and does not reflect the updates. I don't think it's possible to work around this.

We clear the IFRAME used for uploading in IE and re-uploading is not possible. This can be changed, but will potentially lead to memory leaks.

Regards,
Tsvetomir Tsonev
Telerik

[Aaron]

Thanks for the response.  I ended up doing a combination of workarounds that is similar to the path you discuss.  I am mostly concerned with Firefox and IE so I haven't tried it in Chrome yet. 

1) I set ShowFile List to false and use a disabled textbox that I set the value of on the select event.  The look of this just fit my page better and I don't have to worry about the retry button or the styles on the kendo upload file list.

2) I hide your upload button through CSS and have my own upload button that calls the same javascript function yours does.  This way the Upload button remains even after a file has been uploaded and can be clicked again.

3) To get Firefox to work, I remove the k-success and k-fail class from the file since it is checked to decide if the file should be uploaded or not.  I do this on the success and complete events in javascript.

4) To get IE to work, after the page renders I use override the _module.cleanupFrame function (only if it is defined) to an empty function.  As you mention, this may cause a memory leak, but this page only allows uploading one file at a time and users will not be uploading more than a few files per visit to the page so I am not too concerned with memory.  Perhaps there is a way to clear up the old frame when new file is selected so frames are not repeatedly created without ever being destroyed.

When you rework the API for this, if you can put some events/methods in that would make this easier and cleaner then that would be a big help. I don't think I would be the only one who could use something like this.  Is the redesign of the API for this control part of the next release?

Thanks!

[T. Tsonev]

Hello,

I recon 1-3 will be much easier to achieve with the upcoming support for templates.

We're not planning anything regarding the IFRAME cleanup. Overriding the prototype is likely to remain the only option for now. Please test your code before upgrading as might shuffle the module structure.

Regards,
Tsvetomir Tsonev
Telerik