├── .browserslistrc
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc
├── README.md
├── babel.config.js
├── config
    └── storybook
    │   ├── addons.js
    │   └── config.js
├── cypress.json
├── demo
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── router.js
    └── views
    │   ├── Dropzone.vue
    │   ├── FileListExample.vue
    │   ├── ImagePreview.vue
    │   └── SimpleFileDrop.vue
├── jest.config.js
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── components
    │   ├── FileBox.vue
    │   ├── FileDrop.vue
    │   ├── FileList.vue
    │   ├── ImageList.vue
    │   └── MyButton.vue
    ├── full.js
    ├── index.js
    ├── stories
    │   └── index.stories.js
    └── utils
    │   ├── filters.js
    │   ├── globalDragEventBus.js
    │   └── index.js
├── tests
    ├── e2e
    │   ├── .eslintrc.js
    │   ├── plugins
    │   │   └── index.js
    │   ├── specs
    │   │   └── test.js
    │   └── support
    │   │   ├── commands.js
    │   │   └── index.js
    └── unit
    │   ├── .eslintrc.js
    │   ├── FileDrop
    │       └── filedrop.spec.js
    │   └── resources
    │       ├── Simple.vue
    │       └── filedrop.utils.js
├── vue.config.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /dist


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: ['plugin:vue/essential', '@vue/prettier'],
 7 |   rules: {
 8 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 9 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
10 |   },
11 |   parserOptions: {
12 |     parser: 'babel-eslint',
13 |   },
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | TODO.md
 6 | 
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw*
24 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /.vscode
2 | /.circleci
3 | /demo
4 | /node_modules
5 | /public
6 | /tests
7 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | /dist


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "useTabs": false,
3 |   "singleQuote": true,
4 |   "trailingComma": "es5",
5 |   "semi": false
6 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # [WIP] vue-filedrop
  2 | 
  3 | <!-- markdownlint-disable MD033 MD025-->
  4 | 
  5 | ## What this is
  6 | 
  7 | > this lib has not been published and not ready to be used yet.
  8 | 
  9 | Vue Filedrop is a UI component that provides a dropzone for files, like this:
 10 | 
 11 | -> **TODO: enter image here**
 12 | 
 13 | It *also* is a renderless component that wraps all of the business logic (drag&drop event handling etc) and provides an easy to consume API via a scoped slot.
 14 | 
 15 | This allows developers to build their own UI representation of a Filedrop easily and withut worrying about edge cases and such.
 16 | 
 17 | ## Usage
 18 | 
 19 | ### UI component
 20 | 
 21 | ```html
 22 | <filedrop-ui @change="handlFiles">
 23 | ```
 24 | 
 25 | ### Renderless component
 26 | 
 27 | ```html
 28 | <filedrop v-slot="{
 29 |   dragEvents,
 30 |   hovering,
 31 |   files,
 32 |   open,
 33 | }">
 34 |   <div
 35 |     :class="hovering ? 'some-class-for-hover-state'"
 36 |     v-on:click="open"
 37 |     v-on="dragEvents"
 38 |   >
 39 |   <p v-if="!files.length && !hovering">Drop files here or click to select</p>
 40 |   <p v-elseif="hovering">You can drop the file(s) here </p>
 41 |   <ul v-else>
 42 |     <li v-for="file in files">{{file.name}}</li>
 43 |   </ul>
 44 | </filedrop>
 45 | ```
 46 | 
 47 | ## Installation
 48 | 
 49 | > WARNING
 50 | > This package hasnt been published yet, so install instructions don't work.
 51 | 
 52 | ### Webpack or other bundlers
 53 | 
 54 | ```bash
 55 | npm i vue-filedrop
 56 | # or
 57 | yarn add filedrop
 58 | ```
 59 | 
 60 | ```javascript
 61 | import Vue from 'vue'
 62 | import Filedrop from 'vue-filedrop'
 63 | 
 64 | Vue.use(Filedrop, {
 65 |   // Default component names, customizable
 66 |   // setting one to `false` skips their global registration
 67 |   filedropName: 'Filedrop',
 68 |   filedropUiName: 'FiledropUi'
 69 | })
 70 | ```
 71 | 
 72 | Alternatively, you can import components indivudally and register them (globally or locally):
 73 | 
 74 | ```html
 75 | <-- e.g. in a .vue file: -->
 76 | <script>
 77 | import {
 78 |   Filedrop,
 79 |   FiledropUi
 80 | } from 'vue-filedrop'
 81 | export default {
 82 |   components: {
 83 |     Filedrop,
 84 |     FiledropUi,
 85 |   }
 86 | }
 87 | </script>
 88 | ```
 89 | 
 90 | ### Importing from `/src` / Tree-shaking
 91 | 
 92 | <details>
 93 |   <summary>If you want proper tree-shaking support, we recommend to import froms src (click for more)</summary>
 94 | 
 95 |   ```javascript
 96 |   import Vue from 'vue'
 97 |   import Filedrop from 'vue-filedrop/src/index'
 98 |   Vue.use(Filedrop)
 99 |   ```
100 | 
101 |   However, in most setups this requires some adjustment of the (webpack) build setup as content of `/node_modules` is usually ignored by babel-loader configs.
102 | 
103 |   Vue CLI projects offer the [transpileDependencies](https://cli.vuejs.org/config/#transpiledependencies) to do this quick&easy:
104 | 
105 |   ```javascript
106 |   // vue.config.js
107 |   module.exports = {
108 |     transpileDependencies: ['vue-filedrop']
109 |   }
110 |   ```
111 | 
112 | </details>
113 | 
114 | ## Browser
115 | 
116 | <details>
117 |   <summary>Click here to see in-Browser install instructions</summary>
118 | 
119 | ```html
120 | <script src="https://unpkg.com/vue/dist/vue.js"></script>
121 | <script src="https://unpkg.com/vue-filedrop"></script>
122 | ```
123 | 
124 | In the browser, the plugin will automatically register the components globally
125 | 
126 | </details>
127 | 
128 | ## Features
129 | 
130 | - [ ] todo
131 | 
132 | ## Development
133 | 
134 | <details>
135 |   <summary>Click here to see information for constributors</summary>
136 | 
137 | ### Project setup
138 | 
139 | ```bash
140 | yarn install
141 | ```
142 | 
143 | ### Compiles and hot-reloads for development
144 | 
145 | ```bash
146 | yarn run serve
147 | ```
148 | 
149 | ### Compiles and minifies for production
150 | 
151 | ```bash
152 | yarn run build
153 | ```
154 | 
155 | ### Lints and fixes files
156 | 
157 | ```bash
158 | yarn run lint
159 | ```
160 | 
161 | ### Run all tests
162 | 
163 | ```bash
164 | yarn run test
165 | ```
166 | 
167 | ### Run your unit tests
168 | 
169 | ```bash
170 | yarn run test:unit
171 | ```
172 | 
173 | ### Customize configuration
174 | 
175 | This project is based on Vue CLI, see  its [Configuration Reference](https://cli.vuejs.org/config/) for further info.
176 | </details>


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       '@vue/app',
 5 |       {
 6 |         useBuiltIns: false,
 7 |         polyfills: false,
 8 |       },
 9 |     ],
10 |   ],
11 | }
12 | 


