Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c83f2ea

Browse files
make it work
1 parent d265674 commit c83f2ea

File tree

9 files changed

+668
-16
lines changed

9 files changed

+668
-16
lines changed

‎README.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# vue-base64-file-upload
2+
3+
> Upload files as base64 data-uris (URL representing the file's data as a base64 encoded string).
4+
5+
## Install
6+
7+
```bash
8+
npm i vue-blob-file-upload --save
9+
```
10+
11+
## Example
12+
13+
```js
14+
import Vue from 'vue';
15+
import VueBlobFileUpload from 'vue-blob-file-upload';
16+
17+
const app = new Vue({
18+
components: {
19+
VueBlobFileUpload
20+
},
21+
22+
data() {
23+
return {
24+
customImageMaxSize: 3 // megabytes
25+
};
26+
},
27+
28+
methods: {
29+
onFile(file) {
30+
console.log(file); // file object
31+
},
32+
33+
onLoad(dataUri) {
34+
console.log(dataUri); // data-uri string
35+
},
36+
37+
onSizeExceeded(size) {
38+
alert(`Image ${size}Mb size exceeds limits of ${this.customImageMaxSize}Mb!`);
39+
}
40+
},
41+
42+
template: `
43+
<div class="container">
44+
<h2>Upload file</h2>
45+
<vue-blob-file-upload
46+
class="v1"
47+
accept="image/png,image/jpeg"
48+
image-class="v1-image"
49+
input-class="v1-image"
50+
:max-size="customImageMaxSize"
51+
@size-exceeded="onSizeExceeded"
52+
@file="onFile"
53+
@load="onLoad" />
54+
</div>
55+
`
56+
});
57+
58+
app.$mount('#app');
59+
```
60+
61+
## API
62+
63+
## Props
64+
65+
- `image-class` - pass additional classes for preview `img` tag
66+
- `input-class` - pass additional classes for text `input` tag
67+
- `accept` - mimetypes allowed for upload, _default `'image/png,image/gif,image/jpeg'`_
68+
- `max-size` - number of megabytes allowed for upload, _default `10`_
69+
- `disable-preview` - not show preview image, _default `false`_
70+
- `file-name` - pass custom filename to be displayed in text `input` tag
71+
- `placeholder` - pass placeholder text for text `input` tag
72+
73+
## Events
74+
75+
- `file` - fired when file object is ready
76+
- `load` - fired when data-uri is ready
77+
- `size-exceeded` - fired if uploaded image size exceeds limits
78+
79+
## References
80+
81+
- [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader)
82+
- [`readAsDataURL`](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL)
83+
84+
---
85+
86+
**MIT Licensed**

‎dist/vue-blob-file-upload.js‎

Lines changed: 115 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,122 @@ return /******/ (function(modules) { // webpackBootstrap
6666

6767
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
6868

69+
if (!window.FileReader) {
70+
console.error('Your browser does not support FileReader API!');
71+
}
72+
6973
exports.default = _vue2.default.component('vue-blob-file-upload', {
70-
template: '<div>Hello!</div>'
74+
props: {
75+
imageClass: {
76+
type: String,
77+
default: ''
78+
},
79+
inputClass: {
80+
type: String,
81+
default: ''
82+
},
83+
accept: {
84+
type: String,
85+
default: 'image/png,image/gif,image/jpeg'
86+
},
87+
maxSize: {
88+
type: Number,
89+
default: 10 // megabytes
90+
},
91+
disablePreview: {
92+
type: Boolean,
93+
default: false
94+
},
95+
fileName: {
96+
type: String,
97+
default: ''
98+
},
99+
placeholder: {
100+
type: String,
101+
default: 'Click here to upload image'
102+
}
103+
},
104+
105+
data: function data() {
106+
return {
107+
file: null,
108+
visiblePreview: false
109+
};
110+
},
111+
112+
113+
computed: {
114+
wrapperStyles: function wrapperStyles() {
115+
return {
116+
'position': 'relative',
117+
'width': '100%'
118+
};
119+
},
120+
fileInputStyles: function fileInputStyles() {
121+
return {
122+
'width': '100%',
123+
'position': 'absolute',
124+
'top': 0,
125+
'left': 0,
126+
'right': 0,
127+
'bottom': 0,
128+
'opacity': 0,
129+
'overflow': 'hidden',
130+
'outline': 'none',
131+
'cursor': 'pointer'
132+
};
133+
},
134+
textInputStyles: function textInputStyles() {
135+
return {
136+
'width': '100%',
137+
'cursor': 'pointer'
138+
};
139+
}
140+
},
141+
142+
methods: {
143+
onChange: function onChange(e) {
144+
var _this = this;
145+
146+
var files = e.target.files || e.dataTransfer.files;
147+
148+
if (!files.length) {
149+
return;
150+
}
151+
152+
var file = files[0];
153+
var size = file.size && file.size / Math.pow(1000, 2);
154+
155+
// check file max size
156+
if (size > this.maxSize) {
157+
this.$emit('size-exceeded', size);
158+
return;
159+
}
160+
161+
// update file
162+
this.file = file;
163+
this.$emit('file', file);
164+
165+
var reader = new FileReader();
166+
167+
reader.onload = function (e) {
168+
var preview = _this.$refs.preview;
169+
var dataURI = e.target.result;
170+
171+
if (dataURI) {
172+
_this.$emit('load', dataURI);
173+
174+
_this.visiblePreview = true;
175+
preview.src = dataURI;
176+
}
177+
};
178+
179+
// read blob url from file data
180+
reader.readAsDataURL(file);
181+
}
182+
},
183+
184+
template: '\n <div class="vue-blob-file-upload">\n <img\n v-show="visiblePreview && !disablePreview"\n ref="preview"\n :class="imageClass" />\n <div class="vue-blob-file-upload-wrapper" :style="wrapperStyles">\n <input\n ref="input"\n type="file"\n @change="onChange"\n :style="fileInputStyles"\n :accept=accept />\n <input\n type="text"\n :class="inputClass"\n :style="textInputStyles"\n :value="fileName || file && file.name"\n :placeholder="placeholder"\n disabled />\n </div>\n </div>\n '
71185
});
72186

73187
/***/ },

‎dist/vue-blob-file-upload.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/bundle.js‎

Lines changed: 135 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,27 @@ var app = new _vue2.default({
1616
VueBlobFileUpload: _2.default
1717
},
1818

19-
template: '\n <div>\n <h2>Vue Blob File Upload</h2>\n <vue-blob-file-upload />\n </div>\n '
19+
data: function data() {
20+
return {
21+
customImageMaxSize: 3 // megabytes
22+
};
23+
},
24+
25+
26+
methods: {
27+
onFile: function onFile(file) {
28+
console.log(file);
29+
},
30+
onLoad: function onLoad(dataUri) {
31+
console.log('data-uri is ready!');
32+
},
33+
onSizeExceeded: function onSizeExceeded(size) {
34+
console.log(size);
35+
alert('Image size exceeds limits of ' + this.customImageMaxSize + 'Mb!');
36+
}
37+
},
38+
39+
template: '\n <div class="container">\n <h2>Vue Blob File Upload</h2>\n <div>\n <vue-blob-file-upload\n class="v1"\n accept="image/png,image/jpeg"\n image-class="v1-image"\n input-class="v1-image"\n :max-size="customImageMaxSize"\n @size-exceeded="onSizeExceeded"\n @file="onFile"\n @load="onLoad" />\n </div>\n <div>\n <vue-blob-file-upload class="v2" />\n </div>\n </div>\n '
2040
});
2141

2242
app.$mount('#app');
@@ -36,8 +56,121 @@ function _interopRequireDefault(obj) {
3656
return obj && obj.__esModule ? obj : { default: obj };
3757
}
3858

59+
if (!window.FileReader) {
60+
console.error('Your browser does not support FileReader API!');
61+
}
62+
3963
exports.default = _vue2.default.component('vue-blob-file-upload', {
40-
template: '<div>Hello!</div>'
64+
props: {
65+
imageClass: {
66+
type: String,
67+
default: ''
68+
},
69+
inputClass: {
70+
type: String,
71+
default: ''
72+
},
73+
accept: {
74+
type: String,
75+
default: 'image/png,image/gif,image/jpeg'
76+
},
77+
maxSize: {
78+
type: Number,
79+
default: 10 // megabytes
80+
},
81+
disablePreview: {
82+
type: Boolean,
83+
default: false
84+
},
85+
fileName: {
86+
type: String,
87+
default: ''
88+
},
89+
placeholder: {
90+
type: String,
91+
default: 'Click here to upload image'
92+
}
93+
},
94+
95+
data: function data() {
96+
return {
97+
file: null,
98+
visiblePreview: false
99+
};
100+
},
101+
102+
computed: {
103+
wrapperStyles: function wrapperStyles() {
104+
return {
105+
'position': 'relative',
106+
'width': '100%'
107+
};
108+
},
109+
fileInputStyles: function fileInputStyles() {
110+
return {
111+
'width': '100%',
112+
'position': 'absolute',
113+
'top': 0,
114+
'left': 0,
115+
'right': 0,
116+
'bottom': 0,
117+
'opacity': 0,
118+
'overflow': 'hidden',
119+
'outline': 'none',
120+
'cursor': 'pointer'
121+
};
122+
},
123+
textInputStyles: function textInputStyles() {
124+
return {
125+
'width': '100%',
126+
'cursor': 'pointer'
127+
};
128+
}
129+
},
130+
131+
methods: {
132+
onChange: function onChange(e) {
133+
var _this = this;
134+
135+
var files = e.target.files || e.dataTransfer.files;
136+
137+
if (!files.length) {
138+
return;
139+
}
140+
141+
var file = files[0];
142+
var size = file.size && file.size / Math.pow(1000, 2);
143+
144+
// check file max size
145+
if (size > this.maxSize) {
146+
this.$emit('size-exceeded', size);
147+
return;
148+
}
149+
150+
// update file
151+
this.file = file;
152+
this.$emit('file', file);
153+
154+
var reader = new FileReader();
155+
156+
reader.onload = function (e) {
157+
var preview = _this.$refs.preview;
158+
var dataURI = e.target.result;
159+
160+
if (dataURI) {
161+
_this.$emit('load', dataURI);
162+
163+
_this.visiblePreview = true;
164+
preview.src = dataURI;
165+
}
166+
};
167+
168+
// read blob url from file data
169+
reader.readAsDataURL(file);
170+
}
171+
},
172+
173+
template: '\n <div class="vue-blob-file-upload">\n <img\n v-show="visiblePreview && !disablePreview"\n ref="preview"\n :class="imageClass" />\n <div class="vue-blob-file-upload-wrapper" :style="wrapperStyles">\n <input\n ref="input"\n type="file"\n @change="onChange"\n :style="fileInputStyles"\n :accept=accept />\n <input\n type="text"\n :class="inputClass"\n :style="textInputStyles"\n :value="fileName || file && file.name"\n :placeholder="placeholder"\n disabled />\n </div>\n </div>\n '
41174
});
42175

43176
},{"vue":4}],3:[function(require,module,exports){

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /