Skip to content

Commit 4b4434d

Browse files
author
saivarunk
committed
initial commit
0 parents  commit 4b4434d

14 files changed

+5696
-0
lines changed

‎.babelrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": ["es2015", "stage-2"],
3+
"plugins": ["transform-runtime"],
4+
"comments": false
5+
}

‎.eslintrc.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
4+
extends: 'standard',
5+
// required to lint *.vue files
6+
plugins: [
7+
'html'
8+
],
9+
// add your custom rules here
10+
'rules': {
11+
// allow paren-less arrow functions
12+
'arrow-parens': 0,
13+
14+
// allow debugger during development
15+
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
16+
}
17+
}

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.idea
2+
node_modules/
3+
npm-debug.log

‎LICENCE

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2014-2016 kazuya kawaguchi
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9+
the Software, and to permit persons to whom the Software is furnished to do so,
10+
subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# vue-simple-upload
2+
3+
An simple file upload component for vue.js.
4+
5+
## Installation
6+
7+
`npm install vue-simple-upload`
8+
9+
10+
## Usage
11+
vue-simple-upload is a UMD module, which can be used as a module in both CommonJS and AMD modular environments.
12+
When in non-modular environment, FileUpload will be registered as a global variable.</p>
13+
14+
### ES6
15+
```js
16+
17+
import FileUpload from 'vue-simple-upload/dist/FileUpload'
18+
19+
export default {
20+
...
21+
components: {
22+
FileUpload
23+
},
24+
...
25+
}
26+
```
27+
After that, you can use it in your templates:
28+
29+
```html
30+
<fileupload target="http://localhost:8000/api/upload" action:"POST"></fileupload>
31+
```
32+
33+
### CommonJS
34+
```js
35+
var Vue = require('vue')
36+
var FileUpload = require('vue-simple-upload')
37+
38+
var YourComponent = Vue.extend({
39+
...
40+
components: {
41+
'fileupload': FileUpload.FileUpload
42+
},
43+
...
44+
})
45+
```
46+
47+
### Browser
48+
49+
```
50+
<script src="path/to/vue/vue.min.js"></script>
51+
<script src="path/to/vue-simple-upload/dist/vue-simple-upload.min.js"></script>
52+
53+
new Vue({
54+
...
55+
components: {
56+
'fileupload': FileUpload.FileUpload
57+
},
58+
...
59+
})
60+
```
61+
62+
63+
## Props
64+
65+
- target (String):
66+
Target endpoint to upload the file
67+
68+
- action (String):
69+
Target action ( POST or PUT )
70+
71+
72+
## Event
73+
74+
75+
76+
## License
77+
78+
Released under the [MIT](LICENSE) License.

‎build/webpack.base.conf.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
var projectRoot = path.resolve(__dirname, '../')
5+
6+
module.exports = {
7+
entry: './src/',
8+
output: {
9+
path: path.resolve(__dirname, '../dist'),
10+
publicPath: '/gh-pages',
11+
filename: 'vue-simple-upload.min.js',
12+
library: 'FileUpload',
13+
libraryTarget: 'umd'
14+
},
15+
resolve: {
16+
extensions: ['', '.js', '.vue'],
17+
fallback: [path.join(__dirname, 'node_modules')],
18+
alias: {
19+
'src': path.resolve(__dirname, '../src'),
20+
vue: 'vue/dist/vue.js'
21+
}
22+
},
23+
resolveLoader: {
24+
root: path.join(__dirname, 'node_modules'),
25+
},
26+
module: {
27+
preLoaders: [{
28+
test: /\.vue$/,
29+
loader: 'eslint',
30+
include: projectRoot,
31+
exclude: /node_modules/
32+
}, {
33+
test: /\.js$/,
34+
loader: 'eslint',
35+
include: projectRoot,
36+
exclude: /node_modules/
37+
}],
38+
loaders: [{
39+
test: /\.vue$/,
40+
loader: 'vue'
41+
}, {
42+
test: /\.js$/,
43+
loader: 'babel',
44+
exclude: /node_modules/
45+
}, {
46+
test: /\.json$/,
47+
loader: 'json'
48+
}, {
49+
test: /\.html$/,
50+
loader: 'vue-html'
51+
}, {
52+
test: /\.(png|jpg|gif|svg)$/,
53+
loader: 'url',
54+
query: {
55+
limit: 10000,
56+
name: '[name].[ext]?[hash]'
57+
}
58+
}]
59+
},
60+
eslint: {
61+
formatter: require('eslint-friendly-formatter')
62+
},
63+
devServer: {
64+
historyApiFallback: true,
65+
noInfo: false
66+
},
67+
devtool: '#eval-source-map'
68+
}

‎build/webpack.min.conf.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const webpack = require('webpack')
2+
const path = require('path')
3+
const CopyWebpackPlugin = require('copy-webpack-plugin')
4+
const base = require('./webpack.base.conf')
5+
6+
var config = Object.assign({}, base)
7+
8+
config.devtool = '#source-map'
9+
config.plugins = (config.plugins || []).concat([
10+
new webpack.DefinePlugin({
11+
'process.env': {
12+
NODE_ENV: '"production"'
13+
}
14+
}),
15+
new webpack.optimize.UglifyJsPlugin({
16+
compress: {
17+
warnings: false
18+
}
19+
}),
20+
new webpack.optimize.OccurenceOrderPlugin(),
21+
new CopyWebpackPlugin([{
22+
from: path.resolve(__dirname, '../src') + './FileUpload.vue'
23+
}])
24+
])
25+
26+
module.exports = config

‎dist/FileUpload.vue

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<input type="file" name="fileUpload" @change="onFileChange">
3+
</template>
4+
5+
<script type="text/babel">
6+
export default {
7+
8+
props: {
9+
target: {
10+
type: String
11+
},
12+
action: {
13+
type: String
14+
}
15+
},
16+
17+
data () {
18+
return {
19+
file: null
20+
}
21+
},
22+
methods: {
23+
emitter (event, data) {
24+
this.$emit(event, data)
25+
},
26+
onFileChange (e) {
27+
let vm = this
28+
29+
if (!this.target || this.target === '') {
30+
console.log('Please provide the target url')
31+
} else if (!this.action || this.action === '') {
32+
console.log('Please provide file upload action ( POST / PUT )')
33+
} else if (this.action !== 'POST' && this.action !== 'PUT') {
34+
console.log('File upload component only allows POST and PUT Actions')
35+
} else {
36+
let files = e.target.files || e.dataTransfer.files
37+
38+
if (!files.length) {
39+
return
40+
};
41+
42+
/*global FormData XMLHttpRequest:true*/
43+
/*eslint no-undef: "error"*/
44+
45+
this.file = files[0]
46+
let formData = new FormData()
47+
formData.append('file', this.file)
48+
49+
var xhr = new XMLHttpRequest()
50+
xhr.open(this.action, this.target)
51+
52+
xhr.onloadstart = function (e) {
53+
vm.emitter('start', e)
54+
}
55+
xhr.onloadend = function (e) {
56+
vm.emitter('finish', e)
57+
}
58+
59+
xhr.send(formData)
60+
}
61+
}
62+
}
63+
}
64+
</script>

‎dist/vue-simple-upload.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)