Skip to content

Commit aa6834f

Browse files
safraziksafrazik
committed
Update index.html
1 parent 17cee30 commit aa6834f

File tree

1 file changed

+152
-139
lines changed

1 file changed

+152
-139
lines changed

‎upload-server-examples/index.html

Lines changed: 152 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,12 @@
1818

1919
<link rel="stylesheet" href="https://safrazik.github.io/vue-file-agent/website/assets/styles.css">
2020
<link rel="stylesheet" href="https://safrazik.github.io/vue-file-agent/website/assets/github-markdown.css">
21-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-file-agent/dist/vue-file-agent.css">
21+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-file-agent@1.1.1/dist/vue-file-agent.css">
2222

2323

24+
25+
26+
2427

2528

2629
</head>
@@ -51,7 +54,7 @@
5154
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.js" integrity="sha256-qq7wfY6gQJldAy+TGLT7UF/TqnfV4XFzGF/RzrVXq24=" crossorigin="anonymous"></script>
5255
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5356

54-
<script src="https://cdn.jsdelivr.net/npm/vue-file-agent/dist/vue-file-agent.umd.js"></script>
57+
<script src="https://cdn.jsdelivr.net/npm/vue-file-agent@1.1.1/dist/vue-file-agent.umd.js"></script>
5558

