Vue.js, jQuery & IE9

Regular readers of our blog might know that our development team has been digging into an emerging Javascript framework named Vue.js. Vue is similar to React and shares many of its features, such as single file components. However, you don’t need to know the complex build system that comes with React to get started. Plus, Vue gives you the added bonus of two way data binding. Win, win, win.

We recently used Vue for the first time in a production setting and ran into a problem that we had not had to solve before: user uploaded files. On top of needing to store uploaded images, another requirement of the project was that it had to work in IE9. Simple enough requirements when taken individually, but more difficult together.

Our first thought was to try and leverage an existing Vue extension to handle the uploads. After struggling for a while with an external library that was built for a vastly different environment, we decided to roll our own solution. This ended up being a dead end too, with our main problem being setting the proper content headers across different file types and browser variations.

As the title implies, our final solution leveraged jQuery and FineUploader. FineUploader is a 100% dependency free JavaScript library that also supports IE all the way down to version 8.

A few issues we had to solve:

1. The name of the uploaded file is generated using other components of a larger form that the file uploader is attached to. Sometimes those elements have not been saved yet, so there is no way to access them within the scope of the FileUploader object to generate the proper filename.
2. This particular page included multiple forms generated from a v-for loop, each one containing a FineUploader. We didn’t want to initialize these all at once for performance reasons, but just when we needed them.
3. Inside an AJAX response your scope is limited to the response.

How we solved them

By default, FineUploader attempts to save the file immediately upon uploading. Luckily they make it extremely easy to defer the save until you trigger it manually through the API. That solved one issue quite simply. We just waited until the whole form was ready to save and initialized the uploader afterward.

We still did not have access to the scope of the Vue components within the instance of FineUploader. Thus, we couldn’t set the name of the file. This meant we would need to do that with FileUploader’s API before we could persist the file. As stated before, we needed other data from the Vue component to set the filename. The best place to do this is in the success callback of the API save of the question. However, within the AJAX response you do not have access to the FileUploader object either. The response is scoped to the Vue instance.

This was a sticking point for quite a while. Both issues meant that we didn’t have access to the data we needed in one way or the other. The solution proved to be simple (or, at least it seemed that way after much banging of the head against the desk).

First, upon the initialization of our Vue instance we created an empty object to serve as the mount point of FineUploader.

Next, we handled the initialization problem. The FineUploader instance was only instantiated by a click event within the larger form. This readied the FineUploader for action without the performance hit of instantiating instances not in use.

The initialization of the FineUploader did not happen until all the data for the form had loaded. This way we could scope the FineUploader instance to a specific form. This allowed us to store the variables we needed for the filename into FineUploader. Which went part of the way to solving problem 1.

The final bit of data we needed for the filename of the uploaded image is only available after the API response (the new ID for the created instance). The problem now was the lack of access to the Vue instance in the AJAX response.

Finally, the last issue was solved by setting the context option in the AJAX request to the FineUploader object. Setting the context option allowed us access to the FineUploader object via the this variable in Javascript. Now we have all the data we need to generate the proper filename for the uploaded image. We also have access to the all the proper Javascript components to save everything.

Final Product

In the end we achieved all the business requirements of the project. We did not have to sacrifice any of the features of a Javascript uploader such as an image preview, upload progress, etc. The client was happy, we learned more about our tools, and no very few heads were damaging during the desk banging. Another win, win, win.