Dropbox Chooser example (Javascript)
https://www.dropbox.com/developers/dropins
Dropbox 에 저장되어 있는 파일들을 간편하게 선택하고 그 내용을 보거나 다운로드할 수 있는 이용자 인터페이스를 제공하는 Drop-ins API 중 하나이다
마치 윈도우의 탐색기나 윈도우 프로그램에서 사용되는 파일열기 창과 같은 역할을 웹상에서 한다고 생각하면 될 것 같다.
Dropbox에 있는 파일을 보여주면서 다운로드/웹에서 열기 를 할 수 있을 뿐만 아니라 '+' 아이콘을 눌러서 로컬 시스템에 있는 파일을 Dropbox 로 업로드할 수 도 있다.
Chooser 를 이용하여 Dropbox 에 있는 파일을 이용자가 선택하면 Chooser 가 사라지면서 그 자리에 선택된 파일 링크가 나타나므로 이 링크를 클릭하여 파일을 열어보거나 로컬 시스템에 다운로드할 수 있다
참고로 Saver 콤포넌트는 링크의 href 속성으로 사용된 파일이 Dropbox 에 저장되는 기능을 제공하며 로컬시스템의 파일을 Dropbox 로 업로드하는 기능을 제공하지는 않는다
Saver 강좌 참고 https://www.dropbox.com/developers/dropins/saver
위의 링크를 읽어보면 다음과 같은 정리를 할 수 있다
Dropbox 내의 파일열기 인터페이스 : Chooser
Dropbox 로의 파일저장 인터페이스: Saver
1. 라이브러리 포함
웹페이지에서 Chooser 를 사용하기 위해서는 우선 다음과 같이 자바스크립트 라이브러리를 포함해야 한다
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="YOUR_APPKEY_HERE"></script>
2. Chooser를 이용하는 완전한 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Dropbox Chooser example</title>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="YOUR_APPKEY_HERE"></script>
<script type="text/javascript" >
file = {
// 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",
};
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'],
};
function setButton() {
var button = Dropbox.createChooseButton(options);
document.getElementById("container").appendChild(button);
}
</script>
</head>
<body onload="setButton()">
<div id="container"></div>
</body>
</html>