This is my first question on StackOverflow :)
I'm learning Javascript for a personal project and I get some troubles with asynchronous functions. Something is not clear to me yet with such functions :( .
I try to upload multifiles in an HTML form to prepare an XHR request. Below is my function that I trigger with a an AddEventListener on the submit button.
I found explications on MDN learning web development but since it was only for one file I custom it with a for loop on formCell[5].files (declared as global constant) which is where my files are.
The problem seems to be with the asynchronous behavior. Is an expert on stack have advice to me ? Is there a solution with promises for example ? The "If" with SetTimeOut to wait for loop execution don't seem to me very pretty.
I think I tried hundred solutions without success :)
Thanks a lot in advance,
Regards,
Romain
function sendData() {
/* Loading files */
var binnaryFiles = [null];
for (let i = 0; i < formCell[5].files.length; i++) {
let reader = new FileReader(); // FileReader API
reader.addEventListener("load", function () { // Asynchronous function (return result when read)
binnaryFiles[i] = reader.result;
});
// Read the file
reader.readAsBinaryString(formCell[5].files[i]);
}
if(binnaryFiles.length !== formCell[5].files.length) {
setTimeout( sendData, 10 );
return;
}
console.log("final" + binnaryFiles.length);
const XHR = new XMLHttpRequest();
const boundary = "blob"; // We need a separator to define each part of the request
let msg = "";
/* Loading files in the request */
for (let i = 0; i < formCell[5].files.length; i++) {
msg += "--" + boundary + "\r\n";
msg += 'content-disposition: form-data; '
+ 'name="' + formCell[5].name + '"; '
+ 'filename="' + formCell[5].files[i].name + '"\r\n';
msg += 'Content-Type: ' + formCell[5].files[i].type + '\r\n';
msg += '\r\n';
msg += binnaryFiles[i] + '\r\n';
}
/* Loading texts in the request */
for (let i = 0; i < formCell.length - 1; i++) {
msg += "--" + boundary + "\r\n";
msg += 'content-disposition: form-data; name="' + formCell[i].name + '"\r\n';
msg += '\r\n';
msg += formCell[i].value + "\r\n";
}
msg += "--" + boundary + "--";
XHR.addEventListener("load", function(event) {
alert( 'Yeah! Data sent and response loaded.' );
});
XHR.addEventListener("error", function(event) {
alert("Oops! Something went wrong.");
} );
XHR.open("POST", "http://localhost:3000/upload");
XHR.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
XHR.send(msg);
console.log(msg);
}
I think I finished by solving my problem using Promises :)
If anyone could confirm me that the code below is correct it could help me :)
Thanks,
Romain
function fileUpLoad(fileToUpload) {
return new Promise((resolve, reject) => {
const reader = new FileReader(); // FileReader API
reader.addEventListener("load", function () { // Asynchronous function (return result when read)
resolve(reader.result);
reject(reader.error);
});
// Read the file
reader.readAsBinaryString(fileToUpload);
});
}
/* Sending message */
function sendData(filesUploaded) {
let binnaryFiles = filesUploaded;
const XHR = new XMLHttpRequest();
const boundary = "blob"; // We need a separator to define each part of the request
let msg = "";
/* Loading files in the request */
for (let i = 0; i < binnaryFiles.length; i++) {
msg += "--" + boundary + "\r\n";
msg += 'content-disposition: form-data; '
+ 'name="' + formCell[5].name + '"; '
+ 'filename="' + formCell[5].files[i].name + '"\r\n';
msg += 'Content-Type: ' + formCell[5].files[i].type + '\r\n';
msg += '\r\n';
msg += binnaryFiles[i] + '\r\n';
}
/* Loading texts in the request */
for (let i = 0; i < formCell.length - 1; i++) {
msg += "--" + boundary + "\r\n";
msg += 'content-disposition: form-data; name="' + formCell[i].name + '"\r\n';
msg += '\r\n';
msg += formCell[i].value + "\r\n";
}
msg += "--" + boundary + "--";
XHR.addEventListener("load", function(event) {
alert( 'Yeah! Data sent and response loaded.' );
});
XHR.addEventListener("error", function(event) {
alert("Oops! Something went wrong.");
} );
XHR.open("POST", "http://localhost:3000/upload");
XHR.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
XHR.send(msg);
console.log(msg);
}
/* Validation on submit calling */
form.addEventListener("submit", function (evt) {
evt.preventDefault();
if (validationOnSubmit()) {
if (formCell[5].files.length > 0) {
let fileUploadingPromise = []
for (let i = 0; i < formCell[5].files.length; i++) {
fileUploadingPromise[i] = fileUpLoad(formCell[5].files[i]);
}
let binnaryFiles = [null];
Promise.all(fileUploadingPromise)
.then (resolve => {
for (let i = 0; i < formCell[5].files.length; i++) {
binnaryFiles[i] = resolve[i];
}
sendData(binnaryFiles)
})
.catch (reject => {
console.log(reject);
});
} else {
sendData(0);
}
}
});
Related
I'm trying to create a site in which, through the Spotify Web API, I display the information of a certain element (Artist, Track, Album, etc ...).
I was trying to make a check on the url of the profile image of the Artist object as it is not said to be present, but when the console runs it gives me the error "Unexpected token }".
Could someone help me on why?
Below I leave the code:
function ricercaArtista() {
var xhr = new XMLHttpRequest();
var token = document.getElementById("token").innerHTML;
var artist = document.getElementById("artista").value;
artist = artist.replace(" ", "%20");
console.log(artist);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var result = '';
for (var i = 0; i < response.artists.items.length; i++) {
console.log(response.artists.items[i]);
try { //from here start the control on the image
result += '<div class="panel panel-primary style="background:url(' +
response.tracks.items[i].album.images[1].url + '");"><div class="panel-body">' +
} catch (error) {
result += '<div class="panel panel-primary");"><div class="panel-body">' +
}
'name : ' + response.artists.items[i].name + '<br/>' +
'popularity : ' + response.artists.items[i].popularity + '<br/>' +
'type : ' + response.artists.items[i].type + '<br/>' +
'' + 'Apri su Spotify' + '<br></div></div>';
}
alert
document.getElementById("artists").innerHTML = result;
}
};
xhr.open('GET', "https://api.spotify.com/v1/search?q=" + artist + "&type=artist", true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send();
}
We can use .formData() of Body mixin to return a FormData representation of data at Chromium (Chrome) 60+ and Firefox 39+
Relevant specifications:
7.2 The Multipart Content-Type
Returning Values from Forms: multipart/form-data
Errata
Clarification of Body package data algorithm with bytes, FormData and multipart/form-data MIME type #392
Documenting de-facto handling of multipart/form-data form field file uploads #3040
Related
Multipart HTTP response
How to upload files in Web Workers when FormData is not defined
How to manually create multipart/form-data using JavaScript at client and at server to serve the multipart/form-data as a response?
You can create multipart/form-data manually with XMLHttpRequest like this example.
function multiPost(method, url, formHash){
var boundary = "nVenJ7H4puv"
var body = ""
for(var key in formHash){
body += "--" + boundary
+ "\r\nContent-Disposition: form-data; name=" + formHash[key].name
+ "\r\nContent-type: " + formHash[key].type
+ "\r\n\r\n" + formHash[key].value + "\r\n"
}
body += "--" + boundary + "--\r\n"
var xml = new XMLHttpRequest();
xml.open(method, url)
xml.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary)
xml.setRequestHeader("Content-Length", body.length)
xml.send(body)
}
You can write you own FormData polyfill, or just google it "FormData polyfill"))) And also you can use normal FormData at browsers Chrome, FireFox, Opera, Safari, IE(10+), Edge.
FormData polyfill is only useful for old IE, and for workers, but for workers you better should use this - https://gist.github.com/Rob--W/8b5adedd84c0d36aba64
wikipedia
standart formdata not of body
What you need to do? You want send formdata or recieve it at js?
You can try to use my polyfill, but I have not tested it.
sample:
var data = new RawFormData();
data.append("key","value")
data.append("key", new Blob("test"), "my file.txt");
data.getOutputDeferred().then(function(formData){
var xml = new XMLHttpRequest();
xml.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + data.getBoundry());
xml.setRequestHeader("Content-Length", formData.length);
xml.open(method, url);
xml.send(formData);
});
code:
/**
* #constructor
*/
RawFormData = function () {
this._promises = [];
this._boundry = this.makeBoundary();
};
/**
* #return {string}
*/
RawFormData.prototype.getBoundary = function () {
return this._boundry;
}
/**
* #return {string}
*/
RawFormData.prototype.makeBoundary = function () {
return 'MyBoundary' + window.btoa(Math.random().toString()).substr(0, 12);
};
/**
* #param {string} name
* #param {string|number|File|Blob|boolean|null|undefined} val
* #param {string=} filename
*/
RawFormData.prototype.append = function (name, val, filename) {
var prom = null;
if(val instanceof File || val instanceof Blob){
prom = this.readAsBinaryString(val).then(function(base64){
var contentType = val.type || 'application/octet-stream';
var result = '--' + this._boundry + '\r\n' +
'Content-Disposition: form-data; ' +
'name="' + name + '"; filename="' + this.encode_utf8(filename || "blob") + '"\r\n' +
'Content-Type: ' + contentType + '\r\n\r\n' +
base64 + '\r\n';
return result;
}.bind(this))
}else{
prom = new Promise(function(resolve){
return '--' + this._boundry + '\r\n' +
'Content-Disposition: form-data; ' +
'name="' + this.encode_utf8(name) + '"\r\n\r\n' +
this.encode_utf8(val) + '\r\n'
}.bind(this));
}
this._promises.push(prom);
return prom;
};
/**
* #return {File|Blob} blob
* #return {Promise<string>}
*/
RawFormData.prototype.readAsBinaryString = function (blob) {
var reader = new FileReader();
return new Promise(function(resolve,reject){
var binStringCallback = function (e) {
resolve(e.target.result);
};
var arrBufferCallback = function (e) {
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
resolve(binary);
};
reader.onerror = reader.onabort = function () {
resolve(null);
};
if (typeof reader.readAsBinaryString != "undefined") {
reader.onload = binStringCallback;
reader.readAsBinaryString(blob);
} else {
reader.onload = arrBufferCallback;
reader.readAsArrayBuffer(blob);
}
});
};
RawFormData.prototype.encode_utf8 = function( s ){
return unescape( encodeURIComponent( s ) );
}
RawFormData.prototype.getOutputDeferred = function () {
return Promise.all(this._promises).then(function (rows) {
var output = '--' + this._boundry + '\r\n';
rows.forEach(function(row) {
output += row;
});
output += '--' + this._boundry + '\r\n';
return output;
}.bind(this));
};
I work with Twitch API. If the streamer streams I work with with property "Stream". But If he's not streaming, then I need refer to another link. Then I again turn to the function of the getJSON and pass there the necessary API link. And I'm working with her. However, the loop does not work as it should. It takes the last streamer out of the "channels" array, but it should all those who do not stream. I can not understand what the problem is. Help...
JSFiddle: https://jsfiddle.net/e7gLL25y/
JS Code:
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onload = function() {
if(xhr.readyState == 4 && xhr.status == "200") {
callback(JSON.parse(xhr.responseText));
}
};
xhr.send();
};
var channels = ["summit1g", "esl_RuHub_CSGO", "Starladder1", "Senpai_Frozen", "tehvivalazz", "ESL_CSGO"];
var client_id = "hx3dea4ifwensxffoe8iwvekwvksnx";
var section = document.getElementById("main-section");
var streamer = [];
for(var i = 0; i < channels.length; i++) {
var url_channels = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=" + client_id;
var url_streams = "https://api.twitch.tv/kraken/streams/" + channels[i] + "?client_id=" + client_id;
getJSON(url_streams, function(response) {
if( response["stream"] !== null ) {
streamer[i] = document.createElement("div");
streamer[i].className = "streamer";
streamer[i].innerHTML = "<a target='_blank' href='" + response.stream.channel["url"] +
"'><img id='streamer-image' src='" +
response.stream.channel["logo"] +
"' alt='Av' /><h2 id='streamer-name'>" +
response.stream.channel["name"] +
"</h2><p id='stream-status'>" +
response.stream["game"] + "</p></a>";
section.appendChild(streamer[i]);
} else {
getJSON(url_channels, function(r) {
streamer[i] = document.createElement("div");
streamer[i].className = "streamer";
streamer[i].innerHTML = "<a target='_blank' href='" + r["url"] +
"'><img id='streamer-image' src='" +
r["logo"] +
"' alt='Av' /><h2 id='streamer-name'>" +
r["name"] +
"</h2><p id='stream-status'>Offline</p></a>";
section.appendChild(streamer[i]);
});
}
});
}
You are having a common misconception about JavaScript contexts.
Refer to my answer here to see details about this problem: https://stackoverflow.com/a/42283571/1525495
Simply, the getJSON response is called after all the array is looped, so i will be the last index in all the responses. You have to create another context to keep the i number so is not increased.
for(var i = 0; i < channels.length; i++) {
var url_channels = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=" + client_id;
var url_streams = "https://api.twitch.tv/kraken/streams/" + channels[i] + "?client_id=" + client_id;
(function(i) {
// i will not be changed by the external loop as is in another context
getJSON(url_streams, function(response) {
// Thingy things...
});
})(i);
}
Ok I'm stuck, I want to create an event in facebook, using javascript facebook api, and I want to load an image on the event cover. I can not figure out how I can do it.
I create an image in a canvas and I can upload to facebook using an sendAsBinnary function
from: https://stackoverflow.com/a/5303242/945521
And this function
Facebook.prototype.postImageToFacebook = function(authToken, filename, mimeType, imageData, message){
try {
showMessage("Creating post...");
// this is the multipart/form-data boundary we'll use
var boundary = '----------RaNdOm_crAPP' + getBoundary();
// let's encode our image file, which is contained in the var
var formData = '--' + boundary + '\r\n';
formData += 'Content-Disposition: form-data; name="source"; filename="' + filename + '"\r\n';
formData += 'Content-Type: ' + mimeType + '\r\n\r\n';
for (var i = 0; i < imageData.length; ++i)
{
formData += String.fromCharCode(imageData[ i ] & 0xff);
}
formData += '\r\n';
formData += '--' + boundary + '\r\n';
formData += 'Content-Disposition: form-data; name="message"\r\n\r\n';
formData += message + '\r\n';
formData += '--' + boundary + '--\r\n';
//var xhr = new XMLHttpRequest();
var xhr = null;
if (window.XDomainRequest) {
xhr = new XDomainRequest();
}
else if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onload = function() {
window.alert("The photo was published successfully!!");
};
showMessage("Sending request...");
xhr.open("POST", "https://graph.facebook.com/me/photos?access_token=" + authToken, true);
if (xhr.setRequestHeader)
xhr.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + boundary);
xhr.sendAsBinary(formData);
} catch (ex) {
stopWaitingSpin();
debugLog(ex);
}
};
and with this
FB.api("/me/events", "POST", {
"name": name,
"start_time": start_time,
//"end_time":end_time,
"description": description,
"location": location,
//"location_id":location_id,
"privacy_type": privacy_type
},
function(response) {
if (response && !response.error) {
var event_id = response.id;
console.log(response);
}
});
I can create a event.
But what need to call to send the image to the cover on event???
Thank's to all
Actually its nowhere mentioned in the documentation yet, but to publish a cover photo on an event you need to call \POST /{event-id} with param cover_url:
{event-id} could be obtained as a result when you created an event.
FB.api("/{event-id}", "POST", {
cover_url: {image-url}
},
function(response) {
console.log(response); // you'll get the response as 'true' or 'false'
});
Small files go smoothly, even when uploading 100 5 Megabyte files at the same time (though it does only handle 5 at a time, queues the rest) but a 150MB file causes the browser to hang several seconds while it initiates.
function start(file) {
var xhr = new XMLHttpRequest();
++count;
var container = document.createElement("tr");
var line = document.createElement("td");
container.appendChild(line);
line.textContent = count + ".";
var filename = document.createElement("td");
container.appendChild(filename);
filename.textContent = file.fileName;
filename.className = "filename";
initXHREventTarget(xhr.upload, container);
var tbody = document.getElementById('tbody');
tbody.appendChild(container);
tbody.style.display = "";
var boundary = "xxxxxxxxx";
xhr.open("POST", "uploader.php");
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
xhr.setRequestHeader("Content-Length", file.size);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) {
if (xhr.responseText != "") {
alert(xhr.responseText); // display response.
}
}
}
}
var body = "--" + boundary + "\r\n";
body += "Content-Disposition: form-data; name='upload'; filename='" + file.fileName + "'\r\n";
body += "Content-Type: application/octet-stream\r\n\r\n";
body += $.base64Encode(file.getAsBinary()) + "\r\n";
body += "--" + boundary + "--";
xhr.sendAsBinary(body);
}
It IS going to take a non-trivial amount of time to slurp in the file's contents, base64 encode it, and then do your string concatenation. In other words: Behaving as expected.