CODEWITHSUNDEEP
javascriptjqueryhtmldropbox-api
Javacadabra
Javacadabra

Reputation: 5758

Trying to link the Dropbox File Upload API to a basic HTML form file Input

I am trying to use the Dropbox Javascript Chooser to allow users to choose files within their dropbox accounts that they can upload on a form on my website.

So far I've gotten the button displaying and I can go into my dropbox and select a file. However what I haven't figured out is how I can link the file I've selected to one of the forms file inputs.

Basically, the functionality I'd be looking to achieve is the same as the standard type=file input but the user selects the file from Dropbox instead.

This is my code which is not working for me, I've checked in the Dev console and can't see any errors being rendered. 

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxx000111"></script>
    <script>

        $(document).ready(function () {
            options = {
                // Required. Called when a user selects an item in the Chooser.
                success: function (files) { //Place it in the file upload
                    alert("Here's the file link: " + files[0].link)
                    $('#fileToUpload')[0].files[0] = files[0].link;
                }
            };
            var button = Dropbox.createChooseButton(options);
            document.getElementById("buttonholder").appendChild(button);
        });

    </script>
    <div id="buttonholder"></div>
    <form>
            My File: <input type="file" name="fileToUpload" id="fileToUpload">
    </form>

Does anyone have any suggestions as to where I am going wrong ? I've also tried selecting a file and emailing the form contents to myself but this does not work either. I just can't seem to figure out how to integrate the Dropbox API with the HMTL form.

Upvotes: 0

Views: 1349

Answers (1)

user94559
user94559

Reputation: 60143

The Chooser gives you back a URL, so you'll want to put that into a field in your form, and then on the server you'll need to extract the URL and download the file contents. (An <input type="file"> tag does not accept a URL but instead needs to be filled in with a file from the local file system.)

Upvotes: 1

Related Questions