Add images to Drupal from your mobile device

You can add images to Drupal, but mobile devices don't allow you to upload any photos to image fields. This is something that sort of irked me from time to time in the past, but recently came up for a website project, so I thought it would be good to see if it could be worked around.

HTML5 allows for this, but sadly that's mostly a no go with Drupal 7 at the moment. However, it turns out the fix is nice and easy via the HTML Media Capture method. Add the following snippet of jQuery, so it runs when pages load:

$('div.image-widget-data input[type="file"]').each(function(idx, item) {
  $(item).attr('accept', 'image/*;capture=camera');
});

That will look for <input type="file"> items inside image widgets and add the "accept" attribute This then tells mobile devices they can upload image data and are allowed to grab that from their on-board camera.

To make that a spot simpler on Drupal, you can grab the Image Mobile Camera module from its sandbox on Drupal.org.

Now hit your blog via your tablet or phone (using a browser that supports this - Chrome is fine) and start uploading photos :-)