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 d82627a

Browse files
add default-preview
1 parent fcbec7d commit d82627a

File tree

8 files changed

+43
-23
lines changed

8 files changed

+43
-23
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ app.$mount('#app');
6969
- `accept` - mimetypes allowed for upload, _defaults to `'image/png,image/gif,image/jpeg'`_
7070
- `max-size` - number of megabytes allowed for upload, _defaults to `10`_
7171
- `disable-preview` - not show preview image, _defaults to `false`_
72+
- `default-preview` - pass url or data-uri to be displayed as default image
7273
- `file-name` - pass custom filename to be displayed in text `input` tag
7374
- `placeholder` - pass placeholder text for text `input` tag
7475

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,15 +94,21 @@ return /******/ (function(modules) { // webpackBootstrap
9494
placeholder: {
9595
type: String,
9696
default: 'Click here to upload image'
97+
},
98+
defaultPreview: {
99+
type: String,
100+
default: ''
97101
}
98102
},
99103

100104
data: function data() {
101105
return {
102106
file: null,
107+
preview: this.defaultPreview,
103108
visiblePreview: false
104109
};
105110
},
111+
mounted: function mounted() {},
106112

107113

108114
computed: {
@@ -160,14 +166,12 @@ return /******/ (function(modules) { // webpackBootstrap
160166
var reader = new FileReader();
161167

162168
reader.onload = function (e) {
163-
var preview = _this.$refs.preview;
164169
var dataURI = e.target.result;
165170

166171
if (dataURI) {
167172
_this.$emit('load', dataURI);
168173

169-
_this.visiblePreview = true;
170-
preview.src = dataURI;
174+
_this.preview = dataURI;
171175
}
172176
};
173177

@@ -176,7 +180,7 @@ return /******/ (function(modules) { // webpackBootstrap
176180
}
177181
},
178182

179-
template: '\n <div >\n <img\n v-show="visiblePreview && !disablePreview"\n ref="preview"\n :class="imageClass" />\n <div class="vue-base64-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 '
183+
template: '\n <div class="vue-base64-file-upload">\n <img\n v-show="preview && !disablePreview"\n :src="preview"\n :class="imageClass" />\n <div class="vue-base64-file-upload-wrapper" :style="wrapperStyles">\n <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 '
180184
};
181185

182186
/***/ }

‎dist/vue-base64-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: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,15 +94,21 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
9494
placeholder: {
9595
type: String,
9696
default: 'Click here to upload image'
97+
},
98+
defaultPreview: {
99+
type: String,
100+
default: ''
97101
}
98102
},
99103

100104
data: function data() {
101105
return {
102106
file: null,
107+
preview: this.defaultPreview,
103108
visiblePreview: false
104109
};
105110
},
111+
mounted: function mounted() {},
106112

107113
computed: {
108114
wrapperStyles: function wrapperStyles() {
@@ -159,14 +165,12 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
159165
var reader = new FileReader();
160166

161167
reader.onload = function (e) {
162-
var preview = _this.$refs.preview;
163168
var dataURI = e.target.result;
164169

165170
if (dataURI) {
166171
_this.$emit('load', dataURI);
167172

168-
_this.visiblePreview = true;
169-
preview.src = dataURI;
173+
_this.preview = dataURI;
170174
}
171175
};
172176

@@ -175,7 +179,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
175179
}
176180
},
177181

178-
template: '\n <div >\n <img\n v-show="visiblePreview && !disablePreview"\n ref="preview"\n :class="imageClass" />\n <div class="vue-base64-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 '
182+
template: '\n <div class="vue-base64-file-upload">\n <img\n v-show="preview && !disablePreview"\n :src="preview"\n :class="imageClass" />\n <div class="vue-base64-file-upload-wrapper" :style="wrapperStyles">\n <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 '
179183
};
180184

181185
/***/
@@ -223,7 +227,7 @@ var app = new _vue2.default({
223227
}
224228
},
225229

