Box File Picker HTML Widget

SOLVED
Go to solution
Highlighted
New Contributor

Box File Picker HTML Widget

Hi,

 

I would like to create a simple file picker widget similar to Dropbox's "Chooser" Demo, which will enable me to generate share links/urls to multiple files at once.

 

From the Box File Picker help documentation, this seems like it would be a relatively simple task, but I am having trouble getting the HTML Widget to work.

 

I am not a developer, so it is possible that I am not implenting the code correctly.  Here is what I have:

 

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="https://app.box.com/js/static/select.js"></script>
<div id="box-select" data-link-type="direct" data-multiselect="true" data-client-id="cosl81u3lzhugjsrkze6gglo0rglseu5"></div>

<script>
$(document).ready(function() {
var boxSelect = new BoxSelect();
// Register a success callback handler
boxSelect.success(function(response) {
console.log(response);
});
// Register a cancel callback handler
boxSelect.cancel(function() {
console.log("The user clicked cancel or closed the popup");
});
});
</script>

</body>
</html>

 

Can somebody please advise as to what I am doing wrong, or provide some sample code that successfuly uses the File Picker HTML Widget?

 

Thanks very much.

 

-Brant

 

5 REPLIES 5
Highlighted
Box Employee

Re: Box File Picker HTML Widget

Hi Brant,

 

You were close. Please see the updated example below.

 

In lines 5 and 8, replace 012345 with the clientId for your application. To get your clientId, go to this page and then click Edit Application. Your clientId will be the six digit number at the end of the URL on that page (https://cloud.app.box.com/developers/services/edit/012345).

                                              

 

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="https://app.box.com/js/static/select.js"></script>
<div id="box-select" data-link-type="shared" data-multiselect="true" data-client-id="012345"></div>
<script>
var options = {
  clientId: 012345,
  linkType: 'shared',
  multiselect: 'true'
};

var boxSelect = new BoxSelect(options);

// Register a success callback handler
boxSelect.success(function(response) {
});
// Register a cancel callback handler
boxSelect.cancel(function() {
});
</script>
</body>
</html>

 

After the user selects their files, the Box API will return the name, url, type, access level, and id of each file in a JSON response object. 

 

[
{
"url" : "https://app.box.com/s/jdfad234232df123aad",
"name" : "fileName1.docx",
"access" : "collaborators",
"type" : "file",
"id" : 14837512438
},
{
"url" : "https://app.box.com/s/jdfad234232df123aad",
"name" : "fileName2.docx",
"access" : "collaborators",
"type" : "file",
"id" : 14837512484
}
]

From the JSON response object, you can get the shared links for the files the user selected. The example below shows how to do this.

 

// Register a success callback handler
boxSelect.success(function(response) {

var sharedLinks = []; //Parse shared links from response and store in sharedLinks array for(var i = 0; i < Object.keys(response).length; i++) { var obj = response[i]; sharedLinks.push(obj.url); } console.log(sharedLinks); });

 

Highlighted
New Contributor

Re: Box File Picker HTML Widget

Murtza,

 

Thank you very much for the quick response!  Your example worked perfectly.  

 

Would it be easy to modify the code to have the sharedLinks array print into a text area within the webpage?  I have a foggy idea in my head of adding some simple scripting to display what is stored in the array, but as I mentioned before, I am definitely not a developer and any help would be  much appreciated! 

Highlighted
Box Employee

Re: Box File Picker HTML Widget

 

Happy to hear you got it working!  

 

Please see the updated example below. I added the following:

  • Line 6, which creates a HTML element where we can put the list of links to the user's seleted files 
  • Line 27-33, which adds the list of links to the user's seleted files to the HTML element created in line 6

 

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="https://app.box.com/js/static/select.js"></script>
<div id="box-select" data-link-type="shared" data-multiselect="true" data-client-id="012345"></div>
<div id="file-list"></div>
<script>
var options = {
  clientId: 012345,
  linkType: 'shared',
  multiselect: 'true'
};
var boxSelect = new BoxSelect(options);

// Register a success callback handler
boxSelect.success(function(response) {
var fileNames = []; var sharedLinks = []; //Parse file names and shared links from response. Store data into arrays. for(var i = 0; i < Object.keys(response).length; i++) { var obj = response[i]; fileNames.push(obj.name); sharedLinks.push(obj.url); }
//Get current value for file-list div var currentStr = document.getElementById("file-list").innerHTML;
//Add sharedLinks to file-list div with file names as anchor text for (var i=0; i<sharedLinks.length; i++) { document.write(currentStr + "<br>" + "<a href='" + sharedLinks[i] + "'>" + fileNames[i] + "</a>"); } }); // Register a cancel callback handler boxSelect.cancel(function() { console.log("The user clicked cancel or closed the popup"); }); </script> </body> </html>

 

Highlighted
New Contributor

Re: Box File Picker HTML Widget

Murtza,

 

You have made my day!  Your updated example is exactly what I was looking for.

 

Thanks very much!!

Highlighted
First-time Contributor

Re: Box File Picker HTML Widget

Would it be possible for Box to help me make a system like this to pull file names and htmls to include in a file index excel sheet?