5659
<div id="app">
5760
<div class="container">
@@ -121,7 +124,7 @@ <h2 id="php">PHP</h2>
121124
(function(){
122125
var filesBaseUrl = '/vue-file-agent/website/assets/files/';
123126

124-
var videoData = {"name":"Cat Licking Its Paw.mp4","lastModified":1565241222998,"sizeText":"433 KB","size":443767,"type":"video/mp4","ext":"mp4"};
127+
var videoData = {"name":"Cat Licking Its Paw.mp4","lastModified":1565241222998,"sizeText":"433 KB","size":443767,"type":"video/mp4","ext":"mp4", "dimensions": {"width": 640, "height": 360}};
125128
videoData.videoThumbnail = filesBaseUrl + '/Cat Licking Its Paw-thumb.png';
126129
videoData.imageColor = [66, 62, 45];
127130

@@ -184,174 +187,182 @@ <h2 id="php">PHP</h2>
184187

185188
<script type="text/x-template" id="demo-advanced-template">
186189

187-
<div class="appa">
190+
<div class="row">
188191

189-
<div class="card card-body mb-3">
190-
<div class="row mx-n2">
191-
<div class="col-md-6 px-2">
192-
<div class="input-group input-group-sm mb-2">
193-
<div class="input-group-prepend">
194-
<span class="input-group-text"><small>:accept</small></span>
195-
</div>
196-
<input class="form-control" type="text" v-model="valAccept" placeholder="e.g: image/*,video/*">
197-
<div class="input-group-append">
198-
<a class="btn btn-warning" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers" target="_blank">
199-
?
200-
</a>
192+
<div class="col-md-3 mb-3">
193+
<div class="bg-light p-2">
194+
<div class="row mx-n2">
195+
<div class="col-md-12 col-12 px-2">
196+
<div class="input-group input-group-sm mb-2">
197+
<div class="input-group-prepend">
198+
<span class="input-group-text"><small>:accept</small></span>
199+
</div>
200+
<input class="form-control" type="text" v-model="valAccept" placeholder="e.g: image/*,video/*">
201+
<div class="input-group-append">
202+
<a class="btn btn-warning" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers" target="_blank">
203+
?
204+
</a>
205+
</div>
201206
</div>
202207
</div>
203-
</div>
204-
<div class="col-md-3 col-6 px-2">
205-
<div class="input-group input-group-sm mb-2">
206-
<div class="input-group-prepend">
207-
<span class="input-group-text"><small>:maxSize</small></span>
208+
<div class="col-md-12 col-6 px-2">
209+
<div class="input-group input-group-sm mb-2">
210+
<div class="input-group-prepend">
211+
<span class="input-group-text"><small>:maxSize</small></span>
212+
</div>
213+
<input class="form-control" type="text" v-model="valMaxSize" placeholder="e.g: 500KB, 2.5MB, 1GB">
208214
</div>
209-
<input class="form-control" type="text" v-model="valMaxSize" placeholder="e.g: 500KB, 2.5MB, 1GB">
210215
</div>
211-
</div>
212-
<div class="col-md-3 col-6 px-2">
213-
<div class="input-group input-group-sm mb-2">
214-
<div class="input-group-prepend">
215-
<span class="input-group-text"><small>:maxFiles</small></span>
216+
<div class="col-md-12 col-6 px-2">
217+
<div class="input-group input-group-sm mb-2">
218+
<div class="input-group-prepend">
219+
<span class="input-group-text"><small>:maxFiles</small></span>
220+
</div>
221+
<input class="form-control" type="number" v-model="valMaxFiles" placeholder="e.g: 4">
216222
</div>
217-
<input class="form-control" type="number" v-model="valMaxFiles" placeholder="e.g: 4">
218223
</div>
219224
</div>
220-
</div>
221-
<div class="row mx-n2">
222-
<div class="col-md-4 px-2 mb-1">
223-
<div class="input-group input-group-sm">
224-
<div class="input-group-prepend">
225-
<span class="input-group-text"><small>Upload URL</small></span>
225+
<div class="row mx-n2">
226+
<div class="col-md-12 px-2 mb-1">
227+
<div class="input-group input-group-sm">
228+
<div class="input-group-prepend">
229+
<span class="input-group-text"><small>Upload URL</small></span>
230+
</div>
231+
<input id="advanced-demo-upload-url" class="form-control" type="text" v-model="uploadUrl">
226232
</div>
227-
<input id="advanced-demo-upload-url" class="form-control" type="text" v-model="uploadUrl">
228233
</div>
229-
</div>
230-
<div class="col-6 col-md-2 px-2">
231-
<div class="custom-control custom-checkbox mt-1">
232-
<input type="checkbox" class="custom-control-input" id="advanced-demo-meta" v-model="meta">
233-
<label class="custom-control-label" for="advanced-demo-meta">:meta</label>
234+
<div class="col-6 col-md-12 px-2">
235+
<div class="custom-control custom-checkbox mt-1">
236+
<input type="checkbox" class="custom-control-input" id="advanced-demo-meta" v-model="meta">
237+
<label class="custom-control-label" for="advanced-demo-meta">:meta</label>
238+
</div>
234239
</div>
235-
</div>
236-
<div class="col-6 col-md-2 px-2">
237-
<div class="custom-control custom-checkbox mt-1">
238-
<input type="checkbox" class="custom-control-input" id="advanced-demo-multiple" v-model="multiple">
239-
<label class="custom-control-label" for="advanced-demo-multiple">:multiple</label>
240+
<div class="col-6 col-md-12 px-2">
241+
<div class="custom-control custom-checkbox mt-1">
242+
<input type="checkbox" class="custom-control-input" id="advanced-demo-multiple" v-model="multiple">
243+
<label class="custom-control-label" for="advanced-demo-multiple">:multiple</label>
244+
</div>
240245
</div>
241-
</div>
242-
<div class="col-6 col-md-2 px-2">
243-
<div class="custom-control custom-checkbox mt-1">
244-
<input type="checkbox" class="custom-control-input" id="advanced-demo-deletable" v-model="deletable">
245-
<label class="custom-control-label" for="advanced-demo-deletable">:deletable</label>
246+
<div class="col-6 col-md-12 px-2">
247+
<div class="custom-control custom-checkbox mt-1">
248+
<input type="checkbox" class="custom-control-input" id="advanced-demo-deletable" v-model="deletable">
249+
<label class="custom-control-label" for="advanced-demo-deletable">:deletable</label>
250+
</div>
246251
</div>
247-
</div>
248-
<div class="col-6 col-md-2 px-2">
249-
<div class="custom-control custom-checkbox mt-1">
250-
<input type="checkbox" class="custom-control-input" id="advanced-demo-compact" v-model="compact">
251-
<label class="custom-control-label" for="advanced-demo-compact">:compact</label>
252+
<div class="col-6 col-md-12 px-2">
253+
<select class="custom-select custom-select-sm mt-1" v-model="theme">
254+
<option selected>- Theme -</option>
255+
<option value="default">Default Theme (default)</option>
256+
<option value="list">List Theme (list)</option>
257+
</select>
258+
<!-- <div class="custom-control custom-checkbox mt-1">
259+
<input type="checkbox" class="custom-control-input" id="advanced-demo-compact" v-model="compact">
260+
<label class="custom-control-label" for="advanced-demo-compact">:compact</label>
261+
</div> -->
252262
</div>
253263
</div>
254264
</div>
255265
</div>
256266

257-
<div class="mx-auto" :style="compact ? {width: '200px'} : {}">
258-
<VueFileAgent
259-
ref="vueFileAgent"
260-
:multiple="multiple"
261-
:meta="meta"
262-
:deletable="deletable"
263-
:compact="compact"
264-
:accept="valAccept"
265-
:maxSize="valMaxSize"
266-
:maxFiles="valMaxFiles"
267-
:helpTextOld="'Choose images or zip files'"
268-
:errorTextOld="{
269-
type: 'Invalid file type. Only png or zip Allowed',
270-
size: 'Files should not exceed 10MB in size',
271-
}"
272-
@select="filesSelected($event)"
273-
@delete="fileDeleted($event)"
274-
v-model="filesData"
275-
></VueFileAgent>
267+
268+
<div class="col-md-5 col-sm-6 mb-3">
269+
<div class="mx-auto" :style="compact ? {width: '200px'} : {}">
270+
<VueFileAgent
271+
ref="vueFileAgent"
272+
:multiple="multiple"
273+
:meta="meta"
274+
:deletable="deletable"
275+
:compact="compact"
276+
:accept="valAccept"
277+
:maxSize="valMaxSize"
278+
:maxFiles="valMaxFiles"
279+
:theme="theme"
280+
@select="filesSelected($event)"
281+
@delete="fileDeleted($event)"
282+
v-model="filesData"
283+
></VueFileAgent>
284+
</div>
276285
</div>
277286

278287

279-
<div class="card card-body mt-3">
288+
<div class="col-md-4 col-sm-6 mb-3">
289+
<div class="bg-light p-2">
280290

281-
<div class="form-inlinex">
291+
<div class="form-inlinex">
282292

283-
<div class="row">
284-
<div class="col-md-6">
285-
<div v-if="!filesData.length">
286-
No files selected
287-
</div>
288-
<div class="form-inline" v-if="filesData.length">
289-
<label class="my-1 mr-2" for="file-select-index">With File:</label>
290-
<!-- <select ref="fileIdx" class="custom-select my-1 mr-sm-2" id="file-select-index" v-model="selectedIdx">
291-
<option v-for="i in filesData.length" :value="i">{{ i }}</option>
292-
</select> -->
293-
<!-- </div><div> -->
294-
<button type="button" class="btn mr-1 mb-1" v-for="(fileData, i) in filesData"
295-
:class="{'btn-secondary': selectedIdx == i+1, 'btn-light': selectedIdx != i+1}"
296-
@click="selectedIdx = i+1"
297-
>
298-
<!-- <span class="badge badge-secondary" :style="{'background-color': fileData.color}"> -->
299-
{{ i + 1 }}
300-
<!-- </span> -->
301-
</button>
302-
</div>
293+
<div class="row">
294+
<div class="col-md-12">
295+
<div v-if="!filesData.length">
296+
No files selected
297+
</div>
298+
<div class="form-inline" v-if="filesData.length">
299+
<label class="my-1 mr-2" for="file-select-index">With File:</label>
300+
<!-- <select ref="fileIdx" class="custom-select my-1 mr-sm-2" id="file-select-index" v-model="selectedIdx">
301+
<option v-for="i in filesData.length" :value="i">{{ i }}</option>
302+
</select> -->
303+
<!-- </div><div> -->
304+
<button type="button" class="btn mr-1 mb-1" v-for="(fileData, i) in filesData"
305+
:class="{'btn-secondary': selectedIdx == i+1, 'btn-light': selectedIdx != i+1}"
306+
@click="selectedIdx = i+1"
307+
>
308+
<!-- <span class="badge badge-secondary" :style="{'background-color': fileData.color}"> -->
309+
{{ i + 1 }}
310+
<!-- </span> -->
311+
</button>
312+
</div>
303313

304-
</div>
305-
<div class="col-md-6">
314+
</div>
315+
<div class="col-md-12">
306316

307-
<div class="row">
308-
<div class="col-md-12">
309-
<label class="my-1 mr-2" for="set-progress-range">Set Progess to:</label>
310-
</div>
311-
<div class="col-md-12">
312-
<input type="range" min="0" max="100" ref="prgInput" @input="setProgress()" @change="setProgress()" id="set-progress-range" class="custom-range">
313-
</div>
314-
</div>
317+
<div class="row">
318+
<div class="col-md-12">
319+
<label class="my-1 mr-2" for="set-progress-range">Set Progess to:</label>
320+
</div>
321+
<div class="col-md-12">
322+
<input type="range" min="0" max="100" ref="prgInput" @input="setProgress()" @change="setProgress()" id="set-progress-range" class="custom-range">
323+
</div>
324+
</div>
315325

316326

317327

318-
<button type="button" class="btn btn-outline-secondary mb-2" @click="moveIndex(-1)">&lt;&lt;</button>
319-
<button type="button" class="btn btn-outline-secondary mb-2" @click="moveIndex(1)">&gt;&gt;</button>
320-
<button type="button" class="btn btn-outline-danger mb-2" @click="remove()">Remove</button>
321-
<button type="button" class="btn btn-outline-primary mb-2" @click="upload()">Upload</button>
322-
</div>
323-
</div>
328+
<button type="button" class="btn btn-outline-secondary mb-2" @click="moveIndex(-1)">&lt;&lt;</button>
329+
<button type="button" class="btn btn-outline-secondary mb-2" @click="moveIndex(1)">&gt;&gt;</button>
330+
<button type="button" class="btn btn-outline-danger mb-2" @click="remove()">Remove</button>
331+
<button type="button" class="btn btn-outline-primary mb-2" @click="upload()">Upload</button>
332+
</div>
333+
</div>
324334

325335

326-
<hr>
336+
<hr>
327337

328-
<div class="mb-2">
329-
<button class="btn btn-outline-secondary mb-2"
330-
:disabled="!filesDataForUpload.length"
331-
@click="uploadFiles()"
332-
>
333-
Upload Queue ({{ filesDataForUpload.length }})
334-
</button>
338+
<div class="mb-2">
339+
<button class="btn btn-outline-secondary mb-2"
340+
:disabled="!filesDataForUpload.length"
341+
@click="uploadFiles()"
342+
>
343+
Upload Queue ({{ filesDataForUpload.length }})
344+
</button>
335345

336-
<button class="btn btn-danger mb-2" :disabled="!filesDataInvalid.length" @click="removeInvalid()">Remove Invalid ({{ filesDataInvalid.length }})</button>
346+
<button class="btn btn-danger mb-2" :disabled="!filesDataInvalid.length" @click="removeInvalid()">Remove Invalid ({{ filesDataInvalid.length }})</button>
337347

338-
<button type="button" class="btn btn-outline-danger mb-2" @click="removeAll()" :disabled="!filesData.length">Remove All ({{ filesData.length }})</button>
339-
</div>
340-
<div>
341-
Sort by:
342-
<button type="button" class="btn btn-outline-secondary mb-2" @click="sortBy('lastModified')">Last Modified {{ sortDirection.lastModified }}</button>
343-
<button type="button" class="btn btn-outline-secondary mb-2" @click="sortBy('name')">Name {{ sortDirection.name }}</button>
344-
</div>
348+
<button type="button" class="btn btn-outline-danger mb-2" @click="removeAll()" :disabled="!filesData.length">Remove All ({{ filesData.length }})</button>
349+
</div>
350+
<div>
351+
Sort by:
352+
<button type="button" class="btn btn-outline-secondary mb-2" @click="sortBy('lastModified')">Last Modified {{ sortDirection.lastModified }}</button>
353+
<button type="button" class="btn btn-outline-secondary mb-2" @click="sortBy('name')">Name {{ sortDirection.name }}</button>
354+
</div>
345355

346-
</div>
347-
<!-- Move: <input type="number" ref="moveInput" value="1"> -->
348-
<!-- <input type="number" ref="removeIdx" value="1"> -->
356+
</div>
357+
<!-- Move: <input type="number" ref="moveInput" value="1"> -->
358+
<!-- <input type="number" ref="removeIdx" value="1"> -->
349359

350360

351-
<!-- Set Progress to: -->
352-
<!-- <button @click="setProgress()">
353-
Set Progress
354-
</button> -->
361+
<!-- Set Progress to: -->
362+
<!-- <button @click="setProgress()">
363+
Set Progress
364+
</button> -->
365+
</div>
355366
</div>
356367

357368
</div>
@@ -361,7 +372,7 @@ <h2 id="php">PHP</h2>
361372
(function(){
362373
var filesBaseUrl = window.location.host == 'localhost:4000' ? '/vue-file-agent/website/assets/files/' : 'https://safrazik.github.io/vue-file-agent/website/assets/files/';
363374

364-
var videoData = {"name":"Cat Licking Its Paw.mp4","lastModified":1565241222998,"sizeText":"433 KB","size":443767,"type":"video/mp4","ext":"mp4"};
375+
var videoData = {"name":"Cat Licking Its Paw.mp4","lastModified":1565241222998,"sizeText":"433 KB","size":443767,"type":"video/mp4","ext":"mp4", "dimensions": {"width": 640, "height": 360}};
365376
videoData.videoThumbnail = filesBaseUrl + '/Cat Licking Its Paw-thumb.png';
366377
videoData.imageColor = [66, 62, 45];
367378

@@ -382,10 +393,10 @@ <h2 id="php">PHP</h2>
382393
[
383394
{"name":"sample.pdf","lastModified":1565232623243,"sizeText":"3 KB","size":3028,"type":"application/pdf","ext":"pdf"},
384395
{"name":"DSC_0261.jpg","lastModified":1564648335292,"sizeText":"64 KB","size":65762,"type":"image/jpeg","ext":"jpg"},
385-
{"name":"Important sheet.ods","lastModified":1564392646095,"sizeText":"0 B","size":0,"type":"","ext":"ods"},
396+
{"name":"Important sheet.ods","lastModified":1564392646095,"sizeText":"31 KB","size":31276,"type":"","ext":"ods"},
386397
videoData,
387-
{"name":"Collection of something.zip","lastModified":1564392646087,"sizeText":"0 B","size":0,"type":"application/x-zip-compressed","ext":"zip"},
388-
{"name":"Document 3.doc","lastModified":1564392646097,"sizeText":"0 B","size":0,"type":"","ext":"doc"},
398+
{"name":"Collection of something.zip","lastModified":1564392646087,"sizeText":"2 MB","size":1640378,"type":"application/x-zip-compressed","ext":"zip"},
399+
{"name":"Document 3.doc","lastModified":1564392646097,"sizeText":"109 KB","size":111303,"type":"","ext":"doc"},
389400
].forEach(function(fd){
390401
fd.url = filesBaseUrl + fd.name;
391402
// fd.progress = 10;
@@ -404,6 +415,7 @@ <h2 id="php">PHP</h2>
404415
multiple: true,
405416
deletable: true,
406417
compact: false,
418+
theme: 'list',
407419
sortDirection: {
408420
lastModified: 'ASC',
409421
name: 'ASC',
@@ -535,6 +547,7 @@ <h2 id="php">PHP</h2>
535547
this.$refs.vueFileAgent.deleteUpload(this.uploadUrl, this.uploadHeaders, fileData);
536548
},
537549
filesSelected: function(filesData){
550+
console.log('filesSelected', filesData);
538551
var validFilesData = [];
539552
for(var i = 0; i < filesData.length; i++){
540553
if(!filesData[i].error){

0 commit comments

Comments
 (0)