Reset drag-drop div in jquery

[wawane7256]

I am trying to reset and clear the drag-drop div by using function calls, but it not working in my case.
Live Demo : jsFiddle

$('#ace-file-input2').aceFileInput({
  style: 'drop',
  droppable: true,
  container: 'border-1 border-dashed brc-grey-l1 brc-h-info-m2 shadow-sm',
  placeholderClass: 'text-125 text-600 text-grey-l1 my-2',
  placeholderText: 'Drop images here or click to choose',
  placeholderIcon: '<i class="fa fa-cloud-upload-alt fa-3x text-info-m2 my-2"></i>',
  thumbnail: 'large',
  allowMime: 'image/*'
})

function clearDrop() {
  $("body > div > div > div > div.card-body > div > label > a").click();
}

when I calling this clearDrop() div not reset.
Please help how I fix this.

[m3g4p0p]

Hi @wawane7256, not sure why it does not work… but using such lengthy selectors to trigger events doesn’t look like a particularly robust approach anyway TBH. Do you have a link to the plugin documentation to check the API for an alternative?

[wawane7256]

truly I didn’t get any doc file but I can tell you that I got this plugin from here

[Thallius]

How should the fiddle be helpful? You try to click a link which is not in the example.
Why don’t you clear the drag box instead of using a link?
Why don’t you add an id to the link you want to click?
.click() is not clicking the link but it’s the deprecated version of on(‘click’, ….) which adds an eventhandler to the link.
If you want to trigger an action on an element use trigger() function

[m_hutley]

.click is not deprecated. It also doesnt add anything, it’s an action.

That said, nothing is calling the function in question;
the function does run appropriately when called and it is appropriate to call it;
the selector could be better identified as $(".ace-file-input .remove") (EDIT: If i remember to put the quotes there, anyway…)

[m3g4p0p]

@Thallius well if you drag an image into the input box, a small preview is shown with a link / button to remove it, and which the selector does match… so if you then call clearDrop(), the file should get removed.

@wawane7256 I just found you need to dispatch the click event on the <i> element inside the link though… maybe with a selector specific to the file input:

$('.ace-file-input .remove i').click()

Still not an ideal solution IMHO, but if there’s no documentation… oh well. ^^

[wawane7256]

Thank you, it worked…

@m3g4p0p

$('.ace-file-input .remove i').click()