226-
template: '\n <div class="container">\n <h2>Vue Base64 File Upload</h2>\n <div>\n <vue-base64-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-base64-file-upload\n class="v2"\n @size-exceeded="onSizeExceeded"\n @file="onFile"\n @load="onLoad" />\n </div>\n </div>\n '
230+
template: '\n <div class="container">\n <h2>Vue Base64 File Upload</h2>\n <div>\n <vue-base64-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-base64-file-upload\n class="v2"\n default-preview="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"\n @size-exceeded="onSizeExceeded"\n @file="onFile"\n @load="onLoad" />\n </div>\n </div>\n '
227231
});
228232

229233
app.$mount('#app');

‎example/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const app = new Vue({
4444
<div>
4545
<vue-base64-file-upload
4646
class="v2"
47+
default-preview="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
4748
@size-exceeded="onSizeExceeded"
4849
@file="onFile"
4950
@load="onLoad" />

‎index.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,21 @@ exports.default = {
3838
placeholder: {
3939
type: String,
4040
default: 'Click here to upload image'
41+
},
42+
defaultPreview: {
43+
type: String,
44+
default: ''
4145
}
4246
},
4347

4448
data: function data() {
4549
return {
4650
file: null,
51+
preview: this.defaultPreview,
4752
visiblePreview: false
4853
};
4954
},
55+
mounted: function mounted() {},
5056

5157

5258
computed: {
@@ -104,14 +110,12 @@ exports.default = {
104110
var reader = new FileReader();
105111

106112
reader.onload = function (e) {
107-
var preview = _this.$refs.preview;
108113
var dataURI = e.target.result;
109114

110115
if (dataURI) {
111116
_this.$emit('load', dataURI);
112117

113-
_this.visiblePreview = true;
114-
preview.src = dataURI;
118+
_this.preview = dataURI;
115119
}
116120
};
117121

@@ -120,5 +124,5 @@ exports.default = {
120124
}
121125
},
122126

123-
template: '\n <div >\n <img\n v-show="visiblePreview && !disablePreview"\n ref="preview"\n :class="imageClass" />\n <div class="vue-base64-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 '
127+
template: '\n <div class="vue-base64-file-upload">\n <img\n v-show="preview && !disablePreview"\n :src="preview"\n :class="imageClass" />\n <div class="vue-base64-file-upload-wrapper" :style="wrapperStyles">\n <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 '
124128
};

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-base64-file-upload",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "Upload files as base64 data-uris",
55
"main": "./index.js",
66
"directories": {

‎src/index.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,25 @@ export default {
3333
placeholder: {
3434
type: String,
3535
default: 'Click here to upload image'
36+
},
37+
defaultPreview: {
38+
type: String,
39+
default: ''
3640
}
3741
},
3842

3943
data() {
4044
return {
4145
file: null,
46+
preview: this.defaultPreview,
4247
visiblePreview: false
4348
};
4449
},
4550

51+
mounted() {
52+
53+
},
54+
4655
computed: {
4756
wrapperStyles() {
4857
return {
@@ -70,7 +79,7 @@ export default {
7079
return {
7180
'width': '100%',
7281
'cursor': 'pointer'
73-
}
82+
};
7483
}
7584
},
7685

@@ -98,14 +107,12 @@ export default {
98107
const reader = new FileReader();
99108

100109
reader.onload = e => {
101-
const preview = this.$refs.preview;
102-
const dataURI = e.target.result
110+
const dataURI = e.target.result;
103111

104112
if (dataURI) {
105113
this.$emit('load', dataURI);
106114

107-
this.visiblePreview = true;
108-
preview.src = dataURI;
115+
this.preview = dataURI;
109116
}
110117
};
111118

@@ -117,12 +124,11 @@ export default {
117124
template: `
118125
<div class="vue-base64-file-upload">
119126
<img
120-
v-show="visiblePreview && !disablePreview"
121-
ref="preview"
127+
v-show="preview && !disablePreview"
128+
:src="preview"
122129
:class="imageClass" />
123130
<div class="vue-base64-file-upload-wrapper" :style="wrapperStyles">
124131
<input
125-
ref="input"
126132
type="file"
127133
@change="onChange"
128134
:style="fileInputStyles"

0 commit comments

Comments
(0)

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