filepicker.io -- easy implementation

Question

I have a site, btstats.com, that provides the following service:

"It imports a JSON file from 'Bluescan 4.0 Scanner for Android' and generates graphs and stats".

I implemented Dropbox Chooser on my site with this simple and elegant code to provide the functionality, provided by Dropbox:

<script type="text/javascript">
document.getElementById('dropbox-bt').onclick = function()
{
    Dropbox.choose
    ({
    linkType: 'direct',
    extensions: ['.json'],
    multiselect: false,
    success: function (files)
    {
        var dbSelected = "File selected: ";
        var filenamePanel = document.getElementById('filenamePanel');
        filenamePanel.textContent = dbSelected + files[0].name;

        var postLink = files[0].link;
        document.getElementById('postLink').value = postLink;

        var postName = files[0].name;
        document.getElementById('postName').value = postName;   
    }
  });
};
</script>

What I like about the code above is that it is small and provides me the file link and file name.

I'm thinking about implementing filepicker.io, so I can provide to users more cloud storage options.

I couldn't find an easy way to add filepicker.io's window to my site that offers these options. First, I would like to implement it using a button, and I can't find on their documentation an example with getElementById.

Would it be possible for someone to guide me or write a small filepicker.io example based on my Dropbox implementation that provides the file link and file name? I'm not a Javascript expert.

Thanks in advance.

krystiangw · Accepted Answer · 2015-02-01 18:49:27Z

1

The filepicker code is quite similar:

filepicker.setKey('yourApikey');

document.getElementById('filepickerBtn').onclick = selectFile;

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

function onSuccessCallback(Blob){
    document.getElementById('postName').textContent = Blob.filename;
    document.getElementById('postlink').textContent = Blob.url;
    document.getElementById('results').textContent = JSON.stringify(Blob);            
};

Sample html code:

<div class="container">
    <h3>Filepicker example</h3>
    <p>
        <button id="filepickerBtn" class="btn btn-primary">
            Select json 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>

And working example here

edited Feb 1, 2015 at 18:49

answered Jan 31, 2015 at 22:37

krystiangw

5295 silver badges14 bronze badges

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

2 Comments

thiago Over a year ago

One question: How do I send the value of <span id="postName"> to --> <input type="hidden" name="postName" id="postName">? The way it is now, the value of the input is null, but on the Dropbox example listed above, the input value is equal to the <span id> value.

krystiangw Over a year ago

There is no inputs in my example but you can simply add it and then assign value the same way. File name is available under 'Blob.filename'. Example: document.getElementById('yourInputID').value = Blob.filename;

Collectives™ on Stack Overflow

filepicker.io -- easy implementation

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related