I'm trying to find a way to upload large files without having to read them all into memory. I need to be able to post multiple files along with a data payload in a single request. I'm able to accomplish it with standard HTML inputs, something like this:
<input id="myFile1" type="file" />
<input id="myFile2" type="file" />
<input id="myData" type="text" />
And javascript code like this:
var file1 = document.getElementById('myFile1').files[0];
var file2 = document.getElementById('myFile2').files[0];
var data = document.getElementById('myData').value;
var formData = new FormData();
formData.append('myFile1', file1, file1.name);
formData.append('myFile2', file2, file2.name);
formData.append('myData', data);
Even when selecting a large file this is very fast. Keep in mind I'm only referring to the client side performance, as the actual upload portion is going to be bottlenecked by the users network speed.
So now comes my problem: I need to use the Ionic camera plugin to allow a user to either record video or select video files on their phone. But when a user picks a file, you aren't immediately given a File object to work with; a user picks a file, then you are given a file URL and have to convert that into a Blob in order to post it to a server. However, as you can see from this stackoverflow answer, you have to read the entire file contents into memory to create the Blob object. This is slow (and very inefficient) when selecting a large file.
Does anyone know of a way to get a Blob or File object without reading everything into memory? I looked at the File and Blob API documentation but from what I see there isn't a way, unless I'm missing something. I'm wondering how the File API works behind the scenes when using a standard HTML input and choosing a file, because as shown by the example above, you're immediately given access to a File object (which is also a Blob) and it's very fast even for large files.
