Upload directly via a camera (on mobile devices)

This was always possible with Fine Uploader, but I’ve made it a bit simpler starting with 3.6. No changes (just testing) were necessary to ensure this was possible on Android devices, along with the Microsoft Surface Tablet. iOS, however, required a little bit of code.

Previous to 3.6, if you wanted to access the camera for the purposes of uploading from Fine Uploader from iOS devices, you needed to do the following:

  • Set the multiple option to false.
  • Ensure the following value appears in the acceptFiles property of the validation option: “image/*;capture=camera”.

This isn’t particularly difficult to do, but you also need to ensure that the current device is running iOS, since you probably don’t want to disable multiple selection on all browsers.

In 3.6, I added a new camera option. The only property, currently, is ios, which is a boolean (defaulting to false). If you override this value to true, the two items in the above list are handled, but only on iOS devices. I also added a qq.ios() method to the qQuery module, which Fine Uploader uses internally to determine if the current device is running iOS.

So, if you’d like to easily ensure camera access is available in iOS, your Fine Uploader instance would look something like this:

var uploader = new qq.FineUploader({
  element: document.getElementById("myFineUploader"),
  camera: {
    ios: true
  }
});

The downside to setting the ios property of the new camera option to true is that you will not be able to select multiple files at once. This is a limitation of iOS. If you really want to allow users to select multiple files and have camera access, you can create your own <input type="file" accept="image/*;capture=camera"> element, register an onchange handler, and pass the input element to Fine Uploader’s addFiles API method (in your handler). This button will be used exclusively for camera access and the button provided by Fine Uploader would be used for multiple file selection. You would, of course, not set the ios property of the camera option to true in this case. Here’s an example:

<div id="cameraButtonContainer" class="qq-upload-button" style="position: relative; overflow: hidden; direction: ltr; display: none;">
  <div>Camera</div>
  <input id="cameraButton" type="file" name="camera" accept="image/*;capture=camera" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
</div>
<div id="myFineUploader"></div>

 

var uploader = new qq.FineUploader({
  element: document.getElementById("myFineUploader");
});

if (qq.ios()) {
  qq(document.getElementById("cameraButtonContainer")).css({display: 'block'});

  qq(document.getElementById("cameraButton")).attach("change", function() {
    uploader.addFiles(this);
  });
}

I am considering support for multiple Fine Uploader buttons (created and managed by Fine Uploader) in a future version. This would make the above example much easier to implement. See case #819 for details or to voice your opinion/show your support.

If you have any suggestions that may improve this or any other feature, please open up a feature request in the issue tracker.

regards,
Ray Nicholus and the rest of the Fine Uploader team @ Widen Enterprises