title: How to set and re-set dropify default image using jquery?
body: <p>I have a datatable that has multiple columns and 1 column containing images, im trying to show the image inside a dropify input tag using a pop up custom modal that shows up when i click a button that connected to the values of the data in that particular row. How can i properly set the default image of the dropify field properly and re set it when i decided to click away and click at another button in different rows? This is my current codes :</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
  ...
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;td&gt;...&lt;/td&gt;
      &lt;!--the row containing the images --&gt;
      &lt;td&gt;
          &lt;img id="pic" src="url('api/image',['foldername','filename']" style="width:150;height:150"/&gt;
      &lt;/td&gt;
      ....
      &lt;!--the row containing the buttons --&gt;
      &lt;td&gt;
          &lt;a href"#" ... data-image="{{$data-&gt;image}}" &gt;
          ....
      &lt;/td&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The modal to show the image :</p>
  
  <pre><code>&lt;div class="form-group"&gt;
        &lt;label class="control-label col-sm-2" for="pic"&gt;Picture:&lt;/label&gt;
         &lt;div class="col-sm-10"&gt;
              &lt;small&gt;max 650x650&lt;/small&gt;
                   &lt;div&gt;
                         &lt;input type="file" id="image_edit" class="form-control" /&gt;
                    &lt;/div&gt;
                    &lt;p class="errorPicture text-center alert alert-danger hidden"&gt;&lt;/p&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The jquery to set the image :</p>
  
  <pre><code>$(document).on('click', '.show-modal', function(){
    ...
     var imagePath = $IMAGE_PATH;
     $('#image_edit').attr("data-default-file",imagePath);
     $('#image_edit').dropify();
    ...
  
  }
  </code></pre>
  
  <p>The problem i was having :</p>
  
  <ul>
  <li><p>the value default image cannot be retrieved using $(this).data('image');</p></li>
  <li><p>the default image doesnt change when i click on another button on different row</p></li>
  </ul>
  
  <p>How do you properly implement this?</p>