Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
101
rated 0 times [  103] [ 2]  / answers: 1 / hits: 22552  / 7 Years ago, wed, august 16, 2017, 12:00:00

What i want to do is to upload file on server, then get URL of uploaded file and preview it. Files can be more than one. For that purpose i have written following code:



 let filesURL=[];
let promises=[];
if(this.state.files_to_upload.length>0) {

for(let i=0; i<this.state.files_to_upload.length; i++) {
promises.push(this.uploadFilesOnServer(this.state.files_to_upload[i]))
}

Promise.all(promises).then(function(result){
console.log(result);
result.map((file)=>{
filesURL.push(file);
});
});
console.log(filesURL);
}
const uploadedFilesURL=filesURL;
console.log(uploadedFilesURL);


console.log(filesURL); give me the values returned by Promise.all.

And i want to use these values only when Promise.all completes properly. But, i am facing problem that lines console.log(uploadedFilesURL); excutes first irrespective of Promise.all and give me undefined values.I think i am not using promises correctly, can anyone please help me?

uploadFileOnServer code is:



uploadFilesOnServer(file)
{
let files=[];
let file_id='';

const image=file;
getImageUrl().then((response) => {
const data = new FormData();
data.append('file-0', image);
const {upload_url} = JSON.parse(response);
console.log(upload_url);

updateProfileImage(upload_url, data).then ((response2) => {
const data2 = JSON.parse(response2);
file_id=data2;
console.log(file_id);
files.push(file_id);
console.log(files);
});
});
return files;
}

More From » ajax

 Answers
3

No, promise is asynchronous and as such, doesn't work the way you think. If you want to execute something after a promise completed, you must put it into the promise's then callback. Here is the example based on your code:



uploadFilesOnServer(file) {
let files=[];
let file_id='';

const promise = getImageUrl()
.then((imageUrlResponse) => {
const data = new FormData();

data.append('file-0', file);

const { upload_url } = JSON.parse(imageUrlResponse);

console.log(upload_url);

return updateProfileImage(upload_url, data);
})
.then ((updateImageResponse) => {
file_id= JSON.parse(updateImageResponse);

console.log(file_id);

files.push(file_id);

console.log(files);

return files;
});

return promise;
}

let filesPromise = Promise.resolve([]);

if(this.state.files_to_upload.length > 0) {
const promises = this.state.files_to_upload.map((file) => {
return this.uploadFilesOnServer(file);
});

filesPromise = Promise.all(promises).then((results) => {
console.log(results);

return [].concat(...results);
});
}

// This is the final console.log of you (console.log(uploadedFilesURL);)
filesPromise.then((filesUrl) => console.log(filesUrl));


A good book to read about ES6 in general and Promises in particular is this book Understanding ECMAScript 6 - Nicholas C. Zakas



Edit:



Here is an simple explanation of the example code:




  1. The uploadFilesOnServer is a function that takes a file, upload it and will return the file URL when the upload completes in the future in the form of a promise. The promise will call its then callback when it gets the url.


  2. By using the map function, we create a list of url promises, the results we've got from executing uploadFilesOnServer on each file in the list.


  3. The Promise.all method waits for all the promises in the list to be completed, joins the list of url results and create a promise with the result which is the list of urls. We need this because there is no guarantee that all of the promises will complete at once, and we need to gather all the results in one callback for convenience.


  4. We get the urls from the then callback.



[#56749] Monday, August 14, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
yaquelina

Total Points: 517
Total Questions: 101
Total Answers: 96

Location: Egypt
Member since Tue, Jul 6, 2021
3 Years ago
yaquelina questions
;