Archived from the Transloadit support forum. Originally posted on January 22, 2014; details may be outdated, see our docs for current behavior. Original thread
So I recently noticed on our application that whenever a transloadit upload failed (with a filter rejecting a file type, for example), the file input was no longer reacting to changes. I later realised that this was caused by the fact that the transloadit jquery plugin clones the file input that is submitted, and this cloned input was triggering my ‘change’ event, but with an empty ‘files’ property.
Manually removing this input fixed that problem, but I still have another issue which I believe is related to these cloned elements which don’t seem to be removed after an upload failure. My remaining problem is that I can no longer resubmit the form (not even with a different file) after an upload has failed. Calling .submit() on the element has no effect at this point. I’ve noticed that there is also an additional form added to the DOM that remains after a failed upload. I suspect that it might be related to my issue, but removing it doesn’t help in this case.
I think that if I can revert my form to the way it was before calling $(element).transloadit() then I could start over from scratch and be able to submit again, but I can’t seem to unbind transloadit completely. I also tried using .unbind(‘submit.transloadit’) with no luck, so any help is appreciated. Thanks
The cancel function is invoked when the file upload is complete, that is true. So when you experience an error, clicking the cross will also trigger the cancel function which cleans up the clones. Could it be that you do not use the modal? I think in this case you could be right that the clones aren’t cleaned up properly.
Also, do you have this online somewhere so I could take a look?
Thanks for replying. Unfortunately no, I no longer have this online since I deployed a workaround (reloading the route with angular.js after an upload fails). We have a very specific use case in which we need our own progress bar, so we’re not really using any of transloadit’s UI elements, including the modal.
When I get a chance, I will try to call ‘cancel’ manually and see if that helps. Also, I figured out that the form wasn’t being submitted after an error because the original file input had its parent changed to the temporary form that transloadit was creating, so ‘transloadit.submit’ wouldn’t find any file inputs to upload on the original form anymore. I tried to put the input back on the original form with jquery, but this caused our angular events to be detached.
Anyway, our workaround of reloading the view is working well for us right now, and this could just be a side effect of our particular use case, but I thought this info might be useful to you guys in case there actually was a problem with cleanup in some cases.
yes, it’s definitely useful. It seems to be a real issue. I am adding to my TODO to look further into this and try to reproduce it with a custom UI without using the modal window.