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();
Related
I want to get a Base64 encoded file from the server in order to use it in a dataURL so I use:
xhr.overrideMimeType("text/plain; charset=x-user-defined");
So I get the unprocessed data to perform the base64 encoding on.
But I also want to get the mimetype originally returned from the server to declare my dataURL:
var dataUrl = 'data:'+mimetype+';base64,'+b64;
when I try something like the following:
var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
var mimetype = xhr.getResponseHeader('content-type');
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.send(null);
the content-type returned is always null
Full source:
function getFileDataUrl(link,mimetype)
{
var url = location.origin+link;
var getBinary = function (url)
{
var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
if(mimetype == null)
{
mimetype = xhr.getResponseHeader('content-type');
console.log('mimetype='+mimetype);
}
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.send(null);
return xhr.responseText;
};
var bin = getBinary(url);
var b64 = base64Encode(bin);
var dataUrl = 'data:'+mimetype+';base64,'+b64;
return dataUrl;
}
var dataUrl = getFileDataUrl(link,null);
You can set responseType of XMLHttpRequest to "blob" or "arraybuffer" then use FileReader, FileReader.prototype.readAsDataURL() on response. Though note, onload event of FileReader returns results asynchronously. To read file synchronously you can use Worker and FileReaderSync()
var reader = new FileReader();
reader.onload = function() {
// do stuff with `reader.result`
console.log(reader.result);
}
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function() {
reader.readAsDataURL(xhr.response);
}
xhr.send(null);
At chromium synchronous XMLHttpRequest() is deprecated, see https://xhr.spec.whatwg.org/.
You can use Promise at main thread to get data URI of requested resource using either Worker or when FileReader load event is dispatched. Or use synchronous XMLHttpRequest() and FileReaderSync() at Worker thread, then listen for message event at main thread, use .then() to get Promise value.
Main thread
var worker = new Worker("worker.js");
var url = "path/to/resource";
function getFileDataUrl(url) {
return new Promise(function(resolve, reject) {
worker.addEventListener("message", function(e) {
resolve(e.data)
});
worker.postMessage(url);
})
}
getFileDataUrl(url)
.then(function(data) {
console.log(data)
}, function(err) {
console.log(err)
});
worker.js
var reader = new FileReaderSync();
var request = new XMLHttpRequest();
self.addEventListener("message", function(e) {
var reader = new FileReaderSync();
request.open("GET", e.data, false);
request.responseType = "blob";
request.send(null);
self.postMessage(reader.readAsDataURL(request.response));
});
plnkr http://plnkr.co/edit/gayWpkTVydmKYMnPr3jD?p=preview
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();
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();
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();
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