File input disappears with jQuery File Upload

[bellkev]

I'm using jqm-angular-adapter and jQuery File Upload together, and as soon as the file is uploaded by jQuery File Upload, the input element disappears.

I found that it is related to the "replaceFileInput" option in jQuery File Upload, which is provided for some kind of iFrame transport compatibility purposes. By default, "replaceFileInput" is "true", but setting it to "false" works for me for now (probably at the cost of some kind of iframe browser compatibility that shouldn't matter for mobile anyway).

However, if you're interested, here is the replaceFileInput function in jQuery File Upload that causes the problem:

        _replaceFileInput: function (input) {
            var inputClone = input.clone(true);
            $('<form></form>').append(inputClone)[0].reset();
            // Detaching allows to insert the fileInput on another form
            // without loosing the file input value:
            input.after(inputClone).detach();
            // Avoid memory leaks with the detached file input:
            $.cleanData(input.unbind('remove'));
            // Replace the original file input element in the fileInput
            // elements set with the clone, which has been copied including
            // event handlers:
            this.options.fileInput = this.options.fileInput.map(function (i, el) {
                if (el === input[0]) {
                    return inputClone[0];
                }
                return el;
            });
            // If the widget has been initialized on the file input itself,
            // override this.element with the file input clone:
            if (input[0] === this.element[0]) {
                this.element = inputClone;
            }
        }

So it is supposed to detach and reattach the element, but somehow a jqm-angular-adapter process clashes with this and the element is completely removed.

[tbosch]

Hi, thanks for reporting. I think I already know the problem: The adapter overloads the .after function of jQuery and does some special things in some circumstances... So the input.after(inputClone).detach(); could trigger this.

Will investigate soon...

Thanks for reporting, haven't tested file inputs with the adapter before! Tobias

[tbosch]

Hi, this isn't reasy to implement, sorry. And as there seems to be a workaround, I choose not to support the jQuery Upload Plugin with the option replaceInput set to true. For older devices, you could use the normal jquery moble file input...

Thanks, Tobias