How to upload photo from gallery in Android to a website with Dropzonejs?

问题

Im using dropzonejs to upload photos to my website. The problem is, when I click dropzone to upload, it won't show 'Gallery' as an option as seen in this image :

enter image description here

How to add Gallery as an option?

回答1:

As a matter of fact, in order to show the gallery app to android user, your <input> element must have two properties explicitly defined:

type which is file and accept which could be, as mentioned, image/* (or any image-related mime-type)

A way to achieve this is by instantiating the Dropzone object yourself rather than relying on the dropzone class of a <form> :

// removes the magical auto discovery of dropzone forms
Dropzone.autoDiscover=false;

// add accepted mimeTypes options (comma separated string)
// myDz is the camelCased version of the id of the element that will be "dropzoned"
Dropzone.options.myDz = { acceptedFiles: 'image/*'};

$(function(){
  // instantiate dropzone on element with #my-dz id
  // if no action in the form or applying dropzone on a non form (ie a div),
  // you should at least pass the url in an object as the second parameter
  dz = new Dropzone('#my-dz' /*, {url:"/my-upload-url"}*/); 
});

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="ctn">
      <h1>Test Dropzone Android</h1>
      <form action="#" method="post" class="dropzone" id="my-dz"></form>
    </div>
  </body>
</html>

You could find some useful (although a little dated) information here: Uploading photos from mobile web app

PS: Thanks to John who helped me to gather those informations

回答2:

I've had the same issue with plupload and I fixed with:

document.querySelectorAll('input[type=file]')[0].setAttribute("accept","image/*");

回答3:

You can edit dropzone.js file and after line 540: _this.hiddenFileInput.setAttribute("type", "file"); Insert code: _this.hiddenFileInput.setAttribute("accept", "image/*");

来源：https://stackoverflow.com/questions/27654005/how-to-upload-photo-from-gallery-in-android-to-a-website-with-dropzonejs

标签

javascript

android

dropzone.js