upload photos at a time

Question

I'm trying to upload more than photo at the same with object XMLHttpRequest.

 if(files.length <= 6) {   

    for(var i = 0; i < files.length; i++)   {

      var formData = new FormData();
      formData.append('action', 'uploadPhoto');
      formData.append('photo_id', id);
      formData.append('file'+id, files[i]);
      UploadFile(formData, id);   } 

    }

 function UploadFile(formData, id)  {   

 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'uploadPhoto.php', false);   
 xhr.onload = function (){};   

xhr.send(formData); }

The problem is that the photo upload is repeat the same. I think this happens because the loop continue and the photo no finish of upload.

Your id variable is the same on each loop. Where is that being set? — Paul Stanley, May 19 '13 at 15:42
Also in most cases, I wouldn't be implementing the XMLHttpRequest, it might just be quicker to use a js plugin such as Uploadify and this functionality would be sorted already. — Paul Stanley, May 19 '13 at 15:45
Simply create ONE `FormData` object, append all of your files to it, and send that ONE `FormData` object via XHR. — Ray Nicholus, May 19 '13 at 16:55

score 0 · Answer 1 · answered May 19 '13 at 17:01

As from the comments, your id is a random number, which im geussing needs to be random on each iteration. You have set it outside of the for loop however, so its going to be overwritten on each loop, hence you only ever seeing one file uploaded. Depending on the random funciton you are using, there is a possiblity you could generate the same number again, and have files become randomly overwritten in the same fashion you are doing here.

Here I have employed a timestamp technique instead, which will be always unique at the time you do it. Try this :

if(files.length <= 6) {   

for(var i = 0; i < files.length; i++)   {

  var id =Date().getTime();
  var formData = new FormData();
  formData.append('action', 'uploadPhoto');
  formData.append('photo_id', id);
  formData.append('file'+id, files[i]);
  UploadFile(formData, id);   } 

}
 function UploadFile(formData, id)  {   

 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'uploadPhoto.php', false);   
 xhr.onload = function (){};   

xhr.send(formData); }

The OP asked how multiple files can be sent in the same request, per my understanding of the question. Your answer doesn't provide that behavior. — Ray Nicholus, May 19 '13 at 17:42
He said the *problem* is that the photo is the same. He said hes trying to do it "at the same (time)", not with the same xmlhttprequest. — Paul Stanley, May 19 '13 at 22:04
What he said was "I'm trying to upload more than photo at the same with object XMLHttpRequest." To me, this means that he is trying to send all photos using one XHR. I guess we'll have to get clarification from the OP. — Ray Nicholus, May 19 '13 at 22:54

score 0 · Answer 2 · edited May 23 '17 at 12:28

Call uploadPhoto() outside of (after) the for loop, not at the end of each loop iteration. Also, move the FormData declaration outside of the loop.

I've also modified your original "photo_id" parameter to include the loop counter value so you will have a different photo_id parameter key for each file.

Additionally, I changed the last parameter of your call to xhr.open to "true". Your code was making synchronous xhr calls. This is usually a bad idea. I switched the last parameter to "false", making your xhr call asynchronous.

Finally, I removed the id parameter of your uploadPhoto function, since you don't use it anyway.

I also changed the first letter of your uploading function to lowercase. You should only start a function name with an uppercase letter if it is a constructor function. This is a well accepted convention. Your code should look something like this:

if(files.length <= 6) {   
    var formData = new FormData();

    for(var i = 0; i < files.length; i++)   {
      var id = getUuid();

      formData.append('action', 'uploadPhoto');
      formData.append('photo_' + i + "_id", id);
      formData.append('file'+id, files[i]);
    } 

    uploadFile(formData);   
}

 function uploadFile(formData)  {   
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'uploadPhoto.php', true);   
    xhr.send(formData); 
}

function getUuid() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
      return v.toString(16);
   });
}

The getUuid function comes from https://stackoverflow.com/a/2117523/486979. Note that it generates a version 4 UUID.

You're making an assumption here that the php script is capable of taking an array of photo data rather than just a single photo data. — Paul Stanley, May 19 '13 at 21:51
@Octopi You're making an assumption that PHP is involved at all. Who said anything about PHP or even server-side code? — Ray Nicholus, May 19 '13 at 22:51
`xhr.open('POST', 'uploadPhoto.php', false);` <- from the OP — Paul Stanley, May 20 '13 at 07:41
Ah, I see. Still, if he wants to send multiple photos, doing so in the same request should be trivial to handle server side. Also, you've made me look at the OP's code again which reveals that he is using a synchronous xhr call. Almost always a bad idea. I'll add that tidbit to my answer as well. — Ray Nicholus, May 20 '13 at 12:37

upload photos at a time

2 Answers2