Override Javascript Blob implementation for XHR upload - javascript

Supposing I want to upload a stream of random data from my browser to a remote server. I would use something like
var oReq = new XMLHttpRequest();
oReq.open("POST", url, true);
oReq.onload = function (oEvent) {
// Uploaded.
};
var blob = new Blob(['abc123'], {type: 'text/plain'});
oReq.send(blob);
and repeat this as many times as I have chunks to upload.
But, what if I wanted to send it using a single XHR request ? Is it possible to override the Blob function and do something like
function Blob(arr, options) {
var chunkSize = 1024;
MyBlob.prototype.nextChunk(function () {
return arr.splice(0, chunkSize);
});
}
I know that nextChunk does not exist, obviously, but maybe there is some interface that can be overridden ? I looked at the Blob specification and I tried using an alternative Blob implementation (that I modified slightly to force overriding window.Blob), but nothing was sent to the server.

Related

What is the difference between file upload using FileReader and FormData?

There are two ways I can upload files using Ajax (XHR2). First, I can read the file content as array buffer or binary string and then simply stream using XHR send method. For example, as shown here:
function uploadFile(img, file) {
const reader = new FileReader();
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
const percentage = Math.round((e.loaded * 100) / e.total);
// Do something with percentage
}
});
xhr.upload.addEventListener("load", (e) => console.log('Do something more'));
xhr.open("POST", "some-url");
xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
reader.onload = function(evt) {
xhr.send(evt.target.result);
};
reader.readAsBinaryString(file);
}
Second, I can use FormData to upload my file as shown here:
var formData = new FormData();
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
var request = new XMLHttpRequest();
request.open("POST", "some-url");
request.send(formData);
Are the two methods equivalent? Is there any advantage of using FileReader instead of FormData? Is one more performant than the other?
First, there is a third option you omitted which is to send the File directly through xhr.send(file) just like you did with the ArrayBuffer.
That being said, there doesn't exist any possible advantage to first reading the file in memory through FileReader.
When doing a file upload from a File on disk, the browser doesn't load the full file in memory but streams it through the request. This is how you can upload gigs of data even though it wouldn't fit in memory. This also is more friendly with the HDD since it allows for other processes to access it between each chunk instead of locking it.
When reading the File through a FileReader you are asking the browser to read the full file to memory, and then when you send it through XHR the data from memory is being used. You are thus limited by the memory available, bloating it for no good reasons, and even asking the CPU to work here while the data could have gone from the disk to the network card almost directly.
As to what's the difference between formdata.append(file); xhr.send(formdata); and xhr.send(file), basically only request headers. The former will wrap the request as a multipart/form-data enctype request, while the latter will send it as is.
So you'd handle both requests differently on the receiving end.

Javascrip service worker blob

I am trying to download a file in a service worker. The file came from a blob.
I already know that i can download a blob by doing this
var urlCreator = window.URL || window.webkitURL;
var blobURL = urlCreator.createObjectURL(blob, { type: "octet/stream" });
or by using something like FileSaver.js
But today, i am trying to "render" the bytes array of the blob in the page and force the browser to download the document.
Why ?
I am trying to do that because, some browser that i am trying to reach do not support url like "blob:https:......"
So i try to find a way to render the bytearrays of my blob directly in javascript.
I know that i can push headers with worker, but not sure that is the right strategie.
I also try something like that
var xhr = new XMLHttpRequest();
xhr.open('GET', obj.URL, false);
xhr.overrideMimeType("application/octet-stream");
//xhr.setRequestHeader("Accept", "application/octet-stream");
xhr.responseType = "arraybuffer";
xhr.onload = function (e) {
self.Response(xhr.response);
//if (this.status == 200) {
// var myBlob = this.response;
// // myBlob is now the blob that the object URL pointed to.
//}
};
xhr.send();
In my worker.js
ps: Please avoid to told me, send you base64 blob content to your server and send back the file to the browser, i would like to find a pure javascript solution.
Is it possible ?

Create blob url with javascript

