How do I reset/clear the filepicker.io drag/drop widget?

Question

Our application updates a hidden field with the value we need when the drag/drop widget fires the onchange. We use that file for our further processing.

Currently, we simply hide the div that houses the drag/drop widget until we need it again. Unfortunately, when we show that div again, the widget keeps the filename of the last uploaded image so it is confusing to the user. It appears as though they will be uploading the same file again when in reality no file will be uploaded.

How can I tell the drag/drop widget to reinitialize or clear itself?

score 1 · Accepted Answer · edited Dec 04 '12 at 19:51

1

It's a bit of a hack, but you can fire a click event on the .cancel div and it will clear the widget.

Here's some pseudo-code to get the DOM-element and click it: $( 'select span with X in it' ).get( 0 ).click();

edited Dec 04 '12 at 19:51

aezell

1,532
14
17

answered Dec 01 '12 at 01:02

brettcvz

2,371
1
13
14

I tried to do that. However, it just launches the filepicker.io chooser dialog and doesn't clear the drag/drop widget. I've confirmed I'm getting the correct element with my jQuery selector. Calling `.click()` on it doesn't appear to have the same affect as actually clicking with the mouse. – aezell Dec 04 '12 at 16:05
I was able to reproduce - jQuery seems to be using strange event bubbling logic. If you call .click() on the DOM object rather than the jQuery object it works – brettcvz Dec 04 '12 at 19:22

score 0 · Answer 2 · answered Mar 26 '13 at 18:03

Here is a hack that leverages the data-fp-class attribute:

<input id="myInput" type="filepicker-dragdrop" data-fp-button-class="btn btn-primary btn-small" data-fp-class="filepicker-dragdrop" data-fp-apikey="urKey" data-fp-mimetypes="image/png,image/jpeg" data-fp-container="modal" data-fp-maxsize="204800" data-fp-services="COMPUTER,URL,DROPBOX,FACEBOOK,GOOGLE_DRIVE,FLICKR,INSTAGRAM,PICASA,BOX">

Once the upload completes and switches to the chosen file with the 'x' to the right, you can remove the selection by doing:

$('.filepicker-dragdrop span').get(0).click();

They really need an API to do this, as this is pretty common (detect an error need to remove)

How do I reset/clear the filepicker.io drag/drop widget?

2 Answers2