├── .babelrc
├── .editorconfig
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── ImageInput.vue
└── main.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", { "modules": false }],
4 | "stage-3"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 |
7 | # Editor directories and files
8 | .idea
9 | *.suo
10 | *.ntvs*
11 | *.njsproj
12 | *.sln
13 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # image-upload
2 |
3 | > A companion repository for a [Vue.js 2 image uploading component tutorial](https://medium.com/free-code-camp/how-to-build-a-flexible-image-uploader-component-using-vue-js-2-0-5ee7fc77516)
4 |
5 |
6 | ## Build Setup
7 |
8 | ``` bash
9 | # install dependencies
10 | npm install
11 |
12 | # serve with hot reload at localhost:8080
13 | npm run dev
14 |
15 | # build for production with minification
16 | npm run build
17 | ```
18 |
19 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
20 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | image-upload
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "image-upload",
3 | "description": "a repository to demonstrate an image uploader component for vue.js 2.0",
4 | "version": "1.0.0",
5 | "author": "cathyhax ",
6 | "license": "MIT",
7 | "private": true,
8 | "scripts": {
9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11 | },
12 | "dependencies": {
13 | "vue": "^2.5.11",
14 | "vuetify": "^1.1.9"
15 | },
16 | "browserslist": [
17 | "> 1%",
18 | "last 2 versions",
19 | "not ie <= 8"
20 | ],
21 | "devDependencies": {
22 | "babel-core": "^6.26.0",
23 | "babel-loader": "^7.1.2",
24 | "babel-preset-env": "^1.6.0",
25 | "babel-preset-stage-3": "^6.24.1",
26 | "cross-env": "^5.0.5",
27 | "css-loader": "^0.28.7",
28 | "file-loader": "^1.1.4",
29 | "vue-loader": "^13.0.5",
30 | "vue-template-compiler": "^2.4.4",
31 | "webpack": "^3.6.0",
32 | "webpack-dev-server": "^2.9.1"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Click to add avatar
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Save Avatar
17 |
18 |
19 |
20 |
21 |
22 |
23 |
58 |
59 |
68 |
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cathyhax/image-uploader/562871889737dda4662b63f303020df4815b09ed/src/assets/logo.png
--------------------------------------------------------------------------------
/src/components/ImageInput.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
15 |
16 |
17 | {{errorText}}
18 |
19 |
20 | Got it!
21 |
22 |
23 |
24 |
25 |
26 |
27 |
71 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import Vuetify from 'vuetify'
4 | import 'vuetify/dist/vuetify.min.css'
5 |
6 | Vue.use(
7 | Vuetify, {
8 | theme: {
9 | secondary: '#0e71a3',
10 | primary: '#52c2b8',
11 | accent: '#e95e29'
12 | }
13 | }
14 | )
15 |
16 | new Vue({
17 | el: '#app',
18 | render: h => h(App)
19 | })
20 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | var webpack = require('webpack')
3 |
4 | module.exports = {
5 | entry: './src/main.js',
6 | output: {
7 | path: path.resolve(__dirname, './dist'),
8 | publicPath: '/dist/',
9 | filename: 'build.js'
10 | },
11 | module: {
12 | rules: [
13 | {
14 | test: /\.css$/,
15 | use: [
16 | 'vue-style-loader',
17 | 'css-loader'
18 | ],
19 | }, {
20 | test: /\.vue$/,
21 | loader: 'vue-loader',
22 | options: {
23 | loaders: {
24 | }
25 | // other vue-loader options go here
26 | }
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: 'babel-loader',
31 | exclude: /node_modules/
32 | },
33 | {
34 | test: /\.(png|jpg|gif|svg)$/,
35 | loader: 'file-loader',
36 | options: {
37 | name: '[name].[ext]?[hash]'
38 | }
39 | }
40 | ]
41 | },
42 | resolve: {
43 | alias: {
44 | 'vue$': 'vue/dist/vue.esm.js'
45 | },
46 | extensions: ['*', '.js', '.vue', '.json']
47 | },
48 | devServer: {
49 | historyApiFallback: true,
50 | noInfo: true,
51 | overlay: true
52 | },
53 | performance: {
54 | hints: false
55 | },
56 | devtool: '#eval-source-map'
57 | }
58 |
59 | if (process.env.NODE_ENV === 'production') {
60 | module.exports.devtool = '#source-map'
61 | // http://vue-loader.vuejs.org/en/workflow/production.html
62 | module.exports.plugins = (module.exports.plugins || []).concat([
63 | new webpack.DefinePlugin({
64 | 'process.env': {
65 | NODE_ENV: '"production"'
66 | }
67 | }),
68 | new webpack.optimize.UglifyJsPlugin({
69 | sourceMap: true,
70 | compress: {
71 | warnings: false
72 | }
73 | }),
74 | new webpack.LoaderOptionsPlugin({
75 | minimize: true
76 | })
77 | ])
78 | }
79 |
--------------------------------------------------------------------------------