vue-dropbox-picker

Installation

yarn add vue-dropbox-picker or npm install vue-dropbox-picker --save

Usage

<VueDropboxPicker
        :api-key="dropboxApiKey"
        link-type="direct"
        :multiselect="false"
        :extensions="['.mp4']"
        :folderselect="false"
        :sizeLimit="1024"
        @cancel="onCancel"
        @picked="onPicked">
    Open Dropbox Picker
</VueDropboxPicker>

onCancel = () => {
  console.log('onCancel')
}

onPicked = (files) => {
  files.forEach((file) => {
      console.log(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,
}
 */

Props

link-type - direct or preview. Default is preview. Type of returning URLs to chosen files
multiselect - Boolean. Possibility to choose several files
extensions - List of allowed extensions. Empty by default (allowed all files).
folderselect - Boolean. Possibility to choose folders sizeLimit - Max size of files. If unset - no limit

Events

cancel - When picker is closed. No arguments
picked - When files are chosen. Argument - files (Array of file objects)

For more info - https://www.dropbox.com/developers/chooser