npm i vue-dropbox-chooser
App.vue
|
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<template> <div id="app"> <h1>Dropbox File Picker Example</h1> <!-- Dropbox Picker Component --> <VueDropboxPicker :api-key="dropboxApiKey" link-type="direct" :multiselect="true" :extensions="['.mp4', '.pdf']" :folderselect="false" :sizeLimit="10485760" @cancel="onCancel" @picked="onPicked" > Open Dropbox Picker </VueDropboxPicker> <!-- Display selected files --> <div v-if="selectedFiles.length > 0"> <h2>Selected Files:</h2> <ul> <li v-for="file in selectedFiles" :key="file.id"> <strong>{{ file.name }}</strong> - <a :href="file.link" target="_blank">Download</a> <br /> <img v-if="file.thumbnailLink" :src="file.thumbnailLink" alt="Thumbnail" width="100" /> </li> </ul> </div> </div> </template> <script> import VueDropboxPicker from "vue-dropbox-chooser"; export default { components: { VueDropboxPicker, }, data() { return { dropboxApiKey: "", // Replace with your Dropbox API key selectedFiles: [], // Array to hold selected file details }; }, methods: { // Handle cancel event onCancel() { console.log("User canceled the Dropbox picker."); }, // Handle picked files onPicked(files) { console.log("Files picked:", files); this.selectedFiles = files; // Save the selected files }, }, }; </script> <style> #app { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } h1 { color: #2c3e50; } ul { list-style-type: none; padding: 0; } li { margin: 10px 0; } </style> |
