0

I've written following code in order to implement filepicker.io into my HTML page but somehow I'm not able to do that. Also the firebug console is not showing me any error or warning for it.

I've referred following question for this :

filepicker.io -- easy implementation

Following is the jsFiddle link that I referred :

http://jsfiddle.net/krystiangw/61861wsv/

For your reference following is the code from my HTML file :

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js">
    </script>
    <script>
        $(document).ready(function(){
            filepicker.setKey('AFJvi8ODOSrOayoCb3swoz');
            document.getElementById('filepickerBtn').onclick = selectFile;

            function selectFile(){
            filepicker.pick(
            // picker options
            {
            extension: '.docx',
            },
            onSuccessCallback
            );
            };

            function onSuccessCallback(Blob){
            document.getElementById('postName').textContent = Blob.filename;
            document.getElementById('postlink').textContent = Blob.url;
            document.getElementById('results').textContent = JSON.stringify(Blob);            
            };
        });
        </script>
    </head>
    <body>
      <div class="container">
      <h3>Filepicker example</h3>
      <p>
        <button id="filepickerBtn" class="btn btn-primary">
        Select MS-WORD file
        </button>
      </p>
      <p>Filename: <span id="postName"></span></p>
      <p>Filelink: <span id="postlink"></span></p>
      <p>Results: <pre id="results">Upload file to see results</pre></p>
    </div>
  </body>
</html>

Please guide and correct me where I'm making the mistake in integrating filepicker.io into the HTML.

One more difference you'll observer in the fiddle and my code is, in the fiddle they have included Bootstrap 3.2.0 but I've not because I don't know how to include into my HTML. That's the only difference.

Thanks. Waiting for your precious replies.

Improve this question
4
  • try this plugin ? malsup.com/jquery/form/#file-upload Commented Feb 25, 2015 at 5:21
  • @FrebinFrancis:I don't want to select file from my local system. I only do want to integrate filepicker.io into my HTML code. Commented Feb 25, 2015 at 5:22
  • What's the problem are you facing? I cannot see any problem here... Commented Feb 25, 2015 at 5:28
  • @MokshShah:If you simply copy -paste my whole code to some HTML file and run it on your system, you'll not be able to see anything happen when user clicks on 'Select MS-WORD File' button. Also in a firebug console you could see anything. That's my problem. Nothing is happening. You could see the demo provided at jsFiddle link in my question for more understanding. Commented Feb 25, 2015 at 5:32

1 Answer 1

Reset to default
2

You've not included bootstrap css, but it doesn't make difference except UI. one more difference I can see is you've not included filepicker.js

your firebug console must be showing error saying filepicker is undefined

just add this script in your head and you're done.

<script src="http://api.filepicker.io/v1/filepicker.js"></script>

Check this fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Hey Thanks bro. Now it's working absolutely fine and perfect.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.