CODEWITHSUNDEEP
javascriptjquerydropzone.js
MisterP
MisterP

Reputation: 467

Access dropzoneJS file's temporary source

I'm using dropzone js in my website and I'd like to access the dropped photo's source used by the plugin. Here's what I mean: within the added file event listener I can easily access the dropped file's name, like 

dropzoneForm.on('addedfile', function(file){
      console.log(file.name);
    });

but looking around within the file object, I can't get the image source used by the plugin to provide the preview. Checking the DOM tree, I did find the .dz-image section, with the image's source used in the preview: 

 <div class="dz-image">
  <img data-dz-thumbnail="" 
    alt="Profilo-Facebook.jpg"
    src="data:image/png;base64,iVBORw0...anN6CQAAAABJRU5ErkJggg==">

So, somewhere the file's name is stored as well as the temp source used by the plugin.
Now, here's my question: how can I access the file source the same way I can access the file name? The purpose is to use the source to populate a second table (I'm using angularJS). I did try several ways to get a source attribute but I keep getting back undefined.
I.e. 

dropzoneForm.on('addedfile', function(file){
      console.log(file.source); // or src, or whatever
    });

doesn't work.
Any help will be greatly appreciated. Thanks.

Upvotes: 1

Views: 1710

Answers (2)

brianc
brianc

Reputation: 475

The way to access it is to find the image by the alt tag value which in this case will be the file name. Here is a function to return the src value. Just call it after success in the dropzone code. It will get the src value for you.

 success: function (file, response) {
 setImageAfterUpload(file); }


function setImageAfterUpload(filename) {
    var imgSrcValue=  $('img[alt="'+ filename.name +'"]').first().prop('src'); //get the src value
 document.getElementById("displayImage").src = imgSrcValue; //set it to an existing img tag on the page
        }

Upvotes: 0

Akshendra Pratap
Akshendra Pratap

Reputation: 2040

The src is actually a Data URI, they allow us to embed small files inline in documents. The format is such that all the data of the image in within the URL, so there is no temporary file. You can use this source if you want as where you would use a normal file uri.

For more info you can check data uri MDN

Upvotes: 2

Related Questions