title: I can't trigger a preview when dropping an image into an input field
body: <p>I have a drop box to upload images to Cloudinary, which works fine, but I can't trigger a preview function when the images are dropped. </p>
  
  <p>This is the HTML code:</p>
  
  <pre><code>&lt;div class="card text-muted"&gt;
      &lt;label id="upload" for="dropboxInput" class="card-block text-muted"&gt;
         &lt;input type="file" name="file" data-url="CLOUDINARY_URL"
                data-form-data="{CLOUDINARY STUFF}" 
                data-cloudinary-field="file" class="cloudinary-fileupload"
                multiple="multiple" style="display:none" id="dropboxInput"&gt;
    &lt;/label&gt;                        
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the code to trigger the function, which works fine when selecting the images after clicking the drop box:</p>
  
  <pre><code>var dropboxInput = document.getElementById("dropboxInput");
  dropboxInput.onchange = function(){readURL(this)};
  </code></pre>
  
  <p>I have tried this, but it seems that is not getting the dropboxInput.value. The images, once dropped are uploaded:</p>
  
  <pre><code>var dropbox = document.getElementById("dropbox");
  dropbox.ondrop = function(){
      readURL(dropboxInput);
  };
  </code></pre>
  
  <p>This is the preview function, which handles the preview:</p>
  
  <pre><code>function readURL(input){
     if(input.files){
  
         for (i = 0; i &lt; input.files.length; i++) {
             var reader = new FileReader();
  
             reader.onload = function(event) {
                   $($.parseHTML('&lt;img&gt;')).attr('src', event.target.result).appendTo(preview);
             }
          reader.readAsDataURL(input.files[i]);
          }
     }    
  }
  </code></pre>
  
  <p>In the input field CLOUDINARY STUFF is this:</p>
  
  <pre><code>&lt;input type="file" name="file" data-url="https://api.cloudinary.com/v1_1/MYACCOUNT/auto/upload" 
  data-form-data="{&amp;quot;eager&amp;quot;:&amp;quot;c_limit,h_768,w_1024&amp;quot;,&amp;quot;signature&amp;quot;:&amp;quot;1f5c7426f428ebd02bb45180767fd920716cc59e&amp;quot;,&amp;quot;api_key&amp;quot;:&amp;quot;185516472314647&amp;quot;,&amp;quot;eager_async&amp;quot;:true,&amp;quot;callback&amp;quot;:&amp;quot;/cloudinary_cors.html&amp;quot;,&amp;quot;tags&amp;quot;:&amp;quot;Punta de Vistalegre,2&amp;quot;,&amp;quot;use_filename&amp;quot;:true,&amp;quot;timestamp&amp;quot;:&amp;quot;1527959323&amp;quot;}" 
  data-cloudinary-field="file" class="cloudinary-fileupload"
  multiple="multiple" style="display:none" id="dropboxInput"&gt;
  </code></pre>
  
  <p>When the images are droped, I don't find the way to pass them to the readURL() function.   </p>
  
  <p>Thanks in advance for any help.</p>