I have a dropify(drag and drop) area in my web site. I need fill the drag and drop area with existing image so users can view old image and can change if they want. Possibilities 1. Is there any way to generate trigger with old file name. so that dropify JavaScript can detect the event and can handle rest 2. Is there any way to explicitly set image on the dropify area from another JavaScript file.

code:

<pre>

<div class="form-group" id="id_photo_group">
      <label >Photo*</label>
      <input type="file" class="dropify" data-height="300" id="id_member_photo" name="n_member_photo"/>
</div> 
</pre>

I have a dropify(drag and drop) area in my web site. I need fill the drag and drop area with existing image so users can view old image and can change if they want. Possibilities 1. Is there any way to generate trigger with old file name. so that dropify JavaScript can detect the event and can handle rest 2. Is there any way to explicitly set image on the dropify area from another JavaScript file.

code:

<pre>

<div class="form-group" id="id_photo_group">
      <label >Photo*</label>
      <input type="file" class="dropify" data-height="300" id="id_member_photo" name="n_member_photo"/>
</div> 
</pre>

• javascript
• jquery

2 Answers 2

Add input field as normal

Html file

 <input type="file"  name="n_service_img" id="id_service_image" />

From jquery file add class "dropify" and set its attributes and call dropify function

jquery file

      $("#id_service_image").addClass('dropify');
             $("#id_service_image").attr("data-height", 300);
             $("#id_service_image").attr("data-default-file", "../img/ourservices/MEDICAL-SERVICES.jpg");
             $('.dropify').dropify();

Now can put default image using data-default-file variable

<input type="file" class="dropify" data-default-file="url_of_your_file" />

defaultFile: If there is a default file on the input. You can use options when you use the plugin or directly data-default-file="url_of_your_file" on you DOM element (it's remended).

Source