In this post, I will explain how to integrate Dropbox file chooser into website. The chooser is easy and fastest way to get files from dropbox without implementing all steps of authentication, user interface.
First, You need to register app in dropbox to get App key that is required in script.
- Navigate to this link https://www.dropbox.com/developers/apps
- Click "Create app" button
- Choose "Dropbox API", Full Dropbox access and give App name
- Click "Create app" button
Add the following JavaScript snippet to your HTML. Replace your App key in "ENTER_YOUR_APP_KEY"
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="ENTER_YOUR_APP_KEY"></script>
Triggering the Chooser from JavascriptThere are two ways to trigger the Chooser on your website. To create nice styled dropbox button, you can use the following JavaScript:
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:
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 parameter with the following fields:
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
// Optional. A limit on the size of each file that may be selected, in bytes.
// If specified, the user will only be able to select files with size
// less than or equal to this limit.
// For the purposes of this option, folders have size zero.
sizeLimit: 1024, // or any positive number
};
Handling the responseThe files parameter in the above success callback function will be an array of file objects, each containing info about the selected file. If multiselect is false, the array will contain a single item. Each file object includes the following fields:
file = {
// Unique ID for the file, compatible with Dropbox API v2.
id: "id:...",
// Name of the file.
name: "filename.txt",
// URL to access the file, which varies depending on the linkType specified when the
// Chooser was triggered.
link: "https://...",
// Size of the file in bytes.
bytes: 464,
// URL to a 64x64px icon for the file based on the file's extension.
icon: "https://...",
// A thumbnail URL generated when the user selects images and videos.
// If the user didn't select an image or video, no thumbnail will be included.
thumbnailLink: "https://...?bounding_box=75&mode=fit",
// Boolean, whether or not the file is actually a directory
isDir: false,
};
The thumbnail link contains query string parameters that specify how the thumbnail is generated. By modifying these parameters, you can construct URLs for other sizes and modes of thumbnails:
- bounding_box Bounding box size for the thumbnail which must be one of the following values: 75 (default), 256, 800, 1280, 2048.
- mode One of the following resize modes:
- fit default Shrink the original image maintaining the original aspect ratio until the entire image fits inside the bounding box.
- crop Shrink the original image until its width or height fits in bounding box, then crop anything outside the bounding box.
- fit_one_and_overflow Shrink the original image until its width or height fits into the bounding box but do not crop the left overs. The returned image will be larger than the bounding box. This is useful for situations where you need to use a square thumbnail but also want to use that image as a placeholder while you load a higher resolution version in the background.
Full example of dropbox chooser with custom button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dropbox chooser example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<input type="button" onclick="chooseFromDropbox()" value="Choose from Dropbox"/>
</div>
<!-- Dropbox javascript -->
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="u6nbe57wdf1b07k"></script>
<script type="text/javascript">
function chooseFromDropbox(){
//Trigger dropbox chooser
Dropbox.choose({
success: function(files) {
//files is list of selected files (array)
if(files.length < 0){
return;
}
var file = files[0];
alert("Download Link : "+ file.link +"\nFile Name : "+ file.name);
//Sent link to server and grab content in server side
},
cancel: function() {
//here is code when user close chooser
},
linkType: "direct", //Direct = Download link
multiselect: false, //Allow to select one file
extensions: ['.pdf'], //Allow to choose PDF file only
folderselect: false, //Not allow to select folder
sizeLimit: 1024 * 1024 * 2 //File size limit (2MB)
});
}
</script>
</body>
</html>
If you like this post, Please share it. Thank you for reading.
July 10, 2019
Tags :
dropbox
,
html
,
javascript
No Comments