--------------------------------------------------------------------------------
/config/storybook/addons.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 | import '@storybook/addon-actions/register'
3 | import '@storybook/addon-knobs/register'
4 | import '@storybook/addon-links/register'
5 | import '@storybook/addon-notes/register'
6 | 


--------------------------------------------------------------------------------
/config/storybook/config.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/no-extraneous-dependencies */
 2 | import { configure } from '@storybook/vue'
 3 | 
 4 | const req = require.context('../../src/stories', true, /.stories.js$/)
 5 | 
 6 | function loadStories() {
 7 |   req.keys().forEach(filename => req(filename))
 8 | }
 9 | 
10 | configure(loadStories, module)
11 | 


--------------------------------------------------------------------------------
/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 |   "pluginsFile": "tests/e2e/plugins/index.js"
3 | }
4 | 


--------------------------------------------------------------------------------
/demo/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <nav>
 4 |       <ul class="main-navigation">
 5 |         <li><router-link to="/">Simple</router-link></li>
 6 |         <li><router-link to="/file-list">File List</router-link></li>
 7 |         <li><router-link to="/image-preview">Image preview</router-link></li>
 8 |         <li><router-link to="/dropzone">Dropzone</router-link></li>
 9 |       </ul>
10 |     </nav>
11 |     <h2 class="title">{{ $route.meta.title || 'Placeholder Title!' }}</h2>
12 |     <router-view />
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   name: 'app',
19 | }
20 | </script>
21 | 
22 | <style lang="scss">
23 | #app {
24 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
25 |   -webkit-font-smoothing: antialiased;
26 |   -moz-osx-font-smoothing: grayscale;
27 |   color: #2c3e50;
28 |   margin-top: 60px;
29 | }
30 | 
31 | .title {
32 |   text-align: center;
33 | }
34 | 
35 | .main-navigation {
36 |   list-style-type: none;
37 |   display: flex;
38 |   justify-content: center;
39 | 
40 |   li {
41 |     display: inline-block;
42 |     margin-right: 10px;
43 |     padding: 5px;
44 |   }
45 | 
46 |   a,
47 |   a:hover a:visited a:active {
48 |     padding: 5px 15px;
49 |     border: 1px solid #ccc;
50 |     border-radius: 5px;
51 |     text-decoration: none;
52 |     color: green;
53 |   }
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/demo/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinusBorg/vue-filedrop/1e828dab478f7a8bc302d83fd9542d3cea6ed739/demo/assets/logo.png


--------------------------------------------------------------------------------
/demo/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import VueFiledrop from '../src/full'
 5 | 
 6 | Vue.use(VueFiledrop)
 7 | 
 8 | Vue.config.productionTip = false
 9 | 
10 | new Vue({
11 |   router,
12 |   render: h => h(App),
13 | }).$mount('#app')
14 | 


--------------------------------------------------------------------------------
/demo/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | Vue.use(Router)
 5 | 
 6 | export default new Router({
 7 |   mode: 'history',
 8 |   base: process.env.BASE_URL,
 9 |   routes: [
10 |     {
11 |       path: '/',
12 |       component: require('./views/SimpleFileDrop').default,
13 |       meta: {
14 |         title: 'The simplest FileDrop',
15 |       },
16 |     },
17 |     {
18 |       path: '/file-list',
19 |       component: require('./views/FileListExample').default,
20 |       meta: {
21 |         title: 'A File listing in a FileDrop',
22 |       },
23 |     },
24 |     {
25 |       path: '/image-preview',
26 |       component: require('./views/ImagePreview').default,
27 |       meta: {
28 |         title: 'Previewing Images with thumbnails',
29 |       },
30 |     },
31 |     {
32 |       path: '/dropzone',
33 |       component: require('./views/Dropzone').default,
34 |       meta: {
35 |         title: 'Imitating Dropzone style',
36 |       },
37 |     },
38 |   ],
39 | })
40 | 


--------------------------------------------------------------------------------
/demo/views/Dropzone.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="dropzone">
 3 |     <FileDrop multiple manualEmit processFiles readAs="DataURL">
 4 |       <FileBox slot-scope="{ files, clear }">
 5 |         <p v-if="!files.length">
 6 |           No images yet. Drop or click here to add some.
 7 |         </p>
 8 |         <div v-else>
 9 |           <ImageList width="150" />
10 |           <button @click="handle(files, clear)">Save</button>
11 |         </div>
12 |       </FileBox>
13 |     </FileDrop>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   name: 'TypicalDropZone',
20 |   methods: {
21 |     handle(files, clear) {
22 |       window.alert(`We have a file named ${files[0].name}`)
23 |       clear()
24 |     },
25 |   },
26 | }
27 | </script>
28 | 
29 | <style scoped>
30 | .dropzone {
31 |   max-width: 550px;
32 |   min-height: 200px;
33 |   display: flex;
34 |   flex-direction: column;
35 |   margin: 0 auto;
36 | }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/demo/views/FileListExample.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="filelist--example">
 3 |     <FileDrop multiple>
 4 |       <FileBox> <FileList /> </FileBox>
 5 |     </FileDrop>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: 'FileListExample',
