Title: Adding an image by dragging?
Last modified: November 1, 2016

---

# Adding an image by dragging?

 *  [metaglyphics](https://wordpress.org/support/users/metaglyphics/)
 * (@metaglyphics)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/)
 * Is it possible (or perhaps a feature request) to drag an image only the upload
   field, rather than clicking Browse? This would be a fantastic enhancement, if
   it can’t be done now…

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/topic/adding-an-image-by-dragging/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-an-image-by-dragging/page/2/?output_format=md)

 *  Plugin Author [ovann86](https://wordpress.org/support/users/ovann86/)
 * (@ovann86)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8382628)
 * Off the top of my head, it’s natively supported by the code this plugin uses (
   [https://github.com/blueimp/jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload))
   and it largely depends on browser support.
 * I remember disabling it when I first wrote the plugin.
 * I think I did it to simplify and reduce testing/bugs.
 * I’ll have a look to see what happens when it’s enabled.
 *  Plugin Author [ovann86](https://wordpress.org/support/users/ovann86/)
 * (@ovann86)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8382673)
 * OK, it’s definitely do-able with a slight tweak but I’m not sure about the usability
   side of things. Will need to work out how to disable the ‘drop zone’ so users
   know where to drop the file to (some sort of css style and visual affect would
   do) and how to handle misdirected drops – if the users drop the file into another
   area, like the form, and the file is supported by the browser (e.g. an image)
   it’ll move away from the form and may loose all their data.
 * So some investigation and testing required.
 * Check it out on the demo page if you want to see what i mean
 * [http://demo.itsupportguides.com/ajax-upload-for-gravity-forms/single-page-form/](http://demo.itsupportguides.com/ajax-upload-for-gravity-forms/single-page-form/)
    -  This reply was modified 9 years, 7 months ago by [ovann86](https://wordpress.org/support/users/ovann86/).
 *  Thread Starter [metaglyphics](https://wordpress.org/support/users/metaglyphics/)
 * (@metaglyphics)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8382723)
 * That definitely seems to work. Do you have issues with errant drops? In Chrome,
   at least, it seems to work perfectly.
 *  Plugin Author [ovann86](https://wordpress.org/support/users/ovann86/)
 * (@ovann86)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8382774)
 * dropzone is working for me with FF 43 (yup, I’m stuck on an old version) and 
   IE 11.
 * Any thoughts on styling when a user drags and hovers (but hasnt yet released 
   to drop) the image over the upload?
 * It would be good to apply some styling, but it’ll have to be subtle and sympathetic
   pretty much any possible design people could be running. Something like a light
   grey block with a border, maybe words in the middle like ‘drop file here to upload’.
 *  Thread Starter [metaglyphics](https://wordpress.org/support/users/metaglyphics/)
 * (@metaglyphics)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8383096)
 * I would imagine the standard UP would be that box with a dotted border and an
   icon/upload button in the center.
 * [https://www.google.com/search?q=ajax+drop+uploader&source=lnms&tbm=isch&sa=X&ved=0ahUKEwim69a27YjQAhXn0FQKHZ-2A58Q_AUICygE&biw=1468&bih=752](https://www.google.com/search?q=ajax+drop+uploader&source=lnms&tbm=isch&sa=X&ved=0ahUKEwim69a27YjQAhXn0FQKHZ-2A58Q_AUICygE&biw=1468&bih=752)
 * Of course, I don’t think you can do a large drop area like these examples, since
   the uploader is only for one image, then you can press the PLUS icon to duplicate
   it. Though it’d be neat if you could use a drop area and then drag the thumbnails
   around within that box…
 *  Plugin Author [ovann86](https://wordpress.org/support/users/ovann86/)
 * (@ovann86)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8386196)
 * OK, I’ve had a go at applying some styling.
    Ive ended up just applying a border–
   no background – when dropping a file. I’m deliberately going minimal to avoid
   clashing with other designs. People can apply their own CSS if they want.
 * Give it a look again and let me know what you think. Good enough?
 * Applying the style on drag over wasnt as easy as I first thought … required checking
   if the browser can support it, a slight change to the HTML content (the list 
   field needed to be wrapped in a DIV) and some javascript to apply a class on 
   drag over (ie, not ‘hover’ as i first thought).
 * Also, if you’re interested in reordering uploaded files – have a look at this
   other plugin I setup that lets you reorder list columns and rows. I havent tested
   it with images (ie, can you click and drag from the image, or do you have to 
   click outside of the image).
 * [https://en-au.wordpress.org/plugins/gravity-forms-list-field-sortable-rows/](https://en-au.wordpress.org/plugins/gravity-forms-list-field-sortable-rows/)
 *  Thread Starter [metaglyphics](https://wordpress.org/support/users/metaglyphics/)
 * (@metaglyphics)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8387502)
 * I think that looks terrific. And I agree, styling should probably be minimal.
 * I actually have already integrated with your sortable rows fields. The only issue
   I saw was that it doesn’t work with the Gravity Forms Custom Post field. So what
   I had to do was combine your two plugins, applied to a standard list field, and
   then add a function to the site like this:
 *     ```
       //Save Repeating Images to Custom Field
       add_filter( 'gform_post_data_8', 'set_bulletin_images', 10, 3 ); //8 is my form number
       function set_bulletin_images( $post_data, $form, $entry ) {
           $list_field = GFFormsModel::get_field( $form, 14 ); //14 is the Ajax Upload list field
   
           $post_data['post_custom_fields']['wpcf-bulletin-images'] = array_map( 'trim', explode( ',', $list_field->get_value_export( $entry, '14' ) ) );
   
           return $post_data;
       }
       ```
   
 * This works, and it’s not too hacky. Though it would be great if your plugin combo
   could be applied to a post field (custom field) for creating custom posts. Right
   now, something about that combination breaks the sorting feature.
 *  Thread Starter [metaglyphics](https://wordpress.org/support/users/metaglyphics/)
 * (@metaglyphics)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8392553)
 * I see you’ve got a popup that alerts people to a problem if they try to upload
   multiple files. Smart solution. I wonder if there’s a way to make the dropzone
   allow for multiple images to be dropped and treat that as a repeat in the backend.
 *  Plugin Author [ovann86](https://wordpress.org/support/users/ovann86/)
 * (@ovann86)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8393020)
 * Yea – I think that should be the ultimate goal.
    Some sort of logic that says‘
   if results “done” for current row – create new row’. It’s also currently not 
   working correctly when someone tries to drop a file on top of an already uploaded
   file. At first I thought I could just remove the existing and replace – but then
   I thought it may not be the intended experience for all users. Ie, they might
   get upset when the file they just uploaded is replaced. The ‘create new row’ 
   fixes that for list fields, but not the single field. And just a note for me 
   to remember later – doing this would need to honour list row limits !
 *  Thread Starter [metaglyphics](https://wordpress.org/support/users/metaglyphics/)
 * (@metaglyphics)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8393645)
 * Yes, it looks like, if you drag an image onto a field that’s already been filled,
   it uploads the second image into the same spot. But I imagine if you submit, 
   it gets confused… Maybe the logic is to disable the drop area if there’s something
   already in it.
 * Ideally, yeah, if there were a single drop area regardless of whether it’s a 
   single image field or a repeating one, then the backend could handle the duplication
   of fields.
 *  Plugin Author [ovann86](https://wordpress.org/support/users/ovann86/)
 * (@ovann86)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8398021)
 * OK – I’m going to push out an upload later today with the drag and drop support.
 * I haven’t got the time to work on the multi-file uploads but think it’ll be a
   cool feature and will keep this open as a reminder.
 * Let me know how you go with it.
    -  This reply was modified 9 years, 7 months ago by [ovann86](https://wordpress.org/support/users/ovann86/).
 *  Thread Starter [metaglyphics](https://wordpress.org/support/users/metaglyphics/)
 * (@metaglyphics)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8421576)
 * New issue: Now when I save the image url, it appears like this:
 * [{“Select an Image”:”[http://mydomain.com/wp-content/uploads/gravity_forms/8-8f715538807f30765a031ec50b2aa24e/11/2016/image%20%286%29.jpg&#8221](http://mydomain.com/wp-content/uploads/gravity_forms/8-8f715538807f30765a031ec50b2aa24e/11/2016/image%20%286%29.jpg&#8221);}
 * Rather than simply the URL. I think this is new with the latest update.
 *  Plugin Author [ovann86](https://wordpress.org/support/users/ovann86/)
 * (@ovann86)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8422517)
 * hmm that’s odd.
 * What does ‘select an image’ mean to you? is it the column/field label or something
   you’ve applied to the field?
 * Exactly what do you mean by ‘save the image url’ do you mean, without submitting
   the form, if you right-click on an uploaded field that’s the name of the file?
 *  Thread Starter [metaglyphics](https://wordpress.org/support/users/metaglyphics/)
 * (@metaglyphics)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8423070)
 * That’s my label for the field. Suddenly, it’s saving that and pouring everything
   in quotes and brackets.
 *  Thread Starter [metaglyphics](https://wordpress.org/support/users/metaglyphics/)
 * (@metaglyphics)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/#post-8521079)
 * More Info. If I add an image, it used to save the path to the image, but now 
   it saves content like this:
 * a:2:{i:0;a:1:{s:5:”Image”;s:130:”[http://theleelist.wpengine.com/wp-content/uploads/gravity_forms/7-1346e50beefc82fed7149d444e819fe9/12/2016/pool-time%20%282%29.jpg&#8221](http://theleelist.wpengine.com/wp-content/uploads/gravity_forms/7-1346e50beefc82fed7149d444e819fe9/12/2016/pool-time%20%282%29.jpg&#8221);;}
   i:1;a:1:{s:5:”Image”;s:131:”[http://theleelist.wpengine.com/wp-content/uploads/gravity_forms/7-1346e50beefc82fed7149d444e819fe9/12/2016/front-page-1600-1000.jpg&#8221](http://theleelist.wpengine.com/wp-content/uploads/gravity_forms/7-1346e50beefc82fed7149d444e819fe9/12/2016/front-page-1600-1000.jpg&#8221);;}}
 * All in a single field.

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/topic/adding-an-image-by-dragging/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-an-image-by-dragging/page/2/?output_format=md)

The topic ‘Adding an image by dragging?’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/ajax-upload-for-gravity-forms_76bac9.
   svg)
 * [Ajax Upload for Gravity Forms](https://wordpress.org/plugins/ajax-upload-for-gravity-forms/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ajax-upload-for-gravity-forms/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ajax-upload-for-gravity-forms/)
 * [Active Topics](https://wordpress.org/support/plugin/ajax-upload-for-gravity-forms/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ajax-upload-for-gravity-forms/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ajax-upload-for-gravity-forms/reviews/)

 * 23 replies
 * 2 participants
 * Last reply from: [ovann86](https://wordpress.org/support/users/ovann86/)
 * Last activity: [9 years, 4 months ago](https://wordpress.org/support/topic/adding-an-image-by-dragging/page/2/#post-8663697)
 * Status: not resolved