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

Share Improve this question Follow edited Apr 16, 2017 at 16:05 Masthan asked Mar 26, 2017 at 12:47 MasthanMasthan 69511 gold badge1111 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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