12 | }
13 | </script>
14 | 
15 | <style scoped>
16 | .filelist--example {
17 |   max-width: 550px;
18 |   min-height: 200px;
19 |   margin: 0 auto;
20 |   display: flex;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/demo/views/ImagePreview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="ipreview">
 3 |     <FileDrop multiple processFiles readAs="DataURL">
 4 |       <div
 5 |         slot-scope="{ files, open, clear, dragEvents }"
 6 |         v-on="dragEvents"
 7 |         class="imagelist-wrapper"
 8 |       >
 9 |         <ImageList v-if="files.length" :width="120" />
10 |         <p v-else>No files so far. You can drop them here!</p>
11 |         <br />
12 |         <div class="example--btngroup">
13 |           <button class="example--btn" @click="open">Open</button>
14 |           <button class="example--btn" @click="clear" :disabled="!files.length">
15 |             Clear
16 |           </button>
17 |         </div>
18 |       </div>
19 |     </FileDrop>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | export default {
25 |   name: 'ImagePreviewExample',
26 | }
27 | </script>
28 | 
29 | <style scoped lang="scss">
30 | .ipreview {
31 |   max-width: 550px;
32 |   min-height: 200px;
33 |   display: flex;
34 |   margin: 0 auto;
35 | 
36 |   .example--btngroup {
37 |     display: flex;
38 |     justify-content: center;
39 | 
40 |     button + button {
41 |       margin-left: 10px;
42 |     }
43 |   }
44 |   .example--btn {
45 |     color: navy;
46 |     background: white;
47 |     padding: 5px 10px;
48 |     border: 1px solid navy;
49 |     border-radius: 3px;
50 | 
51 |     &:hover {
52 |       background-color: rgba(10, 10, 255, 0.2);
53 |     }
54 | 
55 |     &:disabled {
56 |       border-color: #ccc;
57 |       color: #ccc;
58 |       pointer-events: none;
59 |     }
60 |   }
61 | }
62 | .imagelist-wrapper {
63 |   margin: auto;
64 | }
65 | .file-list {
66 |   list-style-type: none;
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/demo/views/SimpleFileDrop.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="simpledrop-example">
 3 |     <FileDrop @change="handleFiles" multiple>
 4 |       <div
 5 |         slot-scope="{ files, open, clear, dragEvents }"
 6 |         v-on="dragEvents"
 7 |         class="simpledrop-wrapper"
 8 |       >
 9 |         <ul v-if="files.length" class="file-list">
10 |           <li v-for="file in files" :key="file.name">{{ file.name }}</li>
11 |         </ul>
12 |         <p v-else>No files so far. You can drop them here!</p>
13 |         <br />
14 |         <button @click="open">Open</button>
15 |         <button @click="clear" :disabled="!files.length">Clear</button>
16 |       </div>
17 |     </FileDrop>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   name: 'SimpleFileDropExample',
24 |   methods: {
25 |     handleFiles(files) {
26 |       window.alert(`We got ${files.length} files!`)
27 |     },
28 |   },
29 | }
30 | </script>
31 | 
32 | <style scoped>
33 | .simpledrop-example {
34 |   max-width: 550px;
35 |   margin: auto;
36 |   display: flex;
37 | }
38 | .simpledrop-wrapper {
39 |   margin: auto;
40 | }
41 | .file-list {
42 |   list-style-type: none;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
 3 |   transform: {
 4 |     '^.+\\.vue$': 'vue-jest',
 5 |     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
 6 |       'jest-transform-stub',
 7 |     '^.+\\.jsx?$': 'babel-jest',
 8 |   },
 9 |   moduleNameMapper: {
10 |     '^@/(.*)$': '<rootDir>/src/$1',
11 |   },
12 |   snapshotSerializers: ['jest-serializer-vue'],
13 |   testMatch: [
14 |     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
15 |   ],
16 |   testURL: 'http://localhost/',
17 | }
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-filedrop",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve demo/main",
 7 |     "build": "rimraf node_modules/.cache && yarn build:lib:full && yarn build:lib:core --no-clean",
 8 |     "lint": "vue-cli-service lint",
 9 |     "build:demo": "vue-cli-service build demo/main",
10 |     "build:lib:core": "vue-cli-service build --target lib --name VueFiledrop --dest dist/core src/index.js",
11 |     "build:lib:full": "vue-cli-service build --target lib --name VueFiledrop src/full.js",
12 |     "build:lib:wc": "rimraf node_modules/.cache && vue-cli-service build --target wc --no-clean --dest dist/wc src/full.js",
13 |     "sb:build": "vue-cli-service storybook:build -c config/storybook",
14 |     "sb:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook",
15 |     "test:e2e": "vue-cli-service test:e2e",
16 |     "test:unit": "vue-cli-service test:unit"
17 |   },
18 |   "dependencies": {
19 |     "vue-reactive-provide": "^0.2.2"
20 |   },
21 |   "devDependencies": {
22 |     "@storybook/addon-actions": "^5.0.0",
23 |     "@storybook/addon-knobs": "^5.0.0",
24 |     "@storybook/addon-links": "^5.0.0",
25 |     "@storybook/addon-notes": "^5.0.0",
26 |     "@vue/cli-plugin-babel": "^3.2.0",
27 |     "@vue/cli-plugin-e2e-cypress": "^3.4.0",
28 |     "@vue/cli-plugin-eslint": "^3.2.0",
29 |     "@vue/cli-plugin-unit-jest": "^3.2.0",
30 |     "@vue/cli-service": "^3.2.0",
31 |     "@vue/eslint-config-prettier": "^4.0.0",
32 |     "@vue/test-utils": "^1.0.0-beta.28",
33 |     "babel-core": "7.0.0-bridge.0",
34 |     "babel-eslint": "^10.0.1",
35 |     "babel-jest": "^23.6.0",
36 |     "eslint": "^5.8.0",
37 |     "eslint-plugin-vue": "^5.0.0-0",
38 |     "lint-staged": "^7.2.2",
39 |     "node-sass": "^4.11.0",
40 |     "prettier-eslint": "^8.8.2",
41 |     "sass-loader": "^7.1.0",
42 |     "vue": "^2.5.17",
43 |     "vue-cli-plugin-storybook": "^0.6.1",
44 |     "vue-router": "^3.0.1",
45 |     "vue-template-compiler": "^2.5.17"
46 |   },
47 |   "files": [
48 |     "dist",
49 |     "src"
50 |   ],
51 |   "gitHooks": {
52 |     "pre-commit": "lint-staged"
53 |   },
54 |   "lint-staged": {
55 |     "*.js": [
56 |       "vue-cli-service lint",
57 |       "git add"
58 |     ],
59 |     "*.vue": [
60 |       "vue-cli-service lint",
61 |       "git add"
62 |     ]
63 |   },
64 |   "main": "dist/VueFiledrop.common.js",
65 |   "sideEffects": [
66 |     "*.css"
67 |   ]
68 | }
69 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {},
4 |   },
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LinusBorg/vue-filedrop/1e828dab478f7a8bc302d83fd9542d3cea6ed739/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-filedrop</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-filedrop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/components/FileBox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="vue-filedrop-box" v-on="events" :class="classes"><slot /></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | import { PROVIDE_KEY } from '@/utils'
 7 | export default {
 8 |   name: 'FileBox',
 9 |   inject: {
10 |     filedrop: {
11 |       from: PROVIDE_KEY,
12 |       default: {},
13 |     },
14 |   },
15 |   computed: {
16 |     events() {
17 |       const click = !this.filedrop.hasFiles
18 |         ? {
19 |             click: this.open,
20 |           }
21 |         : {}
22 |       return {
23 |         ...click,
24 |         ...this.filedrop.dragEvents,
25 |       }
26 |     },
27 |     classes() {
28 |       return [this.hoverClass, this.draggingClass, this.hasFilesClass]
29 |     },
30 |     hasFilesClass() {
31 |       return !this.filedrop.hasFiles ? 'vue-filedrop-no-files' : ''
32 |     },
33 |     hoverClass() {
34 |       return this.filedrop.hovering ? 'vue-filedrop-hovering' : ''
35 |     },
36 |     draggingClass() {
37 |       return this.filedrop.dragging ? 'vue-filedrop-dragging' : ''
38 |     },
39 |   },
40 |   methods: {
41 |     open() {
42 |       const { files, open } = this.filedrop
43 |       !files.length && open()
44 |     },
45 |   },
46 | }
47 | </script>
48 | 
49 | <style lang="scss">
50 | $padding: 15px;
51 | 
52 | .vue-filedrop-box {
53 |   margin: 1rem;
54 |   display: flex;
55 |   justify-content: center;
56 |   align-items: center;
57 |   display: flex;
58 |   flex: 1 1 auto;
59 |   border: 1px solid #ccc;
60 |   border-radius: 3px;
61 | 
62 |   padding: $padding;
63 | 
64 |   &:hover {
65 |     cursor: inherit;
66 | 
67 |     &.vue-filedrop-no-files {
68 |       cursor: pointer;
69 |     }
70 |   }
71 | 
72 |   &.vue-filedrop-dragging {
73 |     border-style: dashed;
74 |     border-width: 2px;
75 |   }
76 | 
77 |   &.vue-filedrop-hovering {
78 |     border-color: #aaa;
79 |     // background-color: #fdfdfd;
80 |     box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.22);
81 |   }
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/components/FileDrop.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :is="tag" ref="wrapper" class="vue-filedrop-wrapper">
  3 |     <input
  4 |       class="vue-filedrop-input"
  5 |       type="file"
  6 |       style="display: none"
  7 |       ref="input"
  8 |       :multiple="this.max > 1"
  9 |       :max="max"
 10 |       :key="`vueFiledropInput_${inputKey}`"
 11 |       @change="onFileInputChange"
 12 |     />
 13 | 
 14 |     <slot v-bind="fileDropProps" />
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | import Vue from 'vue'
 20 | import { ReactiveProvideMixin } from 'vue-reactive-provide'
 21 | import { PROVIDE_KEY, pick } from '../utils'
 22 | import GlobalDragEventBus from '../utils/globalDragEventBus'
 23 | 
 24 | const propsToProvide = [
 25 |   // State
 26 |   'files',
 27 |   'hovering',
 28 |   'dragging',
 29 |   'maxExceeded',
 30 |   // Props
 31 |   'disabled',
 32 |   // computed
 33 |   'dragEvents',
 34 |   'hasFiles',
 35 |   // Methods
 36 |   'open',
 37 |   'emit',
 38 |   'remove',
 39 |   'clear',
 40 | ]
 41 | 
 42 | const Provide = ReactiveProvideMixin({
 43 |   name: PROVIDE_KEY,
 44 |   nameForComputed: 'fileDropProps',
 45 |   include: propsToProvide,
 46 | })
 47 | 
 48 | export default Vue.extend({
 49 |   name: 'FileDrop',
 50 |   mixins: [Provide],
 51 |   props: {
 52 |     disabled: {
 53 |       type: Boolean,
 54 |     },
 55 |     filter: {
 56 |       type: Function,
 57 |       default: files => files,
 58 |     },
 59 |     max: {
 60 |       type: Number,
 61 |       default: Infinity,
 62 |       validator: max => max && +max >= 1,
 63 |     },
 64 |     stateless: {
 65 |       type: Boolean,
 66 |     },
 67 |     tag: {
 68 |       type: String,
 69 |       default: 'DIV',
 70 |     },
 71 |   },
 72 | 
 73 |   data() {
 74 |     return {
 75 |       hovering: false,
 76 |       dragging: false,
 77 |       processing: false,
 78 |       rawFiles: [],
 79 |       files: [],
 80 |       inputKey: 0, // hack to reset input element
 81 |     }
 82 |   },
 83 | 
 84 |   computed: {
 85 |     hasFiles() {
 86 |       return !!this.files.length
 87 |     },
 88 |     dragEvents() {
 89 |       return pick(this, ['dragover', 'dragenter', 'dragleave', 'drop'])
 90 |     },
 91 |     maxExceeded() {
 92 |       const diff = this.rawFiles.length - this.max
 93 |       return diff > 0 ? diff : false
 94 |     },
 95 |   },
 96 | 
 97 |   created() {
 98 |     this.$_globalEventHandler = v => {
 99 |       if (this.disabled) return
100 |       this.dragging = v
101 |       if (this.hovering) {
102 |         this.hovering = false
103 |       }
104 |     }
105 |     GlobalDragEventBus.$on('dragging', this.$_globalEventHandler)
106 |   },
107 |   beforeDestroy() {
108 |     GlobalDragEventBus.$off('dragging', this.$_globalEventHandler)
109 |   },
110 | 
111 |   watch: {
112 |     files: 'emit',
113 |   },
114 | 
115 |   methods: {
116 |     /*
117 |      * Drag&Drop handling
118 |      */
119 |     dragover(e) {
120 |       if (this.disabled) return
121 |       e.preventDefault()
122 |     },
123 |     dragenter(e) {
124 |       if (this.disabled) return
125 |       if (this.$_first) {
126 |         this.$_second = true
127 |       } else {
128 |         this.$_first = true
129 |         this.hovering = true
130 |         this.$emit('dragenter', e)
131 |       }
132 |     },
133 |     dragleave(e) {
134 |       if (this.disabled) return
135 |       if (this.$_second) {
136 |         this.$_second = false
137 |       } else if (this.$_first) {
138 |         this.$_first = false
139 |       }
140 | 
141 |       if (!this.$_first && !this.$_second) {
142 |         this.hovering = false
143 |         this.$emit('dragleave', e)
144 |       }
145 |     },
146 |     drop(e) {
147 |       if (this.disabled) return
148 |       e.preventDefault()
149 |       this.onFileDrop(e)
150 |     },
151 | 
152 |     /*
153 |      * Controlling the File Input
154 |      */
155 |     open() {
156 |       if (this.disabled) return
157 |       const { input } = this.$refs
158 |       input && input.click()
159 |     },
160 |     clear() {
161 |       this.inputKey++ // forces re-creation of input to clear it on all browsers
162 |       this.$nextTick(() => {
163 |         this.files = []
164 |         this.rawFiles = []
165 |       })
166 |     },
167 | 
168 |     /*
169 |      * File Events
170 |      */
171 |     onFileInputChange(event) {
172 |       this.handleFiles(event.target.files)
173 |     },
174 | 
175 |     onFileDrop(event) {
176 |       this.hovering = false
177 |       this.dragging = false
178 |       const files = event.dataTransfer.files
179 |       this.handleFiles(files)
180 |     },
181 | 
182 |     // File Processing
183 |     handleFiles(filesList) {
184 |       this.rawFiles = [...filesList]
185 |       if (this.maxExceeded) return Promise.reject()
186 |       let files = this.filter(this.rawFiles)
187 |       if (this.stateless) {
188 |         this.emit(files)
189 |       } else {
190 |         this.files = files
191 |       }
192 |     },
193 |     emit(files = this.files) {
194 |       this.$emit('change', files.slice())
195 |     },
196 |     remove(idx) {
197 |       this.$nextTick(() => {
198 |         this.files.splice(idx, 1)
199 |       })
200 |     },
201 |   },
202 | })
203 | </script>
204 | 
205 | <style lang="scss">
206 | .vue-filedrop-wrapper {
207 |   display: flex;
208 |   flex: 1 1 auto;
209 | }
210 | </style>
211 | 


