CODEWITHSUNDEEP
filepicker.io
user1072337
user1072337

Reputation: 12945

Uploading an image with filepicker.IO

I am trying to use the Filepicker IO API to let users upload images. I am trying to duplicate the steps shown in the "get started" video, but I am running into a road block. The Filepicker opens fine, but it doesn't seem to be calling the javascript function (openFilePicker()) I have in the div (when the filepicker settings are set in the div, then it works). Also, after I upload an image, I am not sure how to get the information so I can display it on another page (store it with php, etc..) If you could help me out I would really appreciate it. Here is the code:

<script type="text/javascript">

    function openFilePicker() {

        filepicker.setKey('MYKEYHERE');

        filepicker.pick({
                        mimetypes: ['image/*', 'text/plain'],
                        container: 'window',
                        services:['COMPUTER', 'FACEBOOK', 'GMAIL', 'PICASA', 'DROPBOX', 'INSTAGRAM', 'FLICKR'],
                        },
                        function(FPFile){
                        console.log(JSON.stringify(FPFile));

                        //UPLOAD COMPLETE
                        UpdateHTMLWithUploadedFile(FPFile.url);

                        },
                        function(FPError){
                        console.log(FPError.toString());
                        }
                        );

    }

</script>

<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>


<div class="row margin" id='img-row'>
 <input id="filename" disabled="disabled" class="input-text file-input-value" type="text" style="width: 360px;" value=""/>
  <input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-container="modal" type="filepicker" data-fp-apikey="MYKEYHERE" id='campaign-img-input' onclick="javascript:openFilePicker()">
 </div>

Upvotes: 0

Views: 1178

Answers (1)

brettcvz
brettcvz

Reputation: 2381

You seem to be mixing the documentation on the filepicker.io widgets with that of the filepicker.io javascript api. If you'd like to bind to the onclick event of an object and use the filepicker.pick call directly, you should use a standard button rather than a filepicker input type, i.e.

<button onclick="javascript:openFilePicker()">Choose Image</button>

Upvotes: 1

Related Questions