How to use xmlhttprequest in Firefox with binary data, f.e. images? - javascript

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);

Related

Synchronous XMLHttpRequest to download a video

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 ?

POST an image to PHP using only the URL from Cordova app

Given just the URL, or the FileEntry object. How do I POST an image to a PHP script? I have no form or DOM to draw on, just the URL to the image from FileEntry.nativeURL.
I tried following this but it seems to require the DOM.
POST an image to PHP in AJAX
This script will run detached from any page, so it can't use anything from any specific page.
Thanks.
Solved, had to request the file from myself to convert it to a blob, then place it in a FormData object and post it.
imageData.image_path='file://etc'
return new Promise(function (resolve, reject) {
var oReq = new XMLHttpRequest();
oReq.responseType = "blob";
oReq.onload = function (oEvent) {
var blob = oReq.response;
var formData = new FormData();
formData.append("image", blob);
var sendImage = new XMLHttpRequest();
sendImage.open("POST", "https://website/upload-handler");
sendImage.onload = function (oEvent) {
resolve(oEvent);
};
sendImage.onerror = function (e) {
reject(e);
};
sendImage.send(formData);
};
oReq.onerror = function (e) {
reject(e);
};
oReq.open("GET", imageData.image_path, true);
oReq.send();
});
This is a snip of the solution. The promise returned is used by my queuing system to keep retrying until successful.

XMLHttpRequest text send 404 error

I have a text file on my server and I want to upload a text in it using XMLHttpRequest. It is downloaded successfully via GET method, but when I try to POST it I get 404 error.
var r1 = new XMLHttpRequest();
r1.open("GET", "db.txt", false);
r1.send();
var str = r1.responseText + "foo text";
var r2 = new XMLHttpRequest();
r2.open("POST", "db.txt", false);
r2.send(str);
Doing a direct upload as you're trying would be a security concern in most places and is generally not permitted... What you need to do is have a middle layer on your server to handle the request and write the file to disk safely.
You can easily upload a file using something like this:
var jsonBlob = new Blob([someJSON], {type: "text/plain;charset=utf-8"});
var data = new FormData();
data.append("filename", "new.json");
data.append("json", jsonBlob);
var xhr = new XMLHttpRequest();
var postURL = "http://example.com/post_target";
xhr.open("POST", postURL, true);
xhr.onload = function(e) {
if (this.status == 200) {
console.log(e.target.response);
}
};
xhr.send(data);
Where postURL is an endpoint which can handle file uploads.
If you post what language(s) you have available on your server (PHP?) I can give some example code to handle the upload on the server's end.

Download a file with JS

I'm trying to download a remote mp3 file using JavaScript, but the problem is that I receive a cross origin error.
Here's my code:
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
var blob = new Blob([xhr.response], {type: 'audio/mpeg'});
var b64data = btoa(blob);
zipFile.file(name, b64data, {base64: true});
callback();
};
xhr.send();
It's an mp3 file so I don't care about not sending cookies or such.
Is it possible?
Thanks

XMLHttpRequest for Video Tag?

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.

Categories