I'm trying to create a web application for videos, I decided to start by configuring the videos, in case of problem, creating blob url for videos.
It turns out that I'm not sure what terms to use to search in google and the ones I used do not find anything very simple or straightforward.
I would like to know how I can create a blob url for videos and what would be the best way, since I have already seen topics using FileReader and MediaSource and some others, so I would like to know the simplest way to do this.
I'm testing on a direct html, without external libraries or external files.
var URL = this.window.URL || this.window.webkitURL;
var file = new Blob(["http://localhost/assets/mp4/video.mp4"],{"type" : "video\/mp4"});
var value = URL.createObjectURL(file);
$(document).ready(function(){
$('#MyVideo').attr('src',value);
});
Generates a blob link but does not load the video
Edit:
For further questions from beginners like me, I got the expected result with the script below:
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/assets/mp4/video.mp4');
xhr.responseType = 'arraybuffer';
xhr.onload = function(e){
var blob = new Blob(([xhr.response]));
var url = URL.createObjectURL(blob);
document.getElementById('_video').src = url;
};

Using Simple Webaudiorecorder.js in R/Shiny and posting the recording to the server

I am using WebAudioRecorder.js for making online recordings in an R Shiny app, see:
https://github.com/addpipe/simple-web-audio-recorder-demo
As a format, I chose the wave format, and in the JavaScript code, the recording is obtained as a blob. I would like the program to save this blob on the server without any dialog.
Here, you shouldn't set the hole filePath in javascript, you should give it a filename and then php should put it in the correct folder.
function uploadWaveBlob (blob, encoding) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
var fileName = Date().toISOString() + '.' + encoding;
formData.append("Wav", blob, fileName);
xhr.open('POST', uploadUrl);
xhr.onload = function () {
console.log('xhr complete');
};
xhr.send(formData);
}
imagine if i would upload something to like /etc/hosts or something
The following site gives code that shows how to upload a blob to the server:
https://gist.github.com/primaryobjects/d6cdf5d31242a629b0e4cda1bfc4bff9
The complete solution is available at:
https://github.com/heeringa0/simple-web-audio-recorder
and shows how to integrate the Simple WebAudioRecorder.js in an R Shiny app where the recording is saved to the server.

Simulate XHR2 file upload

I have a HTML upload button to send (multiple) files to a server which responds with JSON. Based on that response, my application flow continues.
Now, to test the rest of my code (dependent on the server response), I would like to simulate the file upload so that I do not have to manually select and upload new files on every reload.
Following is a simplified version of my upload method:
uploadToServer: function (file) {
var self = this,
data = new FormData(),
xhr = new XMLHttpRequest();
// When the request has successfully completed.
xhr.onload = function () {
var response = $.parseJSON(this.responseText);
var photo = new App.Models.Photo({
filename: response.filename,
name: response.uuid
});
var photoView = new App.Views.Photo({ model: photo });
$('.photos').append(photoView.render().el);
};
// Send to server, where we can then access it with $_FILES['file].
data.append('file', file);
xhr.open('POST', this.url);
xhr.send(data);
}
The uploadToServer parameter file is a File-object from FileList. And as you can see, my server awaits the file inside of $_FILES['file'].
It would be awesome if a could simulate a real File-object being passed into uploadToServer, since I then do not have to worry about my existing events such as xhr.onload and xhr.onprogress being available.
If that won't be possible, I could create a custom uploadToServer method and send a regular AJAX-request and fake-respond on my server. But how can I then use and bind the code from my events (xhr.onload, xhr.onprogress etc.) to that AJAX-request?
You could simulate a file upload by creating a canvas, converting it to a file and passing the result to your method.
Create a canvas : here, a nice red square
var canvas = document.createElement('canvas'),
ctx = canvas.getContext("2d");
canvas.width = 100;
canvas.height = 100;
ctx.fillStyle = '#ff0000';
ctx.fillRect(0, 0, 100, 100);
document.body.appendChild(canvas);
Convert it to a file and pass it to your method: I used Canvas to Blob to simplify the test but you probably can extract the bare bones to fit your needs.
canvas.toBlob( function (blob) {
m.uploadToServer(blob);
}, 'image/jpeg');
And a Fiddle http://jsfiddle.net/pvWxx/ Be sure to open a console to see the events and the request.
If you want to pass a filename with your blob, you can pass a third argument to formData.append, see How to give a Blob uploaded as FormData a file name? and an updated Fiddle http://jsfiddle.net/pvWxx/1/

Categories