Web Prepration

Web Concept Tutorials

file chooser

Add dropbox file picker/chooser in website

by Leave a Comment

In this article, I am going to explain “How to Add dropbox file picker/chooser in the website”.  The Chooser is the fastest way to get files from Dropbox into your web app. It’s a small JavaScript component that enables your app to get files from Dropbox without having to worry about the complexities of implementing a file browser, authentication, or managing uploads and storage.
However, most users now store their files in the cloud (Microsoft OneDrive, Google Drive, Dropbox, etc.). So, it can be a great idea to allow users to select files directly from their cloud provider.

Let’s see how to add the Dropbox File Picker to a website!

Step 1:- The first step in adding the Chooser to your app is to create an app. Using the Chooser doesn’t require production approval, so you can publish your integration to your users as soon as you’re ready.

When you create a Chooser app for the web, you’ll need to provide the domain names where your app is hosted. This lets us stop other websites from trying to impersonate your app. If you’re developing locally, you can use localhost as the domain name as well.

Step 2:-  Now, need to embed the given code

1
2
3
 
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="INSERT YOUR APPLICATION KEY"></script>
 

Step 3:-  Triggering the Chooser from JavaScript

There are two ways to trigger the Chooser on your website. To create the nice styled button or you can use the following JavaScript:

1
2
3
4
 
var button = Dropbox.createChooseButton(options);
document.getElementById("container").appendChild(button);
 

If you prefer to design a custom button instead, you can trigger the Chooser directly from JavaScript using the following method:

1
2
3
 
Dropbox.choose(options);
 

Note that the Chooser opens in a pop-up window, so you should only call this function from within a user-triggered event handler such as a tap or click event. Otherwise, the pop-up will likely be blocked by the browser.

Both methods take a single options a parameter with the following fields:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
options = {
 
    // Required. Called when a user selects an item in the Chooser.
    success: function(files) {
        alert("Here's the file link: " + files[0].link)
    },
 
    // Optional. Called when the user closes the dialog without selecting a file
    // and does not include any parameters.
    cancel: function() {
 
    },
 
    // Optional. "preview" (default) is a preview link to the document for sharing,
    // "direct" is an expiring link to download the contents of the file. For more
    // information about link types, see Link types below.
    linkType: "preview", // or "direct"
 
    // Optional. A value of false (default) limits selection to a single file, while
    // true enables multiple file selection.
    multiselect: false, // or true
 
    // Optional. This is a list of file extensions. If specified, the user will
    // only be able to select files with these extensions. You may also specify
    // file types, such as "video" or "images" in the list. For more information,
    // see File types below. By default, all extensions are allowed.
    extensions: ['.pdf', '.doc', '.docx'],
 
    // Optional. A value of false (default) limits selection to files,
    // while true allows the user to select both folders and files.
    // You cannot specify `linkType: "direct"` when using `folderselect: true`.
    folderselect: false, // or true
};
 

Step 4:- DropBox demo full code given below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dropbox Chooser Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="INSERT YOUR APPLICATION KEY"></script>
</head>
<body>
<div class="container">  
  <div class="row">
  <div class="small-12 columns">
    <h1>Dropbox Chooser Demo</h1>
    <div id="dropbox-container"></div>
    <hr>
    <ul id="img_list" class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    </ul>
  </div>
</div>
</div>
<script>
  options = {
    success: function(files) {
      files.forEach(function(file) {
        add_img_to_list(file);
      });
    },
    cancel: function() {
      //optional
    },
    linkType: "preview", // "preview" or "direct"
    multiselect: true, // true or false
    extensions: ['.png', '.jpg'],
};
 
var button = Dropbox.createChooseButton(options);
document.getElementById("dropbox-container").appendChild(button);
 
function add_img_to_list(file) {
  var li  = document.createElement('li');
  var a   = document.createElement('a');
  a.href = file.link;
  var img = new Image();
  var src = file.thumbnailLink;
  src = src.replace("bounding_box=75", "bounding_box=256");
  src = src.replace("mode=fit", "mode=crop");
  img.src = src;
  img.className = "th"
  document.getElementById("img_list").appendChild(li).appendChild(a).appendChild(img);
}
</script>
</body>
</html>
 

 

View Demo
 

I hope you might have understood it properly, keep reading our other blog posts for more coding tricks.

Thanks!!