--------------------------------------------------------------------------------
/src/components/FileList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-filedrop--filelist-container">
  3 |     <div v-if="filedrop.hasFiles" class="filedrop--filelist">
  4 |       <h3 class="vue-filedrop--filelist-header">
  5 |         {{ filedrop.files.length }} files added
  6 |       </h3>
  7 |       <div
  8 |         v-for="(file, idx) in filedrop.files"
  9 |         :key="`${file.name}_${file.size}`"
 10 |         class="vue-filedrop--list-item"
 11 |       >
 12 |         <div class="vue-filedrop--name" :title="file.name">
 13 |           {{ file.name | shorten }} ({{ file.size | size }})
 14 |         </div>
 15 |         <div class="vue-filedrop--action">
 16 |           <button class="filedrop--button" @click="remove(idx)">X</button>
 17 |         </div>
 18 |       </div>
 19 |     </div>
 20 |     <div v-else class="vue-filedrop--list-hint-container">
 21 |       <p class="vue-filedrop--list-hint">
 22 |         No files yet drop them here or click here to select
 23 |       </p>
 24 |     </div>
 25 |   </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import { PROVIDE_KEY } from '../utils'
 30 | import { size, shorten } from '@/utils/filters'
 31 | export default {
 32 |   name: 'FileList',
 33 |   inject: {
 34 |     filedrop: PROVIDE_KEY,
 35 |   },
 36 |   filters: {
 37 |     size,
 38 |     shorten,
 39 |   },
 40 |   methods: {
 41 |     remove(idx) {
 42 |       this.filedrop.remove(idx)
 43 |     },
 44 |   },
 45 | }
 46 | </script>
 47 | 
 48 | <style scoped lang="scss">
 49 | $bw: 1px;
 50 | $height: 20px;
 51 | .vue-filedrop {
 52 |   &--filelist-container {
 53 |     width: 100%;
 54 |   }
 55 |   &--filelist {
 56 |     font-size: 0.9em;
 57 |   }
 58 |   &--filelist-header {
 59 |     text-align: center;
 60 |   }
 61 |   &--list-item {
 62 |     position: relative;
 63 |     display: flex;
 64 |     padding: 8px 0;
 65 |   }
 66 | 
 67 |   &--list-item:not(:last-child):after {
 68 |     position: absolute;
 69 |     content: '';
 70 |     background-color: #ccc;
 71 |     height: 1px;
 72 |     left: 0;
 73 |     right: 0;
 74 |     bottom: 1px;
 75 |   }
 76 | 
 77 |   &--name {
 78 |     flex: 1 0 auto;
 79 |     padding: 3px 10px;
 80 |   }
 81 | 
 82 |   &--action {
 83 |     flex: 0 0 20px;
 84 |     margin: auto;
 85 |   }
 86 | 
 87 |   &--button {
 88 |     cursor: pointer;
 89 |     display: block;
 90 |     color: #444;
 91 |     border-radius: 50%;
 92 |     border: $bw solid #ccc;
 93 |     padding: 0;
 94 |     height: $height;
 95 |     width: $height;
 96 |     line-height: calc(#{$height} - (2 * #{$bw}));
 97 |   }
 98 | 
 99 |   &--button:hover {
100 |     background-color: #eee;
101 |   }
102 | 
103 |   &--list-hint-container {
104 |     display: flex;
105 |     height: 100%;
106 |     justify-content: center;
107 |     align-items: center;
108 |   }
109 |   &--list-hint {
110 |     text-align: center;
111 |   }
112 | }
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/components/ImageList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vue-filedrop--imagepreview">
  3 |     <div
  4 |       v-for="(file, idx) in images"
  5 |       :key="`${file.name}_${file.size}`"
  6 |       class="vue-filedrop--image-container"
  7 |       :style="widthStyle"
  8 |       :title="file.name"
  9 |     >
 10 |       <img
 11 |         :src="file.data"
 12 |         :alt="file.name"
 13 |         style="width: 100%"
 14 |         @click="handleClick(idx)"
 15 |       />
 16 |       <br />
 17 |       <div class="vue-filedrop--text" :class="textMaxWidth">
 18 |         {{ file.name }}
 19 |       </div>
 20 |       <a
 21 |         href="#"
 22 |         class="vue-filedrop--remove-link"
 23 |         @click="filedrop.remove(idx)"
 24 |         >x</a
 25 |       >
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import { PROVIDE_KEY, processFiles } from '../utils'
 32 | 
 33 | export default {
 34 |   name: 'ImageList',
 35 |   inject: {
 36 |     filedrop: PROVIDE_KEY,
 37 |   },
 38 |   props: {
 39 |     width: {
 40 |       type: [String, Number],
 41 |       default: 80,
 42 |     },
 43 |     rowCount: {
 44 |       type: Number,
 45 |       default: 1,
 46 |     },
 47 |   },
 48 |   data: () => ({
 49 |     images: [],
 50 |   }),
 51 |   watch: {
 52 |     'filedrop.files': {
 53 |       immediate: true,
 54 |       handler: 'handleFiles',
 55 |     },
 56 |   },
 57 |   computed: {
 58 |     widthStyle() {
 59 |       return `width: ${this.width}px`
 60 |     },
 61 |     textMaxWidth() {
 62 |       return `max-width: calc(${this.width}px + 20px)`
 63 |     },
 64 |   },
 65 |   methods: {
 66 |     handleClick(idx) {
 67 |       this.$emit('image-click', idx, this.filedrop.files[idx])
 68 |     },
 69 |     handleFiles(files) {
 70 |       if (!files.length) return
 71 |       processFiles(files, 'DataURL').then(images => {
 72 |         this.images = images
 73 |       })
 74 |     },
 75 |   },
 76 | }
 77 | </script>
 78 | 
 79 | <style scoped lang="scss">
 80 | .vue-filedrop--imagepreview {
 81 |   display: flex;
 82 |   flex-wrap: wrap;
 83 |   justify-content: center;
 84 |   align-content: space-between;
 85 | 
 86 |   & .vue-filedrop--image-container {
 87 |     position: relative;
 88 |     margin-top: 10px;
 89 |     margin-left: 10px;
 90 |     margin-right: 10px;
 91 |     padding: 3px;
 92 |     border: 1px solid #ddd;
 93 |   }
 94 | 
 95 |   & .vue-filedrop--text {
 96 |     font-size: 0.7rem;
 97 |     height: 0.8rem;
 98 |     line-height: 0.8rem;
 99 |     word-wrap: none;
100 |     overflow: hidden;
101 |   }
102 | 
103 |   & .vue-filedrop--remove-link,
104 |   .vue-filedrop--remove-link:hover,
105 |   .vue-filedrop--remove-link:active {
106 |     position: absolute;
107 |     display: block;
108 |     background-color: white;
109 |     border-radius: 50%;
110 |     border: 1px solid #ddd;
111 |     color: red;
112 | 
113 |     top: -10px;
114 |     right: -10px;
115 |     height: 20x;
116 |     line-height: 20px;
117 |     width: 20px;
118 | 
119 |     text-align: center;
120 |     text-decoration: none;
121 |   }
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/components/MyButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button class="button is-primary" @click="onClick"><slot></slot></button>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: 'my-button',
 8 | 
 9 |   methods: {
10 |     onClick() {
11 |       this.$emit('click')
12 |     },
13 |   },
14 | }
15 | </script>
16 | 
17 | <style>
18 | button {
19 |   border: 1px solid #eee;
20 |   border-radius: 3px;
21 |   background-color: #ffffff;
22 |   cursor: pointer;
23 |   font-size: 15pt;
24 |   padding: 3px 10px;
25 |   margin: 10px;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/full.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | /**
 4 |  * This is not yet part of the lib.
 5 |  *
 6 |  * The goal ist to first release the core version and then add
 7 |  * additional components as we identify the use cases.
 8 |  */
 9 | 
10 | import FileDrop from './components/FileDrop'
11 | 
12 | import FileBox from './components/FileBox'
13 | import ImageList from './components/ImageList'
14 | import FileList from './components/FileList'
15 | 
16 | import * as filters from './utils'
17 | 
18 | const notFalse = v => v !== false
19 | /* eslint-disable-next-line no-unused-vars */
20 | function install(_Vue, options = {}) {
21 |   notFalse(options.FileDrop) &&
22 |     Vue.component(options.FileDrop || 'FileDrop', FileDrop)
23 |   notFalse(options.FileBox) &&
24 |     Vue.component(options.FileBox || 'FileBox', FileBox)
25 |   notFalse(options.ImageList) &&
26 |     Vue.component(options.ImageList || 'ImageList', ImageList)
27 |   notFalse(options.FileList) &&
28 |     Vue.component(options.FileList || 'FileList', FileList)
29 | 
30 |   if (options.filters !== false) {
31 |     Object.keys(filters).forEach(filterName => {
32 |       Vue.filter(`filedrop:${filterName}`, filters[filterName])
33 |     })
34 |   }
35 | }
36 | 
37 | // autoinstall for script-tag includes
38 | const w = window
39 | const hasWindow = typeof w !== 'undefined'
40 | if (hasWindow & w.Vue && w.Vue === Vue) {
41 |   Vue.use({ install })
42 | }
43 | 
44 | export default {
45 |   install,
46 | }
47 | 
48 | export { FileBox, FileDrop }
49 | export * from './utils/filters'
50 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import FileDrop from './components/FileDrop'
 3 | 
 4 | /* eslint-disable-next-line no-unused-vars */
 5 | function install(_Vue, { filedropName } = {}) {
 6 |   if (filedropName !== false) {
 7 |     Vue.component(filedropName || FileDrop.name, FileDrop)
 8 |   }
 9 | }
10 | 
11 | // autoinstall for script-tag includes
12 | const hasWindow = typeof window !== 'undefined'
13 | if (hasWindow & window.Vue && window.Vue === Vue) {
14 |   Vue.use({ install })
15 | }
16 | 
17 | export default {
18 |   install,
19 | }
20 | 
21 | export { FileDrop }
22 | 


--------------------------------------------------------------------------------
/src/stories/index.stories.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable import/no-extraneous-dependencies */
 2 | import { storiesOf } from '@storybook/vue'
 3 | import { action } from '@storybook/addon-actions'
 4 | import { linkTo } from '@storybook/addon-links'
 5 | 
 6 | import MyButton from '../components/MyButton.vue'
 7 | 
 8 | storiesOf('Button', module)
 9 |   .add('with text', () => ({
10 |     components: { MyButton },
11 |     template: '<my-button @click="action">Hello Button</my-button>',
12 |     methods: { action: action('clicked') },
13 |   }))
14 |   .add('with JSX', () => ({
15 |     components: { MyButton },
16 |     render() {
17 |       return <my-button onClick={this.action}>With JSX</my-button>
18 |     },
19 |     methods: { action: linkTo('Button', 'with some emoji') },
20 |   }))
21 |   .add('with some emoji', () => ({
22 |     components: { MyButton },
23 |     template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
24 |     methods: { action: action('clicked') },
25 |   }))
26 | 


--------------------------------------------------------------------------------
/src/utils/filters.js:
--------------------------------------------------------------------------------
 1 | const sizes = {
 2 |   kiB: 1000,
 3 |   MB: 1000000,
 4 |   GB: 1000000000,
 5 | }
 6 | function getSizeFactor(size) {
 7 |   if (size >= sizes.GB) {
 8 |     return [sizes.GB, 'GB']
 9 |   } else if (size >= sizes.MB) {
10 |     return [sizes.MB, 'MB']
11 |   } else if (size >= sizes.kiB) {
12 |     return [sizes.kiB, 'kiB']
13 |   } else {
14 |     return [1, 'B']
15 |   }
16 | }
17 | const defaultSize = [1000, 'kiB']
18 | 
19 | export function size(v, unit = 'auto') {
20 |   const [factor, text] = unit === 'auto' ? getSizeFactor(v) : defaultSize
21 |   return `${Math.round((v / factor) * 100, 2) / 100} ${text}`
22 | }
23 | 
24 | export function shorten(_text = '', maxlen = 50, points = true) {
25 |   if (typeof _text !== 'string') return ''
26 | 
27 |   const text = _text.slice(0, maxlen)
28 | 
29 |   return points && text !== _text ? `${text}...` : text
30 | }
31 | 


--------------------------------------------------------------------------------
/src/utils/globalDragEventBus.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | const vm = new Vue({
 4 |   created() {
 5 |     const html = document.querySelector('html')
 6 |     html.addEventListener('dragenter', this.dragenter)
 7 |     html.addEventListener('dragleave', this.dragleave)
 8 |     html.addEventListener('dragend', this.dragend)
 9 |     html.addEventListener('drop', this.dragend)
10 |   },
11 |   beforeDestroy() {
12 |     const html = document.querySelector('html')
13 |     html.addEventListener('dragenter', this.dragenter)
14 |     html.removeEventListener('dragleave', this.dragleave)
15 |     html.removeEventListener('dragend', this.dragend)
16 |     html.removeEventListener('drop', this.dragend)
17 |   },
18 |   methods: {
19 |     dragenter() {
20 |       if (this.$_firstE) {
21 |         this.$_secondE = true
22 |       } else {
23 |         this.$_firstE = true
24 |         this.$emit('dragging', true)
25 |       }
26 |     },
27 |     dragleave() {
28 |       if (this.$_secondE) {
29 |         this.$_secondE = false
30 |       } else if (this.$_firstE) {
31 |         this.$_firstE = false
32 |       }
33 | 
34 |       if (!this.$_firstE && !this.$_secondE) {
35 |         this.$emit('dragging', false)
36 |       }
37 |     },
38 |     dragend() {
39 |       this.$emit('dragging', false)
40 |     },
41 |   },
42 | })
43 | 
44 | export default vm
45 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | export const PROVIDE_KEY = '__vueFiledrop__'
 2 | 
 3 | const READ_AS_VALUES = ['ArrayBuffer', 'BinaryString', 'DataURL', 'Text']
 4 | 
 5 | export function validateReadAs(v) {
 6 |   const isValid = READ_AS_VALUES.includes(v)
 7 |   if (!isValid)
 8 |     console.warn(
 9 |       `[vue-droparea: ${v} is not a valid value for the 'readAs' prop.`
10 |     )
11 |   return isValid
12 | }
13 | 
14 | export function processFiles(files, readAs = 'BinaryString') {
15 |   if (!validateReadAs(readAs)) {
16 |     throw new Error(`[vue-filedrop]: ${readAs} is not a valid FileReader mode.
17 |   Expected one of ['ArrayBuffer', 'BinaryString', 'DataURL', 'Text']
18 |     `)
19 |   }
20 | 
21 |   const promises = [...files].map(file => {
22 |     return readFile(file, readAs)
23 |   })
24 |   return Promise.all(promises)
25 | }
26 | 
27 | function readFile(file, readAs) {
28 |   return new Promise((resolve, reject) => {
29 |     const reader = new FileReader()
30 | 
31 |     reader.onerror = reject
32 |     reader.onload = () => {
33 |       resolve({
34 |         name: file.name,
35 |         size: file.size,
36 |         type: file.type,
37 |         data: reader.result,
38 |       })
39 |     }
40 | 
41 |     reader[`readAs${readAs}`](file)
42 |   })
43 | }
44 | 
45 | export function pick(object, keys = []) {
46 |   return keys.reduce((acc, key) => {
47 |     acc[key] = object[key]
48 |     return acc
49 |   }, {})
50 | }
51 | 


--------------------------------------------------------------------------------
/tests/e2e/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: ['cypress'],
 3 |   env: {
 4 |     mocha: true,
 5 |     'cypress/globals': true,
 6 |   },
 7 |   rules: {
 8 |     strict: 'off',
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/tests/e2e/plugins/index.js:
--------------------------------------------------------------------------------
 1 | // https://docs.cypress.io/guides/guides/plugins-guide.html
 2 | 
 3 | // if you need a custom webpack configuration you can uncomment the following import
 4 | // and then use the `file:preprocessor` event
 5 | // as explained in the cypress docs
 6 | // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
 7 | 
 8 | /* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */
 9 | // const webpack = require('@cypress/webpack-preprocessor')
10 | 
11 | module.exports = (on, config) => {
12 |   // on('file:preprocessor', webpack({
13 |   //  webpackOptions: require('@vue/cli-service/webpack.config'),
14 |   //  watchOptions: {}
15 |   // }))
16 | 
17 |   return Object.assign({}, config, {
18 |     fixturesFolder: 'tests/e2e/fixtures',
19 |     integrationFolder: 'tests/e2e/specs',
20 |     screenshotsFolder: 'tests/e2e/screenshots',
21 |     videosFolder: 'tests/e2e/videos',
22 |     supportFile: 'tests/e2e/support/index.js',
23 |   })
24 | }
25 | 


--------------------------------------------------------------------------------
/tests/e2e/specs/test.js:
--------------------------------------------------------------------------------
1 | // https://docs.cypress.io/api/introduction/api.html
2 | 
3 | describe('My First Test', () => {
4 |   it('Visits the app root url', () => {
5 |     cy.visit('/')
6 |     cy.contains('h2', 'The simplest FileDrop')
7 |   })
8 | })
9 | 


--------------------------------------------------------------------------------
/tests/e2e/support/commands.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************
 2 | // This example commands.js shows you how to
 3 | // create various custom commands and overwrite
 4 | // existing commands.
 5 | //
 6 | // For more comprehensive examples of custom
 7 | // commands please read more here:
 8 | // https://on.cypress.io/custom-commands
 9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This is will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 | 


--------------------------------------------------------------------------------
/tests/e2e/support/index.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/index.js is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true,
4 |   },
5 | }
6 | 


--------------------------------------------------------------------------------
/tests/unit/FileDrop/filedrop.spec.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import { mount } from '@vue/test-utils'
  3 | import FileDrop from '@/components/FileDrop'
  4 | import {
  5 |   createFile,
  6 |   createWrapper,
  7 |   InjectCatcherStub,
  8 |   mockConsole,
  9 | } from '../resources/filedrop.utils'
 10 | const tick = () => Vue.nextTick()
 11 | 
 12 | const lastCallArgs = fn => {
 13 |   return fn.mock.calls[fn.mock.calls.length - 1][0]
 14 | }
 15 | 
 16 | describe('The FileDrop component', () => {
 17 |   test('mounts with normal slot', async () => {
 18 |     const wrapper = mount(FileDrop, {
 19 |       slots: {
 20 |         default: `<p class="test">Test</p>`,
 21 |       },
 22 |     })
 23 |     await Vue.nextTick()
 24 |     const el = wrapper.find('.test')
 25 | 
 26 |     expect(el.text()).toBe('Test')
 27 |   })
 28 | 
 29 |   test('scoped slot passes slotProps', async () => {
 30 |     const { fn } = createWrapper()
 31 |     await Vue.nextTick()
 32 |     expect(fn).toHaveBeenCalledWith(expect.any(Object))
 33 |     const props = lastCallArgs(fn)
 34 | 
 35 |     expect(props.open).toEqual(expect.any(Function))
 36 |   })
 37 | 
 38 |   test('renders input', async () => {
 39 |     const { wrapper } = createWrapper()
 40 | 
 41 |     const input = wrapper.find('input')
 42 | 
 43 |     await Vue.nextTick()
 44 |     expect(input.element).toBeDefined()
 45 |     expect(input.element.type).toBe('file')
 46 |   })
 47 | 
 48 |   test('input can add a file', async () => {
 49 |     const { wrapper, fn } = createWrapper()
 50 | 
 51 |     const file = createFile()
 52 | 
 53 |     // hacky because we can't trigger a proper change event on the input
 54 |     wrapper.vm.onFileInputChange({
 55 |       target: {
 56 |         files: [file],
 57 |       },
 58 |     })
 59 | 
 60 |     await tick()
 61 | 
 62 |     expect(lastCallArgs(fn).files).toEqual(expect.any(Array))
 63 |     expect(lastCallArgs(fn).files.length).toBe(1)
 64 |   })
 65 | 
 66 |   test('drop can add a file', async () => {
 67 |     const { wrapper, fn } = createWrapper()
 68 | 
 69 |     const file = createFile()
 70 | 
 71 |     // hacky because we can't trigger a proper change event on the input
 72 |     wrapper.vm.onFileDrop({
 73 |       dataTransfer: {
 74 |         files: [file],
 75 |       },
 76 |     })
 77 | 
 78 |     await tick()
 79 | 
 80 |     expect(lastCallArgs(fn).files).toEqual(expect.any(Array))
 81 |     expect(lastCallArgs(fn).files.length).toBe(1)
 82 |   })
 83 | 
 84 |   test('remove does remove a file', async () => {
 85 |     const { wrapper, fn } = createWrapper()
 86 | 
 87 |     const file = createFile()
 88 | 
 89 |     // hacky because we can't trigger a proper change event on the input
 90 |     wrapper.vm.onFileDrop({
 91 |       dataTransfer: {
 92 |         files: [file],
 93 |       },
 94 |     })
 95 | 
 96 |     await tick()
 97 | 
 98 |     const props = lastCallArgs(fn)
 99 | 
100 |     expect(lastCallArgs(fn).files.length).toBe(1)
101 |     props.remove(0)
102 | 
103 |     await tick()
104 |     expect(lastCallArgs(fn).files.length).toBe(0)
105 |   })
106 | 
107 |   test('clear does remove all files', async () => {
108 |     const { wrapper, fn } = createWrapper({
109 |       propsData: {
110 |         multiple: true,
111 |       },
112 |     })
113 | 
114 |     const file = createFile()
115 |     const file2 = createFile()
116 |     // hacky because we can't trigger a proper change event on the input
117 |     wrapper.vm.onFileDrop({
118 |       dataTransfer: {
119 |         files: [file, file2],
120 |       },
121 |     })
122 | 
123 |     await tick()
124 | 
125 |     const props = lastCallArgs(fn)
126 | 
127 |     expect(lastCallArgs(fn).files.length).toBe(2)
128 |     props.clear()
129 | 
130 |     await tick()
131 |     expect(lastCallArgs(fn).files.length).toBe(0)
132 |   })
133 | 
134 |   test('emits event for added files', async () => {
135 |     const { wrapper } = createWrapper()
136 | 
137 |     const file = createFile()
138 |     const cb = jest.fn()
139 |     // hacky because we can't trigger a proper change event on the input
140 |     wrapper.vm.$on('change', cb)
141 |     wrapper.vm.onFileDrop({
142 |       dataTransfer: {
143 |         files: [file],
144 |       },
145 |     })
146 | 
147 |     await tick()
148 | 
149 |     expect(wrapper.vm.files.length).toBe(1)
150 |     expect(cb).toHaveBeenCalledWith(expect.arrayContaining([file]))
151 | 
152 |     cb.mockClear()
153 |     wrapper.vm.emit()
154 |     expect(cb).toHaveBeenCalledWith(expect.arrayContaining([file]))
155 |   })
156 | 
157 |   test('can switch root element', async () => {
158 |     const { wrapper } = createWrapper({
159 |       propsData: {
160 |         tag: 'span',
161 |       },
162 |     })
163 | 
164 |     expect(wrapper.vm.$el.tagName).toBe('SPAN')
165 |   })
166 | 
167 |   test('respects the max prop', async () => {
168 |     const spys = mockConsole()
169 |     const { wrapper, fn } = createWrapper({
170 |       propsData: {
171 |         max: 2,
172 |       },
173 |     })
174 | 
175 |     const input = wrapper.find('input')
176 | 
177 |     expect(input.element.max).toBe('2')
178 | 
179 |     const file = createFile()
180 |     const file2 = createFile()
181 |     const file3 = createFile()
182 |     wrapper.vm.onFileDrop({
183 |       dataTransfer: {
184 |         files: [file, file2, file3],
185 |       },
186 |     })
187 | 
188 |     await tick()
189 | 
190 |     const props = lastCallArgs(fn)
191 |     expect(props.maxExceeded).toBe(1)
192 |     expect(props.files.length).toBe(0)
193 | 
194 |     spys.unwatch()
195 |   })
196 | 
197 |   test('allows only one file to be dropped when max is set to 1', async () => {
198 |     const spys = mockConsole()
199 |     const { wrapper } = createWrapper({
200 |       propsData: {
201 |         max: 1,
202 |       },
203 |     })
204 | 
205 |     const file = createFile()
206 |     const file2 = createFile()
207 | 
208 |     wrapper.vm.onFileDrop({
209 |       dataTransfer: {
210 |         files: [file, file2],
211 |       },
212 |     })
213 | 
214 |     expect(wrapper.vm.files.length).toBe(0)
215 |     expect(wrapper.vm.maxExceeded).toBe(1)
216 | 
217 |     wrapper.vm.onFileDrop({
218 |       dataTransfer: {
219 |         files: [file],
220 |       },
221 |     })
222 | 
223 |     expect(wrapper.vm.files.length).toBe(1)
224 |     expect(wrapper.vm.maxExceeded).toBe(false)
225 | 
226 |     spys.unwatch()
227 |   })
228 | 
229 |   test('provides the same API through provide and scopedSlot', async () => {
230 |     const slotSpy = jest.fn()
231 |     const injectSpy = jest.fn()
232 | 
233 |     createWrapper({
234 |       scopedSlots: {
235 |         default: function(props) {
236 |           slotSpy(props)
237 |           return this.$createElement(InjectCatcherStub(injectSpy))
238 |         },
239 |       },
240 |     })
241 | 
242 |     await tick()
243 | 
244 |     const slotProps = lastCallArgs(slotSpy)
245 |     const injectProps = lastCallArgs(injectSpy)
246 | 
247 |     expect(slotProps).toMatchObject(injectProps)
248 |   })
249 | })
250 | 


--------------------------------------------------------------------------------
/tests/unit/resources/Simple.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Placholder</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {}
 7 | </script>
 8 | 
 9 | <style scoped></style>
10 | 


--------------------------------------------------------------------------------
/tests/unit/resources/filedrop.utils.js:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils'
 2 | 
 3 | import FileDrop from '@/components/FileDrop'
 4 | 
 5 | export const createFile = (content = 'text') => {
 6 |   return new File([content], 'test.txt', { type: 'text/pain' })
 7 | }
 8 | 
 9 | export const mockConsole = () => {
10 |   const spys = {
11 |     error: jest.spyOn(global.console, 'error').mockImplementation(() => ({})),
12 |     log: jest.spyOn(global.console, 'log').mockImplementation(() => ({})),
13 |     warn: jest.spyOn(global.console, 'warn').mockImplementation(() => ({})),
14 |     unwatch: () => {
15 |       spys.error.mockRestore()
16 |       spys.log.mockRestore()
17 |       spys.warn.mockRestore()
18 |     },
19 |   }
20 | 
21 |   return spys
22 | }
23 | 
24 | export const createWrapper = (options = {}) => {
25 |   const fn = jest.fn()
26 |   const instance = mount(FileDrop, {
27 |     ref: 'filedrop',
28 |     scopedSlots: {
29 |       default: props => {
30 |         fn(props)
31 |         return null
32 |       },
33 |     },
34 |     ...options,
35 |   })
36 | 
37 |   return {
38 |     fn,
39 |     wrapper: instance,
40 |   }
41 | }
42 | 
43 | export const InjectCatcherStub = fn => ({
44 |   inject: {
45 |     filedrop: require('../../../src/utils/index').PROVIDE_KEY,
46 |   },
47 |   created() {
48 |     fn(this.filedrop)
49 |   },
50 |   render() {
51 |     return null
52 |   },
53 | })
54 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   lintOnSave: false,
 3 |   css: {
 4 |     extract: process.env.NODE_ENV === 'production',
 5 |   },
 6 |   chainWebpack: config => {
 7 |     config.resolve.symlinks = false
 8 |   },
 9 |   configureWebpack: () => {
10 |     if (process.env.NODE_ENV !== 'production') return
11 |     return {
12 |       externals: {
13 |         'vue-reactive-provide': {
14 |           commonjs: 'vue-reactive-provide',
15 |           commonjs2: 'vue-reactive-provide',
16 |           root: 'VueReactiveProvide',
17 |         },
18 |       },
19 |     }
20 |   },
21 | }
22 | 


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