filepicker.io - легкая реализация

Question

У меня есть сайт, btstats.com, который предоставляет следующие услуги:

«Он импортирует файл в формате JSON от„Bluescan 4.0 Scanner для Android“и генерирует графики и статистику».

Я реализовал Dropbox Chooser на моем сайте с помощью этого простого и элегантного кода, чтобы обеспечить функциональность, предоставляемую 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> 

Что мне нравится в коде выше является то, что он маленький и предоставляет мне на файловая ссылка и имя файла.

Я думаю об осуществлении filepicker.io, поэтому я могу предоставить пользователям больше возможностей облачного хранилища.

Я не мог найти простой способ добавить окно filepicker.io на свой сайт, который предлагает эти параметры. Во-первых, я хотел бы реализовать его с помощью кнопки, и я не могу найти в своей документации пример с getElementById.

Возможно ли, чтобы кто-нибудь мне руководил или написал небольшой пример filepicker.io на основе моей реализации Dropbox, которая предоставляет ссылку на файл и имя файла? Я не эксперт по Javascript.

Заранее спасибо.

Answer 1

filepicker код очень похож:

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);    
}; 

Пример кода HTML:

<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> 

И рабочий пример here