Has anyone tried using binary data from an XHR request to be the content of a video file?
In Blob-supporting browsers, you can do the following and use a generate, given req is a new XMLHttpRequest:
var some_video_element = ...;
req.onload = function () {
var blob_uri = URL.createObjectURL(this.response);
some_video_element.appendChild(document.createElement("source"))
.src = blob_uri;
};
req.responseType = "blob";
req.open(...);
req.send(null);
Refer to this workaround for Google Chrome until responseType = "blob" is implemented.
Related
I would like to download completely a mp4 video from an Ajax request in order to render it later.
With an asynchronous request, it works correctly :
const req = new XMLHttpRequest();
req.open('GET', myVideoUrl, true);
req.responseType = 'blob';
req.onload = function() {
renderVideo(URL.createObjectURL(this.response));
};
But I would prefer to do it synchronously in order to block the rendering until the video is downloaded. I tried this way, but it doesn't work...
const req = new XMLHttpRequest();
req.open('GET', myVideoUrl, false);
req.send(null);
const blob = new Blob([req.responseText], { type: 'video/mp4' });
renderVideo(URL.createObjectURL(blob));
I think the problem comes from the binary data and the conversion I tried from responseText to objectUrl...
Any idea to resolve that ?
I have a function that allows me to pass file content, name, and type and the function will automatically save it. It works great for text based documents, but now I'm trying to have it save other files, like an image file. Somewhere along the line its getting corrupted and isn't working.
function write(text, filename, mime){
var file = new Blob([text], {type:mime}), a = document.createElement('a');
// Download in IE
if(window.navigator.msSaveBlob) window.navigator.msSaveBlob(file, filename);
// Download in compliant browsers
else{
var url = URL.createObjectURL(file);
a.href = url, a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function(){
document.body.removeChild(a);
window.URL.revokeObjectURL(url);}, 0);}}
write('Plain text', 'demo.txt', 'text/plain');
write(atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAAdCAIAAADkY5E+AAAAD0lEQVR42mNg0AthoDMGAE1BDruZMRqXAAAAAElFTkSuQmCC'), 'demo.png', 'image/png');
FileSaver.js a very powerfull js script to save any type of blob file.
Import it then use it like that:
saveAs(new Blob([file], {type:mime}),filename);
Are you fetching the file using ajax? if so, you should set
XmlHttpRequest.responseType to 'arraybuffer' or 'blob' (default is '' and that will not work with binaries or blob data).
Working example (using arraybuffer) (Fiddle):
var xhr = new XMLHttpRequest();
var url = 'https://upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg';
xhr.responseType = 'arraybuffer'; //Set the response type to arraybuffer so xhr.response returns ArrayBuffer
xhr.open('GET', url , true);
xhr.onreadystatechange = function () {
if (xhr.readyState == xhr.DONE) {
//When request is done
//xhr.response will be an ArrayBuffer
var file = new Blob([xhr.response], {type:'image/jpeg'});
saveAs(file, 'image.jpeg');
}
};
xhr.send(); //Request is sent
Working example 2 (using blob) (Fiddle):
var xhr = new XMLHttpRequest();
var url = 'https://upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg';
xhr.responseType = 'blob'; //Set the response type to blob so xhr.response returns a blob
xhr.open('GET', url , true);
xhr.onreadystatechange = function () {
if (xhr.readyState == xhr.DONE) {
//When request is done
//xhr.response will be a Blob ready to save
saveAs(xhr.response, 'image.jpeg');
}
};
xhr.send(); //Request is sent
I recommend FileSaver.js to save the blobs as files.
Useful links:
XmlHttpRequest Standard
XmlHttpRequest Standard (responseType attribute)
MDN Docs (XmlHttpRequest)
MDN Docs (ArrayBuffer)
I'm currently looking at
function readDataFromURL(fuFullHttpURL, fuCallMeOnLoad) {
var MyThis = this;
this.fullHttpURL = fuFullHttpURL;
this.callMeOnLoad = fuCallMeOnLoad;
var oReq = new XMLHttpRequest();
oReq.open("GET", MyThis.fullHttpURL, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
var blob = new Blob([oReq.response], {type: "image/jpg"});
MyThis.callMeOnLoad(blob);
};
oReq.send();
}
But that is only for download. How do I upload with this code?
And when I tried downloading an image with xmlhttprequest in former years there was a size restriction to the download. Is there still a size restriction?
In former times every browser handeled this size-restriction differently, so I can't test this myself.
Edit: https://stackoverflow.com/a/18120473/3716796 seems to explain uploading.
You can use FormData to send files in XMLHttpRequest like below . Although Chrome & FF support it well, it works only in IE10 or above.
var xhr = new XMLHttpRequest();
var file = document.getElementById("fileUpload");
var formData = new FormData();
formData.append("upload", file.files[0]);
xhr.open("post", "your-url", true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.upload.onload = function(event){
// handle successful upload
};
xhr.send(formData);
i have a file download that is being initiated with a simple window.location.href command. Since i am staying on the same page i would like to call a different function that will refresh a part of the page, but this other function is not being executed after the download. Is there a way to do this?
I guess Im looking for something like ajax`s "success" option.
Thanks!
Try this:
var req = new XMLHttpRequest();
req.open("POST", "your endpoint", true);
req.responseType = "blob";
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
var fileName = "fileName.pdf";
req.onload = function (event) {
var blob = req.response;
if (req.status === 200) {
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.click();
//call your method her to do anything
}
};
req.send();
//if you have any parameter, you can this
//reg.send(param)
A simple AJAX post call would suffice. Especially with something async and variable in time like a file download, the readyState attribute of an XMLHttpRequest is quite helpful.
I'm trying to use filepicker.io to fetch binary data and pass it into a function like this:
var doSomething = function(arrayBuffer) {
var u16 = new Int16Array(arrayBuffer);
}
I have no idea how to convert the binary into arraybuffer like this:
filepicker.getContents(url, function(data){
//convert data into arraybuffer
}
I tried to follow this tutorial on XMLHttpRequest but does't not work.
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
doSomething(this.response);
};
You are not calling .send with your XHR
xhr.send(null);