Safari interprets Objects from xhr request as String not as Objects - javascript

i am trying to load a json file with objects via xhr request.
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "jsonp";
xhr.onload = function (data) {
discog = xhr.response;
};
xhr.send();
this works fine in chrome, safari however interprets the response as a string - what am I doing wrong here?
thank you very much

One problem is that "jsonp" is not a valid responseType.
Try this instead:
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onload = function(){
discog = JSON.parse(xhr.responseText);
};
xhr.send();
Or this:
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "json";
xhr.onload = function(){
discog = xhr.response;
};
xhr.send();

Related

Javascript how to upload a mp3 file from a link

I'm wanting to get the contents of a mp3 file from a url get_mp3_file(mp3_file), then upload the contents of the mp3 I just downloaded, to another webserver and get the response.
var mp3_url = 'https://example.com/song.mp3';
function get_mp3_file(mp3_url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', mp3_url, false);
xhr.send();
return xhr.responseText;
}
var fd = new FormData();
fd.append("file", get_mp3_file(mp3_url));
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://mp3-to-wav.com/upload-file.php', false);
xhr.send(fd);
var wav_link = JSON.parse(xhr.responseText).link;
the key was the File class. here's more about it.
https://w3c.github.io/FileAPI/#file-constructor
The solution for retrieving the contents of a file from one webserver, and then uploading it to another webserver:
var mp3_url = 'https://example.com/song.mp3';
var xhr = new XMLHttpRequest();
xhr.open('GET', mp3_url, false);
xhr.responseType = 'blob';
xhr.onload = function() {
var xhr2 = new XMLHttpRequest();
var file = new File([xhr.response], 'song.mp3', {type: 'audio/mp3'});
var formData = new FormData();
formData.append('file', file);
xhr2.open('POST', "https://convert-mp3-to-wav.com", false);
xhr2.send(formData);
}
xhr.send();

IE-10 and Below: The data necessary to complete this operation is not yet available

var xhr = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
xhr.open("GET", getPwdExpireNotificationUrlv2);
xhr.onload = function() { resolve(xhr.responseText);}
xhr.onerror = function() { reject(xhr.statusText);}
xhr.ontimeout = function (e) {xhr.send();};
xhr.send();
While making multiple similar requests(like above) by using javascript "Promise.all".

How to append an image from URL to a FormData - Javascript

This is my little javascript code:
<script>
var formData = new FormData();
URL = "view.php?fetchImageById=1";
formData.append("imageFile", ....);
formData.append("author","user");
formData.append("description","image");
x=new XMLHttpRequest();
x.open("POST","upload.php",true);
x.setRequestHeader("Content-type", "multipart/form-data");
x.setRequestHeader("Content-Length",formData.length);
x.send(formData);
</script>
I don't know how to append the URL to the formData.
You could perform two XMLHttpRequest()s; first GET request image as a Blob first by setting responseType to "blob"; then append Blob response to FormData at POST
var formData = new FormData();
URL = "view.php?fetchImageById=1";
var x;
var request = new XMLHttpRequest();
request.responseType = "blob";
request.onload = function() {
formData.append("imageFile", request.response);
formData.append("author","user");
formData.append("description","image");
x = new XMLHttpRequest();
x.open("POST","upload.php",true);
x.setRequestHeader("Content-type", "multipart/form-data");
x.setRequestHeader("Content-Length", formData.length);
x.send(formData);
}
request.open("GET", URL);
request.send();

convert URL into file object using javascript only

Link given:
example.com/data/videos/videoname.mp4
How to pass this link as fileInput?
var fileUrl = window.URL.createObjectURL(fileInput);
All should be done in javascript only.
Need a solution in pure javascript only not using any jquery.
You can use ajax and get blob
var url = 'http://example.com/data/videos/videoname.mp4';
var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:'+url, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var myObject = this.response;
}
};
xhr.send();

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

Categories