xingzi
/
vue-upload-component
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bug drop addFileUpload, update example

Browse Source
1.0 v0.3.4
git 10 years ago
parent 2636929808
commit 10811a3c32
10 changed files with 210 additions and 159 deletions
Show Stats Download Patch File Download Diff File

120
dist/example.js vendored
Unescape View File

@ -10671,7 +10671,8 @@
files: [], files: [],
upload: {}, upload: {},
drop: true drop: true,
auto: false
}, },
compiled: function compiled() { compiled: function compiled() {
@ -10686,10 +10687,28 @@
}; };
this.files = this.$refs.upload.files; this.files = this.$refs.upload.files;
}, },
methods: { methods: {
remove: function remove(file) { remove: function remove(file) {
this.$refs.upload.files.$remove(file); this.$refs.upload.files.$remove(file);
} }
},
events: {
addFileUpload: function addFileUpload(file, component) {
console.log('addFileUpload');
if (this.auto) {
component.active = true;
}
},
fileUploadProgress: function fileUploadProgress(file, component) {
console.log('fileUploadProgress ' + file.progress);
},
afterFileUpload: function afterFileUpload(file, component) {
console.log('afterFileUpload');
},
beforeFileUpload: function beforeFileUpload(file, component) {
console.log('beforeFileUpload');
}
} }
}); });
@ -10709,10 +10728,6 @@
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var createId = function createId() {
return Math.random().toString(36).substr(2);
};
exports.default = { exports.default = {
props: { props: {
title: { title: {
@ -10847,6 +10862,11 @@
}, },
methods: { methods: {
clear: function clear() {
if (this.files.length) {
this.files.splice(0, this.files.length);
}
},
_drop: function _drop(value) { _drop: function _drop(value) {
if (this.dropElement && this.$mode === 'html5') { if (this.dropElement && this.$mode === 'html5') {
try { try {
@ -10891,6 +10911,41 @@
_onDragover: function _onDragover(e) { _onDragover: function _onDragover(e) {
e.preventDefault(); e.preventDefault();
}, },
_addFileUpload: function _addFileUpload(hiddenData, file) {
var defaultFile = {
size: -1,
name: 'Filename',
progress: '0.00',
speed: 0,
active: false,
error: '',
errno: '',
success: false,
data: {},
request: {
headers: {},
data: {}
}
};
for (var key in defaultFile) {
if (typeof file[key] == 'undefined') {
file[key] = defaultFile[key];
}
}
if (!file.id) {
file.id = Math.random().toString(36).substr(2);
}
if (!this.multiple) {
this.clear();
}
this._files[file.id] = hiddenData;
file = this.files[this.files.push(file) - 1];
this._files[file.id]._file = file;
this.$dispatch && this.$dispatch('addFileUpload', file, this);
this.addFileUpload && this.addFileUpload(file);
},
_onDrop: function _onDrop(e) { _onDrop: function _onDrop(e) {
this._dropActive = 0; this._dropActive = 0;
this.dropActive = false; this.dropActive = false;
@ -10898,19 +10953,10 @@
if (e.dataTransfer.files.length) { if (e.dataTransfer.files.length) {
for (var i = 0; i < e.dataTransfer.files.length; i++) { for (var i = 0; i < e.dataTransfer.files.length; i++) {
var file = e.dataTransfer.files[i]; var file = e.dataTransfer.files[i];
var id = createId(); this._addFileUpload({ file: file }, { size: file.size, name: file.name });
var value = { id: id, size: file.size, name: file.name, progress: '0.00', speed: 0, active: false, error: '', errno: '', success: false, data: {}, request: { headers: {}, data: {} } }; if (!this.multiple) {
this._files[id] = { file: file }; break;
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
} }
this._files[id]._file = this.files[len - 1];
this.$dispatch('addFileUpload', this.files[len - 1], this);
} }
} }
}, },
@ -10925,36 +10971,10 @@
if (el.files) { if (el.files) {
for (var i = 0; i < el.files.length; i++) { for (var i = 0; i < el.files.length; i++) {
var file = el.files[i]; var file = el.files[i];
var id = createId(); this._addFileUpload({ file: file, el: el }, { size: file.size, name: file.name });
var value = { id: id, size: file.size, name: file.name, progress: '0.00', speed: 0, active: false, error: '', errno: '', success: false, data: {}, request: { headers: {}, data: {} } };
this._files[id] = { el: el, file: file };
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
}
this._files[id]._file = this.files[len - 1];
this.$dispatch && this.$dispatch('addFileUpload', this.files[len - 1], this);
this.addFileUpload && this.addFileUpload(this.files[len - 1]);
} }
} else { } else {
var id = createId(); this._addFileUpload({ el: el }, { size: -1, name: el.value.replace(/^.*?([^\/\\\r\n]+)$/, '$1') });
var value = { id: id, size: -1, name: el.value.replace(/^.*?([^\/\\\r\n]+)$/, '$1'), progress: '0.00', speed: 0, active: false, error: '', errno: '', success: false, data: {}, request: { headers: {}, data: {} } };
this._files[id] = { el: el };
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
}
var len = this.files.push(file);
this._files[id]._file = this.files[len - 1];
this.$dispatch && this.$dispatch('addFileUpload', this.files[len - 1], this);
this.addFileUpload && this.addFileUpload(this.files[len - 1]);
} }
}, },
_fileUploads: function _fileUploads() { _fileUploads: function _fileUploads() {
@ -11018,7 +11038,7 @@
}, },
_fileUploadXhr: function _fileUploadXhr(xhr, file, data) { _fileUploadXhr: function _fileUploadXhr(xhr, file, data) {
var _self = this; var _self = this;
var file2 = this._files[file.id]; var hiddenData = this._files[file.id];
var fileUploads = false; var fileUploads = false;
var speedTime = 0; var speedTime = 0;
var speedLoaded = 0; var speedLoaded = 0;
@ -11127,7 +11147,7 @@
xhr.send(data); xhr.send(data);
file.active = true; file.active = true;
file2.xhr = xhr; hiddenData.xhr = xhr;
var interval = setInterval(function () { var interval = setInterval(function () {
if (!_self.active || !file.active || file.success || file.errno) { if (!_self.active || !file.active || file.success || file.errno) {
clearInterval(interval); clearInterval(interval);
@ -11178,7 +11198,7 @@
}, },
_fileUploadHtml4: function _fileUploadHtml4(file) { _fileUploadHtml4: function _fileUploadHtml4(file) {
var _self = this; var _self = this;
var file2 = this._files[file.id]; var hiddenData = this._files[file.id];
var fileUploads = false; var fileUploads = false;
@ -11205,7 +11225,7 @@
form.setAttribute('method', 'POST'); form.setAttribute('method', 'POST');
form.setAttribute('target', 'upload-iframe-' + file.id); form.setAttribute('target', 'upload-iframe-' + file.id);
form.setAttribute('enctype', 'multipart/form-data'); form.setAttribute('enctype', 'multipart/form-data');
form.appendChild(file2.el); form.appendChild(hiddenData.el);
for (var key in this.request.data) { for (var key in this.request.data) {
var input = document.createElement('input'); var input = document.createElement('input');
input.type = 'hidden'; input.type = 'hidden';
@ -11301,7 +11321,7 @@
file.active = true; file.active = true;
file2.iframe = iframe; hiddenData.iframe = iframe;
document.body.addEventListener('keydown', keydown); document.body.addEventListener('keydown', keydown);
var interval = setInterval(function () { var interval = setInterval(function () {

2
dist/example.js.map vendored
View File

File diff suppressed because one or more lines are too long

99
dist/vue-upload-component.js vendored
Unescape View File

@ -614,10 +614,6 @@ return /******/ (function(modules) { // webpackBootstrap
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var createId = function createId() {
return Math.random().toString(36).substr(2);
};
exports.default = { exports.default = {
props: { props: {
title: { title: {
@ -752,6 +748,11 @@ return /******/ (function(modules) { // webpackBootstrap
}, },
methods: { methods: {
clear: function clear() {
if (this.files.length) {
this.files.splice(0, this.files.length);
}
},
_drop: function _drop(value) { _drop: function _drop(value) {
if (this.dropElement && this.$mode === 'html5') { if (this.dropElement && this.$mode === 'html5') {
try { try {
@ -796,6 +797,41 @@ return /******/ (function(modules) { // webpackBootstrap
_onDragover: function _onDragover(e) { _onDragover: function _onDragover(e) {
e.preventDefault(); e.preventDefault();
}, },
_addFileUpload: function _addFileUpload(hiddenData, file) {
var defaultFile = {
size: -1,
name: 'Filename',
progress: '0.00',
speed: 0,
active: false,
error: '',
errno: '',
success: false,
data: {},
request: {
headers: {},
data: {}
}
};
for (var key in defaultFile) {
if (typeof file[key] == 'undefined') {
file[key] = defaultFile[key];
}
}
if (!file.id) {
file.id = Math.random().toString(36).substr(2);
}
if (!this.multiple) {
this.clear();
}
this._files[file.id] = hiddenData;
file = this.files[this.files.push(file) - 1];
this._files[file.id]._file = file;
this.$dispatch && this.$dispatch('addFileUpload', file, this);
this.addFileUpload && this.addFileUpload(file);
},
_onDrop: function _onDrop(e) { _onDrop: function _onDrop(e) {
this._dropActive = 0; this._dropActive = 0;
this.dropActive = false; this.dropActive = false;
@ -803,19 +839,10 @@ return /******/ (function(modules) { // webpackBootstrap
if (e.dataTransfer.files.length) { if (e.dataTransfer.files.length) {
for (var i = 0; i < e.dataTransfer.files.length; i++) { for (var i = 0; i < e.dataTransfer.files.length; i++) {
var file = e.dataTransfer.files[i]; var file = e.dataTransfer.files[i];
var id = createId(); this._addFileUpload({ file: file }, { size: file.size, name: file.name });
var value = { id: id, size: file.size, name: file.name, progress: '0.00', speed: 0, active: false, error: '', errno: '', success: false, data: {}, request: { headers: {}, data: {} } }; if (!this.multiple) {
this._files[id] = { file: file }; break;
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
} }
this._files[id]._file = this.files[len - 1];
this.$dispatch('addFileUpload', this.files[len - 1], this);
} }
} }
}, },
@ -830,36 +857,10 @@ return /******/ (function(modules) { // webpackBootstrap
if (el.files) { if (el.files) {
for (var i = 0; i < el.files.length; i++) { for (var i = 0; i < el.files.length; i++) {
var file = el.files[i]; var file = el.files[i];
var id = createId(); this._addFileUpload({ file: file, el: el }, { size: file.size, name: file.name });
var value = { id: id, size: file.size, name: file.name, progress: '0.00', speed: 0, active: false, error: '', errno: '', success: false, data: {}, request: { headers: {}, data: {} } };
this._files[id] = { el: el, file: file };
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
}
this._files[id]._file = this.files[len - 1];
this.$dispatch && this.$dispatch('addFileUpload', this.files[len - 1], this);
this.addFileUpload && this.addFileUpload(this.files[len - 1]);
} }
} else { } else {
var id = createId(); this._addFileUpload({ el: el }, { size: -1, name: el.value.replace(/^.*?([^\/\\\r\n]+)$/, '$1') });
var value = { id: id, size: -1, name: el.value.replace(/^.*?([^\/\\\r\n]+)$/, '$1'), progress: '0.00', speed: 0, active: false, error: '', errno: '', success: false, data: {}, request: { headers: {}, data: {} } };
this._files[id] = { el: el };
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
}
var len = this.files.push(file);
this._files[id]._file = this.files[len - 1];
this.$dispatch && this.$dispatch('addFileUpload', this.files[len - 1], this);
this.addFileUpload && this.addFileUpload(this.files[len - 1]);
} }
}, },
_fileUploads: function _fileUploads() { _fileUploads: function _fileUploads() {
@ -923,7 +924,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, },
_fileUploadXhr: function _fileUploadXhr(xhr, file, data) { _fileUploadXhr: function _fileUploadXhr(xhr, file, data) {
var _self = this; var _self = this;
var file2 = this._files[file.id]; var hiddenData = this._files[file.id];
var fileUploads = false; var fileUploads = false;
var speedTime = 0; var speedTime = 0;
var speedLoaded = 0; var speedLoaded = 0;
@ -1032,7 +1033,7 @@ return /******/ (function(modules) { // webpackBootstrap
xhr.send(data); xhr.send(data);
file.active = true; file.active = true;
file2.xhr = xhr; hiddenData.xhr = xhr;
var interval = setInterval(function () { var interval = setInterval(function () {
if (!_self.active || !file.active || file.success || file.errno) { if (!_self.active || !file.active || file.success || file.errno) {
clearInterval(interval); clearInterval(interval);
@ -1083,7 +1084,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, },
_fileUploadHtml4: function _fileUploadHtml4(file) { _fileUploadHtml4: function _fileUploadHtml4(file) {
var _self = this; var _self = this;
var file2 = this._files[file.id]; var hiddenData = this._files[file.id];
var fileUploads = false; var fileUploads = false;
@ -1110,7 +1111,7 @@ return /******/ (function(modules) { // webpackBootstrap
form.setAttribute('method', 'POST'); form.setAttribute('method', 'POST');
form.setAttribute('target', 'upload-iframe-' + file.id); form.setAttribute('target', 'upload-iframe-' + file.id);
form.setAttribute('enctype', 'multipart/form-data'); form.setAttribute('enctype', 'multipart/form-data');
form.appendChild(file2.el); form.appendChild(hiddenData.el);
for (var key in this.request.data) { for (var key in this.request.data) {
var input = document.createElement('input'); var input = document.createElement('input');
input.type = 'hidden'; input.type = 'hidden';
@ -1206,7 +1207,7 @@ return /******/ (function(modules) { // webpackBootstrap
file.active = true; file.active = true;
file2.iframe = iframe; hiddenData.iframe = iframe;
document.body.addEventListener('keydown', keydown); document.body.addEventListener('keydown', keydown);
var interval = setInterval(function () { var interval = setInterval(function () {

2
dist/vue-upload-component.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/vue-upload-component.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/vue-upload-component.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

8
index.html
Unescape View File

@ -76,6 +76,11 @@
<button v-if="upload.active" type="submit" @click.prevent="$refs.upload.active = !$refs.upload.active">Stop upload</button> <button v-if="upload.active" type="submit" @click.prevent="$refs.upload.active = !$refs.upload.active">Stop upload</button>
<button v-else type="submit" @click.prevent="$refs.upload.active = !$refs.upload.active">Start upload</button> <button v-else type="submit" @click.prevent="$refs.upload.active = !$refs.upload.active">Start upload</button>
</td> </td>
<td>
<label>
Auto start: <input type="checkbox" id="checkbox" v-model="auto">
</label>
</td>
<td> <td>
<label> <label>
Accept: <input type="text" v-model="accept"> Accept: <input type="text" v-model="accept">
@ -103,6 +108,9 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>
Auto start: {{auto}}
</td>
<td> <td>
Active: {{$refs.upload.active}} Active: {{$refs.upload.active}}
</td> </td>

2
package.json
Unescape View File

@ -1,7 +1,7 @@
{ {
"name": "vue-upload-component", "name": "vue-upload-component",
"description": "Vue.js file upload component, Support for multiple file uploads, progress, html5, html4, support ie9", "description": "Vue.js file upload component, Support for multiple file uploads, progress, html5, html4, support ie9",
"version": "0.3.3", "version": "0.3.4",
"author": "LianYue", "author": "LianYue",
"scripts": { "scripts": {
"dev": "webpack-dev-server --inline --hot", "dev": "webpack-dev-server --inline --hot",

109
src/FileUpload.vue
Unescape View File

@ -43,10 +43,6 @@
<script> <script>
const createId = function() {
return Math.random().toString(36).substr(2);
}
export default { export default {
props: { props: {
title: { title: {
@ -152,6 +148,7 @@ export default {
continue; continue;
} }
var file = this._files[id]._file; var file = this._files[id]._file;
file.removed = true; file.removed = true;
@ -185,6 +182,12 @@ export default {
}, },
methods: { methods: {
clear() {
if (this.files.length) {
this.files.splice(0, this.files.length);
}
},
_drop(value) { _drop(value) {
if (this.dropElement && this.$mode === 'html5') { if (this.dropElement && this.$mode === 'html5') {
try { try {
@ -231,26 +234,52 @@ export default {
e.preventDefault(); e.preventDefault();
}, },
_addFileUpload(hiddenData, file) {
var defaultFile = {
size:-1,
name: 'Filename',
progress: '0.00',
speed: 0,
active: false,
error: '',
errno: '',
success: false,
data: {},
request: {
headers:{},
data:{}
}
};
for (let key in defaultFile) {
if (typeof file[key] == 'undefined') {
file[key] = defaultFile[key];
}
}
if (!file.id) {
file.id = Math.random().toString(36).substr(2);
}
if (!this.multiple) {
this.clear();
}
this._files[file.id] = hiddenData;
file = this.files[this.files.push(file) - 1];
this._files[file.id]._file = file;
this.$dispatch && this.$dispatch('addFileUpload', file, this);
this.addFileUpload && this.addFileUpload(file);
},
_onDrop(e) { _onDrop(e) {
this._dropActive = 0; this._dropActive = 0;
this.dropActive = false; this.dropActive = false;
e.preventDefault(); e.preventDefault();
if (e.dataTransfer.files.length) { if (e.dataTransfer.files.length) {
for (var i = 0; i < e.dataTransfer.files.length; i++) { for (let i = 0; i < e.dataTransfer.files.length; i++) {
var file = e.dataTransfer.files[i]; let file = e.dataTransfer.files[i];
var id = createId(); this._addFileUpload({file:file}, {size:file.size, name: file.name});
var value = {id: id, size:file.size, name: file.name, progress: '0.00', speed: 0, active: false, error: '', errno: '', success: false, data: {}, request: {headers:{}, data:{}}}; if (!this.multiple) {
this._files[id] = {file: file}; break;
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
} }
this._files[id]._file = this.files[len-1];
this.$dispatch('addFileUpload', this.files[len-1], this);
} }
} }
}, },
@ -265,38 +294,12 @@ export default {
if (el.files) { if (el.files) {
for (var i = 0; i < el.files.length; i++) { for (let i = 0; i < el.files.length; i++) {
var file = el.files[i]; let file = el.files[i];
var id = createId(); this._addFileUpload({file:file, el:el}, {size:file.size, name: file.name});
var value = {id: id, size:file.size, name: file.name, progress: '0.00', speed: 0, active: false, error: '', errno: '', success: false, data: {}, request: {headers:{}, data:{}}};
this._files[id] = {el:el, file: file};
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
}
this._files[id]._file = this.files[len-1];
this.$dispatch && this.$dispatch('addFileUpload', this.files[len-1], this);
this.addFileUpload && this.addFileUpload(this.files[len-1]);
} }
} else { } else {
var id = createId(); this._addFileUpload({el:el}, {size: -1, name: el.value.replace(/^.*?([^\/\\\r\n]+)$/, '$1')});
var value = {id: id, size: -1, name: el.value.replace(/^.*?([^\/\\\r\n]+)$/, '$1'), progress: '0.00', speed:0, active: false, error: '', errno: '', success: false, data: {}, request: {headers:{}, data:{}}};
this._files[id] = {el:el};
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
}
var len = this.files.push(file);
this._files[id]._file = this.files[len-1];
this.$dispatch && this.$dispatch('addFileUpload', this.files[len-1], this);
this.addFileUpload && this.addFileUpload(this.files[len-1]);
} }
}, },
@ -364,7 +367,7 @@ export default {
_fileUploadXhr(xhr, file, data) { _fileUploadXhr(xhr, file, data) {
var _self = this; var _self = this;
var file2 = this._files[file.id]; var hiddenData = this._files[file.id];
var fileUploads = false; var fileUploads = false;
var speedTime = 0; var speedTime = 0;
var speedLoaded = 0; var speedLoaded = 0;
@ -477,7 +480,7 @@ export default {
xhr.send(data); xhr.send(data);
file.active = true; file.active = true;
file2.xhr = xhr; hiddenData.xhr = xhr;
var interval = setInterval(function() { var interval = setInterval(function() {
if (!_self.active || !file.active || file.success || file.errno) { if (!_self.active || !file.active || file.success || file.errno) {
clearInterval(interval); clearInterval(interval);
@ -532,7 +535,7 @@ export default {
_fileUploadHtml4(file) { _fileUploadHtml4(file) {
var _self = this; var _self = this;
var file2 = this._files[file.id]; var hiddenData = this._files[file.id];
var fileUploads = false; var fileUploads = false;
@ -562,7 +565,7 @@ export default {
form.setAttribute('method', 'POST'); form.setAttribute('method', 'POST');
form.setAttribute('target', 'upload-iframe-' + file.id); form.setAttribute('target', 'upload-iframe-' + file.id);
form.setAttribute('enctype', 'multipart/form-data'); form.setAttribute('enctype', 'multipart/form-data');
form.appendChild(file2.el); form.appendChild(hiddenData.el);
for (var key in this.request.data) { for (var key in this.request.data) {
var input = document.createElement('input'); var input = document.createElement('input');
input.type = 'hidden'; input.type = 'hidden';
@ -669,7 +672,7 @@ export default {
file.active = true; file.active = true;
file2.iframe = iframe; hiddenData.iframe = iframe;
document.body.addEventListener('keydown', keydown); document.body.addEventListener('keydown', keydown);
var interval = setInterval(function() { var interval = setInterval(function() {

23
src/example.js
Unescape View File

@ -21,6 +21,7 @@ Vue.filter('formatSize', function(size) {
return size.toString() + ' B'; return size.toString() + ' B';
}); });
new Vue({ new Vue({
el:'#app', el:'#app',
components: { components: {
@ -36,9 +37,10 @@ new Vue({
files: [], files: [],
upload: {}, upload: {},
drop: true, drop: true,
auto: false,
}, },
compiled: function() { compiled() {
this.upload = this.$refs.upload; this.upload = this.$refs.upload;
this.upload.request = { this.upload.request = {
headers: { headers: {
@ -51,8 +53,25 @@ new Vue({
this.files = this.$refs.upload.files; this.files = this.$refs.upload.files;
}, },
methods: { methods: {
remove: function(file) { remove(file) {
this.$refs.upload.files.$remove(file); this.$refs.upload.files.$remove(file);
}, },
},
events: {
addFileUpload(file, component) {
console.log('addFileUpload');
if (this.auto) {
component.active = true;
}
},
fileUploadProgress(file, component) {
console.log('fileUploadProgress ' + file.progress);
},
afterFileUpload(file, component) {
console.log('afterFileUpload');
},
beforeFileUpload(file, component) {
console.log('beforeFileUpload');
},
} }
}); });

Write Preview
Loading…
Cancel
Save