CODEWITHSUNDEEP
javascriptjqueryselectordropboxdropbox-api
Anthony
Anthony

Reputation: 5433

Reading chosen Dropbox response in JQuery instead of Javascript

I'm installing the Dropbox Chooser (https://www.dropbox.com/developers/chooser) in my web app and the example code is:

<input type="dropbox-chooser" name="selected-file" id="db-chooser"/>
<script type="text/javascript">
    document.getElementById("db-chooser").addEventListener("DbxChooserSuccess",
        function(e) {
            alert("Here's the chosen file: " + e.files[0].link)
        }, false);
</script>

I'd rather use jQuery, however, so I am trying:

$("#db-chooser").on('DbxChooserSuccess',function(event) { 
                alert("Here's the chosen file: " + event.files[0].link)
}

The alert does fire, but event does not contain a files[] node. I did a console.log and couldn't find the data. Is there a different way to do this?

Upvotes: 2

Views: 754

Answers (2)

krishwader
krishwader

Reputation: 11381

I had a similar problem sometime back when I was new to this API. I found a link at that time, which helped me understand a lot of things about this. Here's the link to that.

What the link says is, for accessing the event.files[0], you'd have to check in event.originalEvent, not event. So, your code would look something like this :

$("#db-chooser").on('DbxChooserSuccess',function(event) { 
  alert("Here's the chosen file: " + event.originalEvent.files[0].link)
}

What actually happens is, when an event is initialised, jQuery copies almost all properties of the originalEvent (JS event) and creates its own event wrapper with custom properties. Along with it, it stores the originalEvent as a property so that some left out properties (such as files[0] in your case) can be accessed later. From the jQuery Site :

jQuery’s event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler. Most properties from the original event are copied over and normalized to the new event object.

That's why your files[0] property doesn't exist in jQuery's event. Hope this helps.

PS : There's a lot of nice stuff in that link. Do check it out :)

Upvotes: 2

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21728

As suggested by David Fregoli, try e.originalEvent.files[0].link

http://api.jquery.com/on/#event-handler

Upvotes: 0

Related Questions