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 :-)

Comments

i think it would help to define which devices this applies to. i can upload images ok from my Android tablet without this. Will this work with iOS devices that can't browse to files?

Yes, this allows me to add photos (via browsing or via the camera) from iOS. I'm not surprised Android already worked, but I couldn't add pix from my iPhone and that was sort of annoying :-)

photo upload works fine on my site with D7 for Android and iOS6 devices. So your solution allows to capture a photo in addition to uploading one?

Hi I've added this script to my D7 website by copy and pasting this script into a file and then including it in the .info file for the theme. For some reason I'm getting a console error of "Uncaught TypeError: undefined is not a function" so therefore this script isn't working for me.

Any suggestions?

Add new comment