|
|
|
@ -10,70 +10,71 @@
|
|
|
|
<h3>Drop files to upload</h3>
|
|
|
|
<h3>Drop files to upload</h3>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="upload" v-show="!isOption">
|
|
|
|
<div class="upload" v-show="!isOption">
|
|
|
|
<table class="table table-hover">
|
|
|
|
<div class="table-responsive">
|
|
|
|
<thead>
|
|
|
|
<table class="table table-hover">
|
|
|
|
<tr>
|
|
|
|
<thead>
|
|
|
|
<th>#</th>
|
|
|
|
<tr>
|
|
|
|
<th>Thumb</th>
|
|
|
|
<th>#</th>
|
|
|
|
<th>Name</th>
|
|
|
|
<th>Thumb</th>
|
|
|
|
<th>Size</th>
|
|
|
|
<th>Name</th>
|
|
|
|
<th>Speed</th>
|
|
|
|
<th>Size</th>
|
|
|
|
<th>Status</th>
|
|
|
|
<th>Speed</th>
|
|
|
|
<th>Action</th>
|
|
|
|
<th>Status</th>
|
|
|
|
</tr>
|
|
|
|
<th>Action</th>
|
|
|
|
</thead>
|
|
|
|
</tr>
|
|
|
|
<tbody>
|
|
|
|
</thead>
|
|
|
|
<tr v-if="!files.length">
|
|
|
|
<tbody>
|
|
|
|
<td colspan="7">
|
|
|
|
<tr v-if="!files.length">
|
|
|
|
<div class="text-center p-5">
|
|
|
|
<td colspan="7">
|
|
|
|
<h4>Drop files anywhere to upload<br/>or</h4>
|
|
|
|
<div class="text-center p-5">
|
|
|
|
<label :for="name" class="btn btn-lg btn-primary">Select Files</label>
|
|
|
|
<h4>Drop files anywhere to upload<br/>or</h4>
|
|
|
|
</div>
|
|
|
|
<label :for="name" class="btn btn-lg btn-primary">Select Files</label>
|
|
|
|
</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr v-for="(file, index) in files" :key="file.id">
|
|
|
|
|
|
|
|
<td>{{index}}</td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
|
|
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
|
|
|
|
|
|
|
|
<span v-else>No Image</span>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
|
|
<div class="filename">
|
|
|
|
|
|
|
|
{{file.name}}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="progress" v-if="file.active || file.progress !== '0.00'">
|
|
|
|
|
|
|
|
<div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{file.progress}}%</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td>{{file.size | formatSize}}</td>
|
|
|
|
|
|
|
|
<td>{{file.speed | formatSize}}</td>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<td v-if="file.error">{{file.error}}</td>
|
|
|
|
|
|
|
|
<td v-else-if="file.success">success</td>
|
|
|
|
|
|
|
|
<td v-else-if="file.active">active</td>
|
|
|
|
|
|
|
|
<td v-else></td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
|
|
<div class="btn-group">
|
|
|
|
|
|
|
|
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button">
|
|
|
|
|
|
|
|
Action
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<div class="dropdown-menu">
|
|
|
|
|
|
|
|
<a :class="{'dropdown-item': true, disabled: file.active || file.success}" href="#" @click.prevent="file.active || file.success ? false : onEditFileShow(file)">Edit</a>
|
|
|
|
|
|
|
|
<a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="dropdown-item" href="#" v-if="file.active" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
|
|
|
|
|
|
|
|
<a class="dropdown-item" href="#" v-else-if="file.error && $refs.upload.features.html5" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
|
|
|
|
|
|
|
|
<a :class="{'dropdown-item': true, disabled: file.success}" href="#" v-else @click.prevent="file.success ? false : $refs.upload.update(file, {active: true})">Upload</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
|
|
|
|
<a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</td>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
<tr v-for="(file, index) in files" :key="file.id">
|
|
|
|
</tbody>
|
|
|
|
<td>{{index}}</td>
|
|
|
|
</table>
|
|
|
|
<td>
|
|
|
|
|
|
|
|
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
|
|
|
|
|
|
|
|
<span v-else>No Image</span>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
|
|
<div class="filename">
|
|
|
|
|
|
|
|
{{file.name}}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="progress" v-if="file.active || file.progress !== '0.00'">
|
|
|
|
|
|
|
|
<div :class="{'progress-bar': true, 'progress-bar-striped': true, 'bg-danger': file.error, 'progress-bar-animated': file.active}" role="progressbar" :style="{width: file.progress + '%'}">{{file.progress}}%</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td>{{file.size | formatSize}}</td>
|
|
|
|
|
|
|
|
<td>{{file.speed | formatSize}}</td>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<td v-if="file.error">{{file.error}}</td>
|
|
|
|
|
|
|
|
<td v-else-if="file.success">success</td>
|
|
|
|
|
|
|
|
<td v-else-if="file.active">active</td>
|
|
|
|
|
|
|
|
<td v-else></td>
|
|
|
|
|
|
|
|
<td>
|
|
|
|
|
|
|
|
<div class="btn-group">
|
|
|
|
|
|
|
|
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button">
|
|
|
|
|
|
|
|
Action
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
<div class="dropdown-menu">
|
|
|
|
|
|
|
|
<a :class="{'dropdown-item': true, disabled: file.active || file.success}" href="#" @click.prevent="file.active || file.success ? false : onEditFileShow(file)">Edit</a>
|
|
|
|
|
|
|
|
<a :class="{'dropdown-item': true, disabled: !file.active}" href="#" @click.prevent="file.active ? $refs.upload.update(file, {error: 'cancel'}) : false">Cancel</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="dropdown-item" href="#" v-if="file.active" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a>
|
|
|
|
|
|
|
|
<a class="dropdown-item" href="#" v-else-if="file.error && $refs.upload.features.html5" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a>
|
|
|
|
|
|
|
|
<a :class="{'dropdown-item': true, disabled: file.success}" href="#" v-else @click.prevent="file.success ? false : $refs.upload.update(file, {active: true})">Upload</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
|
|
|
|
<a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</tbody>
|
|
|
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="example-foorer">
|
|
|
|
<div class="example-foorer">
|
|
|
|
<div class="footer-status float-right">
|
|
|
|
<div class="footer-status float-right">
|
|
|
|
Drop: {{$refs.upload ? $refs.upload.drop : false}},
|
|
|
|
Drop: {{$refs.upload ? $refs.upload.drop : false}},
|
|
|
|
@ -280,7 +281,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pt-5">
|
|
|
|
<div class="pt-5">
|
|
|
|
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Full.vue">https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Full.vue</a>
|
|
|
|
Source code: <a href="https://github.com/lian-yue/vue-upload-component/blob/master/docs/views/examples/Full.vue">/docs/views/examples/Full.vue</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|