├── .gitignore
├── src
    ├── index.js
    ├── DialogButton.vue
    ├── Dropzone.vue
    └── FileSelector.vue
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as FileSelector } from './FileSelector.vue'
2 | export { default as Dropzone } from './Dropzone.vue'
3 | export { default as DialogButton } from './DialogButton.vue'
4 | 


--------------------------------------------------------------------------------
/src/DialogButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button v-bind="$attrs" @click="openDialog">
 3 |     <slot />
 4 |   </button>
 5 | </template>
 6 | <script>
 7 | import { inject } from 'vue'
 8 | export default {
 9 |   setup () {
10 |     const openDialog = inject('openDialog')
11 | 
12 |     return {
13 |       openDialog
14 |     }
15 |   }
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-file-selector",
 3 |   "version": "1.0.3",
 4 |   "description": "A Vue 3 headless file selector component",
 5 |   "main": "dist/vue3-file-selector.common.js",
 6 |   "scripts": {
 7 |     "build": "vue-cli-service build --target lib src/index.js",
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+ssh://git@github.com/cyon/vue3-file-selector.git"
13 |   },
14 |   "keywords": [
15 |     "vue",
16 |     "vue",
17 |     "3",
18 |     "file",
19 |     "selector",
20 |     "headless"
21 |   ],
22 |   "author": "Max Gfeller <mg@cyon.ch>",
23 |   "license": "ISC",
24 |   "bugs": {
25 |     "url": "https://github.com/cyon/vue3-file-selector/issues"
26 |   },
27 |   "homepage": "https://github.com/cyon/vue3-file-selector#readme",
28 |   "devDependencies": {
29 |     "@vue/cli-service": "^4.5.11",
30 |     "@vue/compiler-sfc": "^3.0.7",
31 |     "vue": "^3.0.7"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/Dropzone.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     @dragover="handleDragover"
 4 |     @drop.stop.prevent="handleDrop"
 5 |     @dragleave="handleDragLeave"
 6 |   >
 7 |     <slot :hovered="hovered" />
 8 |   </div>
 9 | </template>
10 | <script>
11 | import { inject, ref } from 'vue'
12 | export default {
13 |   setup () {
14 |     const hovered = ref(false)
15 |     const addFiles = inject('addFiles')
16 | 
17 |     const handleDrop = (evt) => {
18 |       hovered.value = false
19 |       const files = Array.from(evt.dataTransfer.items).map((item) => {
20 |         if (item.kind !== 'file') return null
21 |         return item.getAsFile()
22 |       }).filter(Boolean)
23 | 
24 |       addFiles(files)
25 |     }
26 | 
27 |     const handleDragover = (evt) => {
28 |       evt.preventDefault()
29 |       hovered.value = true
30 |     }
31 | 
32 |     const handleDragLeave = () => {
33 |       hovered.value = false
34 |     }
35 | 
36 |     return {
37 |       hovered,
38 |       handleDragover,
39 |       handleDragLeave,
40 |       handleDrop
41 |     }
42 |   }
43 | }
44 | </script>
45 | 


--------------------------------------------------------------------------------
/src/FileSelector.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input style="display: none;" type="file" ref="inputRef" :multiple="allowMultiple" :accept="accept" @change="updateFiles">
 3 |   <slot :openDialog="openDialog" />
 4 | </template>
 5 | <script>
 6 | import { provide, ref } from 'vue'
 7 | export default {
 8 |   emits: ['update:modelValue'],
 9 |   props: {
10 |     modelValue: {
11 |       type: Array,
12 |       required: true
13 |     },
14 |     allowMultiple: {
15 |       type: Boolean,
16 |       default: true
17 |     },
18 |     accept: {
19 |       type: Array,
20 |       default: undefined
21 |     }
22 |   },
23 |   setup (props, { emit }) {
24 |     const inputRef = ref(null)
25 |     const openDialog = () => {
26 |       inputRef.value.click()
27 |     }
28 | 
29 |     provide('openDialog', openDialog)
30 | 
31 |     provide('addFiles', (files) => {
32 |       emit('update:modelValue', [...props.modelValue, ...files])
33 |     })
34 | 
35 |     const updateFiles = () => {
36 |       emit('update:modelValue', [...props.modelValue, ...inputRef.value.files])
37 |     }
38 | 
39 |     return {
40 |       inputRef,
41 |       openDialog,
42 |       updateFiles
43 |     }
44 |   }
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue3-file-selector
  2 | 
  3 | A Vue 3 headless File Selector component.
  4 | 
  5 | ## How to use
  6 | 
  7 | This library includes a few headless components for a drag and drop supported
  8 | file selector.
  9 | 
 10 | Here's the parts:
 11 | 
 12 | - `FileSelector`: The main container, needs to be used
 13 | - `Dropzone`: Handles the drag and drop logic, does not need to be used
 14 | - `DialogButton`: Unstyled button that opens the file dialog on click, does not need to be used
 15 | 
 16 | ## Basic example
 17 | 
 18 | [See it in action.](https://codesandbox.io/s/sweet-fog-f5wgd?file=/src/App.vue)
 19 | 
 20 | Here's a basic example with drag and drop and a list of the selected files.
 21 | 
 22 | ```vue
 23 | <template>
 24 |   <file-selector v-model="files">
 25 |     <dropzone v-slot="{ hovered }">
 26 |       <div
 27 |         class="block w-full h-64 rounded-lg border-4 border-dashed border-gray-400 transition-colors duration-150 flex flex-col space-y-4 justify-center items-center"
 28 |         :class="{ 'border-blue-200': hovered }"
 29 |       >
 30 |         <ul>
 31 |           <li v-for="file in files" :key="file.name">
 32 |             {{ file.name }}
 33 |           </li>
 34 |         </ul>
 35 |         <dialog-button class="bg-indigo-400 rounded text-white px-2 py-1"
 36 |           >Add files...</dialog-button
 37 |         >
 38 |       </div>
 39 |     </dropzone>
 40 |   </file-selector>
 41 | </template>
 42 | <script>
 43 | import { ref } from 'vue'
 44 | import { FileSelector, Dropzone, DialogButton } from 'vue3-file-selector'
 45 | 
 46 | export default {
 47 |   components: {
 48 |     FileSelector,
 49 |     Dropzone,
 50 |     DialogButton
 51 |   },
 52 |   setup () {
 53 |     const files = ref([])
 54 | 
 55 |     return {
 56 |       files
 57 |     }
 58 |   }
 59 | }
 60 | </script>
 61 | ```
 62 | 
 63 | ## BYOB (Bring Your Own Button)
 64 | 
 65 | This library provides an unstyled button component, which already implements the logic of opening
 66 | the file selector dialog. However, if you already have a button component in your project, it would
 67 | probably make more sense to use this one.
 68 | 
 69 | This can be done as follows:
 70 | 
 71 | ```vue
 72 | <template>
 73 |   <file-selector v-model="files" v-slot="{ openDialog }">
 74 |     <x-button @click="openDialog">Add files...</x-button>
 75 |   </file-selector>
 76 | </template>
 77 | ```
 78 | 
 79 | ## The `File` interface
 80 | 
 81 | The `v-model` of `FileSelector` is an Array of [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)
 82 | objects as they are returned from a file `<input>` element or the drag and drop `DataTransfer` object.
 83 | 
 84 | Here's how you could create a little preview of uploaded images:
 85 | 
 86 | ```vue
 87 | <template>
 88 |   <file-selector v-model="files" :accept="['image/png', 'image/jpeg']">
 89 |     <dialog-button>Add images...</dialog-button>
 90 |     <div>
 91 |       <img v-for="preview in previews" :key="preview" :src="preview" />
 92 |     </div>
 93 |   </file-selector>
 94 | </template>
 95 | <script>
 96 | import { ref, watch } from 'vue'
 97 | import { FileSelector, DialogButton } from 'vue3-file-selector'
 98 | 
 99 | export default {
100 |   components: {
101 |     FileSelector,
102 |     DialogButton,
103 |   },
104 |   setup () {
105 |     const files = ref([])
106 |     const previews = ref([])
107 | 
108 |     const toBlob = async (file) => {
109 |       const buffer = await file.arrayBuffer()
110 |       const blob = new Blob([buffer])
111 |       const srcBlob = URL.createObjectURL(blob)
112 | 
113 |       return srcBlob
114 |     }
115 | 
116 |     watch(files, async () => {
117 |       previews.value = await Promise.all(
118 |         files.value.map((file) => toBlob(file))
119 |       )
120 |     })
121 | 
122 |     return {
123 |       files,
124 |       previews,
125 |     }
126 |   },
127 | }
128 | </script>
129 | ```
130 | 


--------------------------------------------------------------------------------