Workaround for File Input on Rails Remote Forms

Recently, I worked on a project which included a form that was being submitted remotely using jQuery-Rails. The main problem was that the form needed to have a file input on it and jQuery-Rails won’t work if you have one. Now, there are workarounds that work if you need to actually keep the file input. In my case, I was processing the file with JavaScript and then just submitting the parsed data, so the file input wasn’t really needed.

Okay, so there are two different ways you can try to solve this problem:

The first solution is to change the input type before you submit and then change it back after you get the response back. The main advantage of this solution is that any functions bound to that input will work when we change it back. The main disadvantage of this solution is that it won’t work in all browsers, so unless you’re only using Firefox, this solution won’t work.

The second solution is to remove the entire file input and then add it back after the response. The main advantage of this solution is that it will work in all browsers. The main disadvantage of this solution is that you’ll have to rebind any functions previously bound to the input.

Below, I’ve summed up the advantages and disadvantages of each solution:

Advantages and Disadvantages
Advantages Disadvantages
Changing Input File Type Bound function will continue to work when input file is changed back. Won’t work in all browsers.
Removing Input File Will work in all browsers. Must rebind functions after input file is added back.

Leave a Reply

Your email address will not be published. Required fields are marked *