I am sending a XMLHttpRequest to a MVC Controller and i am expecting to receive a file as a result.
When debugging with the browser i am getting a response that is ok , but i do not know why it is not as a file:
JS
window.submit=function () {
return new Promise((resolve, reject) => {
var form = document.getElementById("newTestForm");
var data = new FormData(form);
var xhr = new XMLHttpRequest();
var method = form.getAttribute('method');
var action = form.getAttribute('action');
xhr.open(method, action);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response); //response looks ok...but no file starts downloading
}
else if (xhr.status != 200) {
reject("Failed to submit form with status" + xhr.status);
}
}
xhr.send(data);
});
}
Controller
[HttpPost]
[Route([Some Route])]
public async Task BenchAsync(object request)
{
try
{
string fileName = "results.txt";
object result = await service.RunAsync(request);
byte[] data = Encoding.UTF8.GetBytes(JsonConvert.SerializeObject(result));
this.Response.ContentType = "application/octet-stream";
this.Response.ContentLength = data.Length;
using(MemoryStream stream=new MemoryStream(data))
{
await stream.CopyToAsync(this.Response.Body);
}
}
catch (Exception ex)
{
throw;
}
}
I have solved it thanks to this Post
It seems i had to transform the response into a BLOB , create a download link and point it towards this blob and the created link in order to download the file.
So the function looks like :
window.submit= function () {
return new Promise((resolve, reject) => {
var form = document.getElementById("newTestForm");
var data = new FormData(form);
var xhr = new XMLHttpRequest();
var method = form.getAttribute('method');
var action = form.getAttribute('action');
xhr.open(method, action);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
var blob = new Blob([this.response], { type: 'image/pdf' });
let a = document.createElement("a");
a.style = "display: none";
document.body.appendChild(a);
let url = window.URL.createObjectURL(blob);
a.href = url;
a.download = 'mytext.txt';
a.click();
window.URL.revokeObjectURL(url);
}
else if (xhr.status != 200) {
reject("Failed to submit form with status" + xhr.status);
}
}
xhr.send(data);
});
}
P.S i do not know what the type of the blob is named for txt but it works as well , given the right extension.
Related
Hi I am trying to download image from web page.
Run code in devtool and create a booklet for it.
My code is work, but if imgarr.length is bigger, I only get 10 or 20 image. I have check all request, they still work (status 200). Please help me what wrong with this.
var imgarr = [url1, url2,...] // using querySelectorAll to get Array of URL Image;
try {
for (var i = 0; i < imgarr.length; i++) {
download(imgarr[i],'image')
};
} catch (e) {
alert("Download failed.");
console.log('Download failed.', e);
}
function download(url, fileName) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.onreadystatechange = function () {
if(this.readyState == 4 && this.status == 200){
var url = window.URL.createObjectURL(this.response);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = fileName;
a.click();
document.body.removeChild(a);
}
}
xhr.send();
}
Please I need help !
To begin I don't speaking very well english sorry for the mistakes
So I'm tryng to receive a JSON Object with this code :
function uhttp(url){
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
console.log(xhr.response)
return xhr.response;
}
};
xhr.send();
console.log('exit')
};
but when I use the function https like this :
`
( ()=>{
var perso =uhttp('bd.php?table=charac')
for (var i = 0; i < perso.lenght; i++) {
document.getElementbyID('container').append('<ul>'+perso[i].nom+'</ul>')
}
})()
`
perso he's undifined...
here the console of index.html
I've the impression that we'are exit the function before that whe receive the resonse and that is why the function return a null
Of course before to ask my question I'have make some research but no one working in my case....
Thank you for yours anwsers
It happens because you aren't returning value from uhttp() function but from anonymous function (xhr.onload).
In order to access this value after the AJAX call is over use promises:
function uhttp(url){
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
return;
}
reject();
};
xhr.onerror = function() {
reject()
};
xhr.send();
})
}
And use it like so:
uhttp('bd.php?table=charac').then(function(result) {
var person = result;
for (var i = 0; i < perso.lenght; i++) {
document.getElementbyID('container').append('<ul>'+perso[i].nom+'</ul>');
}
}).catch(function() {
// Logic on error
});
I observed a very strange behavior. If I set a button from web to upload string to S3, it works fine. But if I set a button from web to bring up a bootstrap modal, then from this modal I set a button to upload the string, it doesn't work.
Frontend is like below in both cases. The difference is whether clicking to run function 'saveToAWS' from web or from modal as 2-step-process, the latter returns xhr.status as 0.
function saveToAWS() {
var file = new File([jsonStr], "file.json", { type: "application/json" });
var xhr = new XMLHttpRequest();
var fn=file.name;
var ft = file.type;
xhr.open("GET", "/sign_s3_save?file-name=" + fn + "&file-type=" + ft);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log('signiture returned')
save_file(file, response.signed_request, response.url);
}
else {
alert("Could not get signed URL.");
}
}
};
xhr.send();
}
function save_file(file, signed_request, url) {
var xhr = new XMLHttpRequest();
xhr.open('PUT', signed_request);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('200');
}
else {
alert('cannot upload file');
}
}
};
xhr.send(file);
}
Backend as Node.js, in order to get a signed URL:
app.get('/sign_s3_save', isLoggedIn, function (req, res) {
var fileName = req.query['file-name'];
var fileType = req.query['file-type'];
aws.config.update({ accessKeyId: AWS_ACCESS_KEY, secretAccessKey: AWS_SECRET_KEY });
var s3 = new aws.S3();
var ac = req.user._id;
var timenow = Date.now().toString();
var fileRename = ac + '/json/' + timenow + '.json';
var s3_params = {
Bucket: S3_BUCKET,
Key: fileRename,
Expires: 60,
ContentType: fileType,
ACL: 'public-read'
};
s3.getSignedUrl('putObject', s3_params, function (err, data) {
if (err) {
console.log(err);
}
else {
var return_data = {
signed_request: data,
url: 'https://' + S3_BUCKET + '.s3.amazonaws.com/' + fileRename
};
res.write(JSON.stringify(return_data));
res.end();
}
});
});
Any suggestion, please?
I' using JSzip to create zipfile which contain all the images files. I got the images from external links within a loop using XMLHttpRequest. According to my code zipfile create before complete the XMLHttpRequest. So it returns empty zip file. How to create zip file after looping all the files?
$(document).on('click', '.download', function(){
var path = $(this).attr("data-id");
var count = $(this).attr("value");
var storageRef = firebase.storage().ref();
var zip = new JSZip();
console.log(count);
for (i = 1; i <= count; i++) {
console.log(path+i+".png");
var imagePath = path+i+".png";
// Create a reference to the file we want to download
var starsRef = storageRef.child(imagePath);
starsRef.getDownloadURL().then(function(url) {
// Insert url into an <img> tag to "download"
ImageUrl = url;
var xhr = new XMLHttpRequest();
xhr.open('GET', ImageUrl, true);
xhr.responseType = "arraybuffer";
xhr.onreadystatechange = function(evt) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
zip.file(i+".png", xhr.response);
}
}
};
xhr.send();
})
}
zip.generateAsync({type:"blob"})
.then(function(content) {
// see FileSaver.js
saveAs(content, "my.zip");
});
});
JSZip supports promises as content: you can wrap each HTTP calls into promises and not explicitly wait.
The first function, downloadUrlAsPromise, wraps the xhr call into a Promise. The second function, downloadFirebaseImage, chains the promise from getDownloadURL with the promise of the first function. The result is a promise of the xhr content.
Once you have that, you can give directly the promise to JSZip like that:
zip.file(i+".png", downloadFirebaseImage(imagePath));
Full methods:
function downloadUrlAsPromise (url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = "arraybuffer";
xhr.onreadystatechange = function(evt) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(new Error("Ajax error for " + url + ": " + xhr.status));
}
}
});
xhr.send();
});
}
function downloadFirebaseImage(storageRef, path) {
var starsRef = storageRef.child(imagePath);
return starsRef.getDownloadURL().then(function(url) {
return downloadUrlAsPromise(url);
});
}
// ...
for (i = 1; i <= count; i++) {
console.log(path+i+".png");
var imagePath = path+i+".png";
zip.file(i+".png", downloadFirebaseImage(imagePath));
}
zip.generateAsync({type:"blob"})
.then(function(content) {
// see FileSaver.js
saveAs(content, "my.zip");
});
I am using rtcmulticonnection.js. I want to save the video on server. Here are two files "index.html" and "save.php".
request.open("POST", url); does not post the data
here the source file link
"https://github.com/muaz-khan/RTCMultiConnection/blob/master/v2.2.2/demos/audio-video-screen-sharing-recording.html"
index.html
document.getElementById('recordAudioVideo').onclick = function() {
var localVideoStream = rmc.streams.selectFirst({
video: true,
local: true
});
if (!localVideoStream) return;
var recordingSession = {
audio: true,
video: true
};
var button = this;
if (button.innerHTML == 'Record Audio/Video') {
button.innerHTML = 'Stop Recording Audio/Video';
// http://www.rtcmulticonnection.org/docs/startRecording/
localVideoStream.startRecording(recordingSession);
} else if (button.innerHTML == 'Stop Recording Audio/Video') {
// http://www.rtcmulticonnection.org/docs/stopRecording/
localVideoStream.stopRecording(function(blob) {
//alert('Audio blob size in bytes: ' + blob.audio.size);
//alert('Video blob size in bytes: ' + blob.video.size);
var fileType = 'video'; // or "audio"
var fileName = 'ABCDEF.webm'; // or "wav"
var formData = new FormData();
formData.append(fileType + '-filename', fileName);
formData.append(fileType + '-blob', blob);
console.log(formData);
xhr('save.php', formData, function (fName) {
window.open(location.href + fName);
});
function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(location.href + request.responseText);
}
};
request.open("POST", url);
request.send(data);
}
button.innerHTML = 'Record Audio/Video';
}, recordingSession);
}
save.php
<?php
// Muaz Khan - www.MuazKhan.com
// MIT License - https://www.webrtc-experiment.com/licence/
// Documentation - https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC
foreach(array('video', 'audio') as $type) {
if (isset($_FILES["${type}-blob"])) {
echo 'uploads/';
$fileName = $_POST["${type}-filename"];
$uploadDirectory = './'.$fileName;
if (!move_uploaded_file($_FILES["${type}-blob"]["tmp_name"], $uploadDirectory)) {
echo(" problem moving uploaded file");
}
echo($fileName);
}
}
?>
the problem is at
request.open("POST", url);
request.send(data);
request.open("POST", url); does not post the data.it does not call url(means save.php).because i have alert some text to see if save.php is called or not. so it does not show any alertbox on client.how can i solve this problem.Also it shows no error on posting.