We Keep Coding

MediaSource fetching/downloading

When I try to fetch MediaSource object via blob link or send GET XMLHttpRequest I'm getting the error net::ERR_FILE_NOT_FOUND.
This happened for youtube or instagram MediaSource links.
eg
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
some_Further_CallBack(xhr.response);
};
xhr.send();
I'm completelly stuck, please say me what I'm doing wrong.

The blob: URL when created from a MediaSource can not be fetched from that URL. Note that even when it's created from a Blob, it's not the same Blob object that you fetch.
The best is to keep your MediaSource instance available in a variable, but in cases you can't (e.g because you're not the author of the page), you can add some hooks on the URL methods to save the original object and retrieve it later as exposed in this answer of mine. But note that you'd need this script to be ran BEFORE the page's use of URL.creatObjectURL(), which means that in your case you will probably need an user-script to inject it as soon as possible.

Try get error after send
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/error_event
But i think is not possible get content from youtube by XMLHttpRequest

Display binary image data in image

I can't figure out how to display image bytes returned from a web api in an html Image. This is how the data looks in firefox console (truncated for brevity):
������JFIF�������������C����������������������...
I've tried to use data:image/jpeg;base64, " + btoa(data) as image src, I get String contains an invalid character error. When I use btoa(unescape(encodeURIComponent(data)))instead of btoa I get no errors, but the image is not displayed. The Content-Type of the response is image/jpeg.
The image is rendered correctly in Fiddler.
Any ideas how to get the image to display the data?

I've got it working. The problem was that I used Jquery $.ajax to get the image data. Jquery automatically converted the received bytes into an UTF-16 string and passed that string into the success callback.
If I used basic XMLHttpRequest I was able to render the received image in html, like this:
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.responseType = "arraybuffer";
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = function() {
var byteArray = new Uint8Array(xhr.response);
var base64Data = btoa(String.fromCharCode.apply(null, byteArray));
image.attr("src", "data:image/jpeg;base64, " + base64Data);
};
xhr.send(jsonPayload);

Handle image binary file returned from the server

The server is sending me an image through an API call. I'm unsure how to convert it to base64 and show as image src. The FileReader's readAsDataURI says it's not type of blob. However, the browser's network panel does preview the image correctly. The server is not sending a 'Content-Type' header with the response, can this be the issue? screenshot of the response

If the chrome dev tool shows the image correctly then it is a valid blob file.
You just need to set the response type in your request and also You can use the createObjectURL to generate the image
Here is a sample snippet
function response(e) {
var urlCreator = window.URL || window.webkitURL;
console.log(this.response);
var imageUrl = urlCreator.createObjectURL(this.response);
document.querySelector("#image").src = imageUrl;
}
function GetImageBlob(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://secret/upload/IMG_1_201810220930_1.jpg");
//Set Header if is required by the api
xhr.setRequestHeader("Authorization","Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NDAyMTg5MDYsImlzcyI6Imh0dHA6Ly9yc3YtZGV2LmJsb3RvY29sLnRlY2gvYWRtaW4iLCJhdWQiOiJodHRwOi8vcnN2LWRldi5ibG90b2NvbC50ZWNoL2FkbWluIn0.YTHKhrl05PWDWCkHB1Nw7yW5166NiyGG3kZ_7SWfT1I");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();
}
GetImageBlob();

Post complex data using ajax and open returned PDF in new window

I need to use JQuery ajax to post a complex and sensitive data object (nested objects, arrays, and Personally Identifiable Information) to my server, where a PDF is generated and returned to the client. The client browser then should open the PDF in a new window.
Because of the nature of the data the request neither can nor should be an encoded URL - it must include the data as a JSON body.
The other questions/answers on this subject did not solve the problem in my case or do not do so completely.

Solution
POST with the data in the body as JSON.
Set the expected Content-Type of the response to arraybuffer (on the client and server).
When the request has complete successfully, convert the response to a Blob.
Create an object url to the Blob and open it in a new window.
Notes
JQuery ajax does not support the arraybuffer Content-Type so the base JavaScript xhr must be used (if you don't have any other options).
Internet Explorer has its own functionality for handling and displaying Blob's, so a special case is needed.
Supported browsers does not include IE9
Code
RequestPdf = function (url, data) {
var request = new XMLHttpRequest(), file, fileURL;
request.open("POST", url);
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
request.responseType = "arraybuffer";
request.send(data);
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
file = new Blob([request.response], { type: 'application/pdf' });
if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE
window.navigator.msSaveOrOpenBlob(file);
} else {
fileURL = URL.createObjectURL(file);
window.open(fileURL);
}
}
};
};

Javascript binary file download, and ajax file POST upload in Chrome Extension

I'm writing a chrome extension content script which will embed itself on some pages, and when there are certain file type links (.doc, .torrent, etc) it will download that file, and then do a file POST to a python web server which will save that file. The python server is working, and handles a normal multipart/form-data POST request, and successfully saves the file when I use the html interface I wrote for it.
I have javascript downloading the file properly:
var req = new XMLHttpRequest();
req.open('GET', 'http://foo.com/bar.torrent', false);
req.overrideMimeType('text/plain; charset=x-user-defined');
req.send(null);
if (req.status != 200) return '';
var response = req.responseText;
And then when I try to create a POST request and upload it
// Define a boundary, I stole this from IE but you can use any string AFAIK
var boundary = "---------------------------7da24f2e50046";
var xhr = new XMLHttpRequest();
var body = '--' + boundary + '\r\n'
// Parameter name is "file" and local filename is "temp.txt"
+ 'Content-Disposition: form-data; name="upfile";'
+ 'filename="temp.torrent"\r\n'
// Add the file's mime-type
+ 'Content-type: application/bittorrent\r\n\r\n'
+ response + '\r\n';
//+ boundary + '--';
xhr.open("POST", "http://python.server/", true);
xhr.setRequestHeader(
"Content-type", "multipart/form-data; boundary="+boundary
);
xhr.onreadystatechange = function ()
{
if (xhr.readyState == 4 && xhr.status == 200)
alert("File uploaded!");
}
xhr.send(body);
It thinks that it uploaded successfully, but when I try to open the file it says the data is corrupted. I think this is some kind of encoding issue, but I'm not 100% sure.
Any thoughts would be very helpful.

Your upload method does not work, because all binary characters are encoded as UTF-8. I posted the explanation and solution in an answer at this question.
In your case, you don't need to manually create the post data. Request the initial data in a smart way, and use the FormData object to post the binary data. For instance:
var x = new XMLHttpRequest();
x.onload = function() {
// Create a form
var fd = new FormData();
fd.append("upfile", x.response); // x.response is a Blob object
// Upload to your server
var y = new XMLHttpRequest();
y.onload = function() {
alert('File uploaded!');
};
y.open('POST', 'http://python/server/');
y.send(fd);
};
x.responseType = 'blob'; // <-- This is necessary!
x.open('GET', 'http://foo.com/bar.torrent', true);
x.send();
Note: I replaced false with true at the initial request. Avoid using synchronous XMLHttpRequest when it's also possible to asynchronously create the request.
If you don't understand the answer, here are more examples with thorough explanations:
XMLHttpRequest: Multipart/Related POST with XML and image as payload - FormData is not used, but the post data is manually created instead.
Upload a File in a Google Chrome Extension - A sample Chrome extension which uses Web Workers (with a FormData polyfill) to upload files
Google chrome rehost image extension - Scrapes an image from the page, and upload the image to imgur using a Chrome extension.