I don’t often get into highly technical stuff on this blog (I generally answer long-form over at Stack) but this problem has been dogging me for years and I wanted to share the solution.

In context, let me start out by saying that my big project right now (ours – shout out to Wang.Media and the rest of the team at JaredWilliam) – is the build-out of a social-network.  One of the things we’re working on now is image upload, and this is certainly not the same time I’ve worked with images and file upload, but I decided this time to cut it elegant.  In this, I’m not alone – I wanted multiple image upload, progress indicator, and, of course, file checking.  I’m putting it all in a database.  That’s the easy part.

This network is interested in color, and I developed a program that will parse through the image file and build a palette out of the colors it finds.  Again, done. (I’m not brushing off those who might be wondering how to do these – just leave a comment).  The thing is, I was able to do all of these.  But as a UI matter, I had a problem.

The site seeks to categorize the images that are uploaded for site-wide galleries and search reasons.  The thing is, most users are very lazy – the idea of going back and tagging your information is just beyond many users.  For other sites, like Facebook, you just tag at leisure.  If you’ve ever used another site with a bulk-uploader, they might have you name a series or a gallery first, but in general, you are left on your own.  If you want to tag or need to, you don’t.  Never thought about this, actually.  But the reason has to do with synchronicity.  The thing is, if you’ve just uploaded one file, fine – pop the image back up and go with it.  But if you’re uploaded several, what do you do?  We could wait to the end and pop them all up – definitely considered this.  But it’s not ideal because now you’re wasting the users time when the item is up.

So, on a UI level, I needed to upload multiple images and then, when one was done uploading, it would pop up and you could edit and tag it.

I then added a div below whenever each new images came in, they would go into this popup so you could edit them as well.

The problem came up when the images came in at the same time.  Here’s why – and this is where it gets tricky – when you’re sending the XHR request up at the same time, you cross wires.  So if they both load at exactly the same moment, the popup pops up for the wrong image or, worse, not at all.  This is exhausting to say the least.  So, I did this:

onComplete: function(id, fileName, responseJSON){
 if (open == 0) {
  alignPopup('popup');
  aj('f=ajaxPhotosManager&id='+responseJSON['fileID'],'popup');
 }
 else {
  var newdiv = document.createElement('div');
  var divIdName = 'photoManager'+responseJSON['fileID'];
  newdiv.setAttribute('id',divIdName);
  document.getElementById('popup').appendChild(newdiv);
   if (req.readyState == 4 || req.readyState == 0)
  aj('f=ajaxPhotoManager&id='+responseJSON['fileID'],'photoManager'+responseJSON['fileID']);
   var newdiv2 = document.createElement('div');
   newdiv2.innerHTML = 'Update '+ fileName + '' ;
    document.getElementById('updateList').appendChild(newdiv2);
 }
 }

Here, we add a div below the uploader that will, whenever a new file goes in, create a link to open the popup to edit the image.

Automated, but not pushy.

And maybe people will do a better job tagging their photos!  We’ll see – will link to when the site is live next month or so.