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: [],
upload: {},
drop: true
drop: true,
auto: false
},
compiled: function compiled() {
@ -10686,10 +10687,28 @@
};
this.files = this.$refs.upload.files;
},
methods: {
remove: function 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 }; }
var createId = function createId() {
return Math.random().toString(36).substr(2);
};
exports.default = {
props: {
title: {
@ -10847,6 +10862,11 @@
},
methods: {
clear: function clear() {
if (this.files.length) {
this.files.splice(0, this.files.length);
}
},
_drop: function _drop(value) {
if (this.dropElement && this.$mode === 'html5') {
try {
@ -10891,6 +10911,41 @@
_onDragover: function _onDragover(e) {
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) {
this._dropActive = 0;
this.dropActive = false;
@ -10898,19 +10953,10 @@
if (e.dataTransfer.files.length) {
for (var i = 0; i < e.dataTransfer.files.length; i++) {
var file = e.dataTransfer.files[i];
var id = createId();
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] = { file: file };
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
this._addFileUpload({ file: file }, { size: file.size, name: file.name });
if (!this.multiple) {
break;
}
this._files[id]._file = this.files[len - 1];
this.$dispatch('addFileUpload', this.files[len - 1], this);
}
}
},
@ -10925,36 +10971,10 @@
if (el.files) {
for (var i = 0; i < el.files.length; i++) {
var file = el.files[i];
var id = createId();
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]);
this._addFileUpload({ file: file, el: el }, { size: file.size, name: file.name });
}
} else {
var id = createId();
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]);
this._addFileUpload({ el: el }, { size: -1, name: el.value.replace(/^.*?([^\/\\\r\n]+)$/, '$1') });
}
},
_fileUploads: function _fileUploads() {
@ -11018,7 +11038,7 @@
},
_fileUploadXhr: function _fileUploadXhr(xhr, file, data) {
var _self = this;
var file2 = this._files[file.id];
var hiddenData = this._files[file.id];
var fileUploads = false;
var speedTime = 0;
var speedLoaded = 0;
@ -11127,7 +11147,7 @@
xhr.send(data);
file.active = true;
file2.xhr = xhr;
hiddenData.xhr = xhr;
var interval = setInterval(function () {
if (!_self.active || !file.active || file.success || file.errno) {
clearInterval(interval);
@ -11178,7 +11198,7 @@
},
_fileUploadHtml4: function _fileUploadHtml4(file) {
var _self = this;
var file2 = this._files[file.id];
var hiddenData = this._files[file.id];
var fileUploads = false;
@ -11205,7 +11225,7 @@
form.setAttribute('method', 'POST');
form.setAttribute('target', 'upload-iframe-' + file.id);
form.setAttribute('enctype', 'multipart/form-data');
form.appendChild(file2.el);
form.appendChild(hiddenData.el);
for (var key in this.request.data) {
var input = document.createElement('input');
input.type = 'hidden';
@ -11301,7 +11321,7 @@
file.active = true;
file2.iframe = iframe;
hiddenData.iframe = iframe;
document.body.addEventListener('keydown', keydown);
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 }; }
var createId = function createId() {
return Math.random().toString(36).substr(2);
};
exports.default = {
props: {
title: {
@ -752,6 +748,11 @@ return /******/ (function(modules) { // webpackBootstrap
},
methods: {
clear: function clear() {
if (this.files.length) {
this.files.splice(0, this.files.length);
}
},
_drop: function _drop(value) {
if (this.dropElement && this.$mode === 'html5') {
try {
@ -796,6 +797,41 @@ return /******/ (function(modules) { // webpackBootstrap
_onDragover: function _onDragover(e) {
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) {
this._dropActive = 0;
this.dropActive = false;
@ -803,19 +839,10 @@ return /******/ (function(modules) { // webpackBootstrap
if (e.dataTransfer.files.length) {
for (var i = 0; i < e.dataTransfer.files.length; i++) {
var file = e.dataTransfer.files[i];
var id = createId();
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] = { file: file };
var len;
if (this.multiple) {
len = this.files.push(value);
} else {
this.files = [value];
len = 1;
this._addFileUpload({ file: file }, { size: file.size, name: file.name });
if (!this.multiple) {
break;
}
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) {
for (var i = 0; i < el.files.length; i++) {
var file = el.files[i];
var id = createId();
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]);
this._addFileUpload({ file: file, el: el }, { size: file.size, name: file.name });
}
} else {
var id = createId();
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]);
this._addFileUpload({ el: el }, { size: -1, name: el.value.replace(/^.*?([^\/\\\r\n]+)$/, '$1') });
}
},
_fileUploads: function _fileUploads() {
@ -923,7 +924,7 @@ return /******/ (function(modules) { // webpackBootstrap
},
_fileUploadXhr: function _fileUploadXhr(xhr, file, data) {
var _self = this;
var file2 = this._files[file.id];
var hiddenData = this._files[file.id];
var fileUploads = false;
var speedTime = 0;
var speedLoaded = 0;
@ -1032,7 +1033,7 @@ return /******/ (function(modules) { // webpackBootstrap
xhr.send(data);
file.active = true;
file2.xhr = xhr;
hiddenData.xhr = xhr;
var interval = setInterval(function () {
if (!_self.active || !file.active || file.success || file.errno) {
clearInterval(interval);
@ -1083,7 +1084,7 @@ return /******/ (function(modules) { // webpackBootstrap
},
_fileUploadHtml4: function _fileUploadHtml4(file) {
var _self = this;
var file2 = this._files[file.id];
var hiddenData = this._files[file.id];
var fileUploads = false;
@ -1110,7 +1111,7 @@ return /******/ (function(modules) { // webpackBootstrap
form.setAttribute('method', 'POST');
form.setAttribute('target', 'upload-iframe-' + file.id);
form.setAttribute('enctype', 'multipart/form-data');
form.appendChild(file2.el);
form.appendChild(hiddenData.el);
for (var key in this.request.data) {
var input = document.createElement('input');
input.type = 'hidden';
@ -1206,7 +1207,7 @@ return /******/ (function(modules) { // webpackBootstrap
file.active = true;
file2.iframe = iframe;
hiddenData.iframe = iframe;
document.body.addEventListener('keydown', keydown);
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-else type="submit" @click.prevent="$refs.upload.active = !$refs.upload.active">Start upload</button>
</td>
<td>
<label>
Auto start: <input type="checkbox" id="checkbox" v-model="auto">
</label>
</td>
<td>
<label>
Accept: <input type="text" v-model="accept">
@ -103,6 +108,9 @@
</td>
</tr>
<tr>
<td>
Auto start: {{auto}}
</td>
<td>
Active: {{$refs.upload.active}}
</td>

2
package.json
Unescape View File

@ -1,7 +1,7 @@
{
"name": "vue-upload-component",
"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",
"scripts": {
"dev": "webpack-dev-server --inline --hot",

109
src/FileUpload.vue
Unescape View File

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

23
src/example.js
Unescape View File

@ -21,6 +21,7 @@ Vue.filter('formatSize', function(size) {
return size.toString() + ' B';
});
new Vue({
el:'#app',
components: {
@ -36,9 +37,10 @@ new Vue({
files: [],
upload: {},
drop: true,
auto: false,
},
compiled: function() {
compiled() {
this.upload = this.$refs.upload;
this.upload.request = {
headers: {
@ -51,8 +53,25 @@ new Vue({
this.files = this.$refs.upload.files;
},
methods: {
remove: function(file) {
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