Updating global variable via callback

<p>I have the following function</p><pre><br /><code> var urls = '';<br /> handleFiles(f,function(url){<br /> urls = urls + url + ',';<br /> console.log("urls is " + urls);<br /> });<br /></code><br /></pre><p>I get the url after uploading and update my urls. But my Urls never gets updated, it shows the url of the last file uploaded.</p><p><strong>UPDATE 1</strong> This is my complete code now.</p><pre><br /><code>var urls = '';<br />document.getElementById('question-file-selector').addEventListener('change',handleFileSelect,false);<br /> function handleFileSelect(evt){<br /> var files = evt.target.files; //File list object<br /> // Loop through file list, render image files as thumbnails<br /> for (var i = 0,f;f = files[i];i++){<br /><br /><br /> handleFiles(f,function(url){<br /> urls = urls + url + ',';<br /> console.log("urls is " + urls);<br /> });<br /> // Only process image files<br /> if (!f.type.match('image.*')){<br /> $('#list').append('<img class="file-thumb" src="/static/download168.png"/>');<br /> continue;<br /> }<br /> var reader = new FileReader();<br /><br /> //Closure to capture file information<br /> reader.onload = (function(theFile){<br /> return function(e){<br /> //Render thumbnail<br /> $('#list').append('<img class="thumb" src="'+e.target.result+'" title="'+escape(theFile.name)+'"/>'); <br /> };<br /> })(f);<br /> reader.readAsDataURL(f);<br /> }<br /> }<br /><br />console.log("Url is",urls);` <br /></code><br /></pre><p><em>And my ajax function</em></p><pre><br /><code> //Code for Image upload<br /><br />// Custom jQuery xhr instance to support our progress bar.<br /><br />var xhr_with_progress = function() {<br /> var xhr = new XMLHttpRequest();<br /> xhr.upload.addEventListener("progress",<br /> function(evt) {<br /> if (!evt.lengthComputable) return;<br /> var percentComplete = evt.loaded / evt.total;<br /> $("#progress-bar div.progress-bar").css('width', String(100*percentComplete) + "%");<br /> }, false);<br /> return xhr;<br /> };<br /><br /><br /><br /><br /><br />$.support.cors = true;//For cross origin transfer<br /><br />//Event listners to avoid default drag and drop reaction of browser<br />window.addEventListener("dragover",function(e){<br /> e = e || event;<br /> e.preventDefault();<br />},false);<br />window.addEventListener("drop",function(e){<br /> e = e || event;<br /> e.preventDefault();<br />},false);<br /><br /><br /><br />function handleFiles(file,callback){<br /><br /> var filename = file.name;<br /> $.ajax({<br /> type:'GET',<br /> data:{"filename":file.name, "FileType":"question_file"},<br /> url:'/dashboard/generateuploadurl/',<br /> contentType:"application/json",<br /> dataType:"json",<br /> async:false,<br /> success: function(data){ <br /> if(data.UploadUrl){<br /> console.log("upload url successfully created for " + file.name + " file");<br /> console.log(data.UploadUrl);<br /> handleUpload(data.UploadUrl, file, data.Filename,callback);<br /><br /> }<br /> },<br /> error: function(data){ <br /> console.log("error occured while creating upload url for " + file.name + ' file');<br /> console.log(data);<br /> },<br /> });<br /> } <br />function handleUpload(UploadUrl, file, Filename,callback){<br /> $.ajax({<br /> xhr:xhr_with_progress,<br /> url:UploadUrl,<br /> type:'PUT',<br /> data:file,<br /> cache:false,<br /> contentType:false,<br /> processData:false,<br /> success: function(data){<br /> console.log('http://ift.tt/1mhPyDP'+ Filename);<br /> callback('http://ift.tt/1mhPyDP'+ Filename);<br /> },<br /> error: function(data){ <br /> alert("error occured while uploading " + file.name );<br /> console.log(data);<br /> },<br /> }); <br />}<br /></code><br /></pre><br /><h2>Click here view more answers <a href="%20http://stackoverflow.com/questions/34524330/updating-global-variable-via-callback">http://ift.tt/1Os3Bwt</a></h2>