Plupload: How to upload directly from a camera (on mobile devices)

Question

I'm using Plupload to let users upload images to my WordPress website.

When a user clicks on 'Select files' and chooses an image from their mobile phone's gallery, the image's filename appears on screen. The user is then free to click on 'Upload files' to start the upload.

My problem

When a user clicks on 'Select files' and takes a photo with their camera phone, the image's filename doesn't appear on screen. In this case, when the user now tries clicking on 'Upload files', nothing happens. How can I resolve this?

Notes

The problem doesn't happen at all when I use my tablet or desktop.

Update

My testing was done using two mobile devices:

1. Chrome on a Samsung Galaxy S4 Mini running Android 4.2.2
2. Chrome on a Samsung Galaxy Ace II running Android 4.1.2

Here's a demo of the code I'm using: http://jsfiddle.net/djydce90/

My script

var uploader = new plupload.Uploader({
  runtimes : 'html5,flash,silverlight,html4',
  browse_button : 'pickfiles',
  container: document.getElementById( 'container' ),
  url : "/examples/upload",
  filters : {
    max_file_size : '10mb',
    mime_types: [
      {title : "Image files", extensions : "jpg,gif,png"},
      {title : "Zip files", extensions : "zip"}
    ]
  },
  flash_swf_url : '/plupload/js/Moxie.swf',
  silverlight_xap_url : '/plupload/js/Moxie.xap',
  init: {
    PostInit: function() {
      document.getElementById('filelist').innerHTML = '';

      document.getElementById('uploadfiles').onclick = function() {
        uploader.start();
        return false;
      };
    },
    FilesAdded: function(up, files) {
      plupload.each(files, function(file) {
        document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
      });
    },
    UploadProgress: function(up, file) {
      document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
    },
    Error: function(up, err) {
      document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
    }
  }
});

uploader.init();

My HTML

<script src="https://rawgit.com/moxiecode/plupload/master/js/plupload.full.min.js"></script>
<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
<br />
<div id="container">
  <a id="pickfiles" href="javascript:;">[Select files]</a>
  <a id="uploadfiles" href="javascript:;">[Upload files]</a>
</div>

Ref: http://www.plupload.com/examples/core

Answer 1

The problem comes from method of capturing images.Android gives you a bitmap object when you take a pic,so you need to upload that bitmap instead of a file.When you select a file from your memory it sends you that path but in capturing you give that photo data in details . so you need to upload that photo data instead of uploading a file.I don't know exactly can pluplaoad handle this or no but you can go through this link to get a sight of it.

• Showing Plupload Image Previews Using Base64-Encoded Data Urls