| 
							
							
							
						 |  |  | @@ -1,7 +1,7 @@ | 
		
	
		
			
				|  |  |  |  | <template> | 
		
	
		
			
				|  |  |  |  |   <div class="example-full"> | 
		
	
		
			
				|  |  |  |  |     <button type="button" class="btn btn-danger float-right btn-is-option" @click.prevent="isOption = !isOption"> | 
		
	
		
			
				|  |  |  |  |     <i class="fa fa-cog" aria-hidden="true"></i> | 
		
	
		
			
				|  |  |  |  |       <i class="fa fa-cog" aria-hidden="true" /> | 
		
	
		
			
				|  |  |  |  |       Options | 
		
	
		
			
				|  |  |  |  |     </button> | 
		
	
		
			
				|  |  |  |  |     <h1 id="example-title" class="example-title">Data Uploader</h1> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -9,7 +9,7 @@ | 
		
	
		
			
				|  |  |  |  |     <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active"> | 
		
	
		
			
				|  |  |  |  |       <h3>Drop files to upload</h3> | 
		
	
		
			
				|  |  |  |  |     </div> | 
		
	
		
			
				|  |  |  |  |   <div class="upload" v-show="!isOption"> | 
		
	
		
			
				|  |  |  |  |     <div v-show="!isOption" class="upload"> | 
		
	
		
			
				|  |  |  |  |       <div class="table-responsive"> | 
		
	
		
			
				|  |  |  |  |         <table class="table table-hover"> | 
		
	
		
			
				|  |  |  |  |           <thead> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -27,7 +27,7 @@ | 
		
	
		
			
				|  |  |  |  |             <tr v-if="!files.length"> | 
		
	
		
			
				|  |  |  |  |               <td colspan="7"> | 
		
	
		
			
				|  |  |  |  |                 <div class="text-center p-5"> | 
		
	
		
			
				|  |  |  |  |                 <h4>Drop files anywhere to upload<br/>or</h4> | 
		
	
		
			
				|  |  |  |  |                   <h4>Drop files anywhere to upload<br>or</h4> | 
		
	
		
			
				|  |  |  |  |                   <label :for="name" class="btn btn-lg btn-primary">Select Files</label> | 
		
	
		
			
				|  |  |  |  |                 </div> | 
		
	
		
			
				|  |  |  |  |               </td> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -35,14 +35,14 @@ | 
		
	
		
			
				|  |  |  |  |             <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" /> | 
		
	
		
			
				|  |  |  |  |                 <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 v-if="file.active || file.progress !== '0.00'" class="progress"> | 
		
	
		
			
				|  |  |  |  |                   <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> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -52,7 +52,7 @@ | 
		
	
		
			
				|  |  |  |  |               <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 v-else /> | 
		
	
		
			
				|  |  |  |  |               <td> | 
		
	
		
			
				|  |  |  |  |                 <div class="btn-group"> | 
		
	
		
			
				|  |  |  |  |                   <button class="btn btn-secondary btn-sm dropdown-toggle" type="button"> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -62,11 +62,11 @@ | 
		
	
		
			
				|  |  |  |  |                     <a :class="{'dropdown-item': true, disabled: file.active || file.success || file.error === 'compressing'}" href="#" @click.prevent="file.active || file.success || file.error === 'compressing' ? 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 && file.error !== 'compressing' && $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 || file.error === 'compressing'}" href="#" v-else @click.prevent="file.success || file.error === 'compressing' ? false : $refs.upload.update(file, {active: true})">Upload</a> | 
		
	
		
			
				|  |  |  |  |                     <a v-if="file.active" class="dropdown-item" href="#" @click.prevent="$refs.upload.update(file, {active: false})">Abort</a> | 
		
	
		
			
				|  |  |  |  |                     <a v-else-if="file.error && file.error !== 'compressing' && $refs.upload.features.html5" class="dropdown-item" href="#" @click.prevent="$refs.upload.update(file, {active: true, error: '', progress: '0.00'})">Retry upload</a> | 
		
	
		
			
				|  |  |  |  |                     <a v-else :class="{'dropdown-item': true, disabled: file.success || file.error === 'compressing'}" href="#" @click.prevent="file.success || file.error === 'compressing' ? false : $refs.upload.update(file, {active: true})">Upload</a> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |                   <div class="dropdown-divider"></div> | 
		
	
		
			
				|  |  |  |  |                     <div class="dropdown-divider" /> | 
		
	
		
			
				|  |  |  |  |                     <a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a> | 
		
	
		
			
				|  |  |  |  |                   </div> | 
		
	
		
			
				|  |  |  |  |                 </div> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -84,6 +84,8 @@ | 
		
	
		
			
				|  |  |  |  |         </div> | 
		
	
		
			
				|  |  |  |  |         <div class="btn-group"> | 
		
	
		
			
				|  |  |  |  |           <file-upload | 
		
	
		
			
				|  |  |  |  |             ref="upload" | 
		
	
		
			
				|  |  |  |  |             v-model="files" | 
		
	
		
			
				|  |  |  |  |             class="btn btn-primary dropdown-toggle" | 
		
	
		
			
				|  |  |  |  |             :post-action="postAction" | 
		
	
		
			
				|  |  |  |  |             :put-action="putAction" | 
		
	
	
		
			
				
					
					|  |  |  | @@ -98,11 +100,10 @@ | 
		
	
		
			
				|  |  |  |  |             :drop="drop" | 
		
	
		
			
				|  |  |  |  |             :drop-directory="dropDirectory" | 
		
	
		
			
				|  |  |  |  |             :add-index="addIndex" | 
		
	
		
			
				|  |  |  |  |           v-model="files" | 
		
	
		
			
				|  |  |  |  |             @input-filter="inputFilter" | 
		
	
		
			
				|  |  |  |  |             @input-file="inputFile" | 
		
	
		
			
				|  |  |  |  |           ref="upload"> | 
		
	
		
			
				|  |  |  |  |           <i class="fa fa-plus"></i> | 
		
	
		
			
				|  |  |  |  |           > | 
		
	
		
			
				|  |  |  |  |             <i class="fa fa-plus" /> | 
		
	
		
			
				|  |  |  |  |             Select | 
		
	
		
			
				|  |  |  |  |           </file-upload> | 
		
	
		
			
				|  |  |  |  |           <div class="dropdown-menu"> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -111,73 +112,69 @@ | 
		
	
		
			
				|  |  |  |  |             <a class="dropdown-item" href="#" @click.prevent="addData.show = true">Add data</a> | 
		
	
		
			
				|  |  |  |  |           </div> | 
		
	
		
			
				|  |  |  |  |         </div> | 
		
	
		
			
				|  |  |  |  |       <button type="button" class="btn btn-success" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true"> | 
		
	
		
			
				|  |  |  |  |         <i class="fa fa-arrow-up" aria-hidden="true"></i> | 
		
	
		
			
				|  |  |  |  |         <button v-if="!$refs.upload || !$refs.upload.active" type="button" class="btn btn-success" @click.prevent="$refs.upload.active = true"> | 
		
	
		
			
				|  |  |  |  |           <i class="fa fa-arrow-up" aria-hidden="true" /> | 
		
	
		
			
				|  |  |  |  |           Start Upload | 
		
	
		
			
				|  |  |  |  |         </button> | 
		
	
		
			
				|  |  |  |  |       <button type="button" class="btn btn-warning" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="onSendAnalyzeRequest"> | 
		
	
		
			
				|  |  |  |  |         <button v-if="!$refs.upload || !$refs.upload.active" type="button" class="btn btn-warning" @click.prevent="onSendAnalyzeRequest"> | 
		
	
		
			
				|  |  |  |  |           Analyze | 
		
	
		
			
				|  |  |  |  |         </button> | 
		
	
		
			
				|  |  |  |  |       <button type="button" class="btn btn-danger"  v-else @click.prevent="$refs.upload.active = false"> | 
		
	
		
			
				|  |  |  |  |         <i class="fa fa-stop" aria-hidden="true"></i> | 
		
	
		
			
				|  |  |  |  |         <button v-else type="button" class="btn btn-danger" @click.prevent="$refs.upload.active = false"> | 
		
	
		
			
				|  |  |  |  |           <i class="fa fa-stop" aria-hidden="true" /> | 
		
	
		
			
				|  |  |  |  |           Stop Upload | 
		
	
		
			
				|  |  |  |  |         </button> | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |     </div> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |   <div class="option" v-show="isOption"> | 
		
	
		
			
				|  |  |  |  |     <div v-show="isOption" class="option"> | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <label for="accept">Accept:</label> | 
		
	
		
			
				|  |  |  |  |       <input type="text" id="accept" class="form-control" v-model="accept"> | 
		
	
		
			
				|  |  |  |  |         <input id="accept" v-model="accept" type="text" class="form-control"> | 
		
	
		
			
				|  |  |  |  |         <small class="form-text text-muted">Allow upload mime type</small> | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <label for="extensions">Extensions:</label> | 
		
	
		
			
				|  |  |  |  |       <input type="text" id="extensions" class="form-control" v-model="extensions"> | 
		
	
		
			
				|  |  |  |  |         <input id="extensions" v-model="extensions" type="text" class="form-control"> | 
		
	
		
			
				|  |  |  |  |         <small class="form-text text-muted">Allow upload file extension</small> | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <label>PUT Upload:</label> | 
		
	
		
			
				|  |  |  |  |         <div class="form-check"> | 
		
	
		
			
				|  |  |  |  |           <label class="form-check-label"> | 
		
	
		
			
				|  |  |  |  |           <input class="form-check-input" type="radio" name="put-action" id="put-action" value="" v-model="putAction"> Off | 
		
	
		
			
				|  |  |  |  |             <input id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value=""> Off | 
		
	
		
			
				|  |  |  |  |           </label> | 
		
	
		
			
				|  |  |  |  |         </div> | 
		
	
		
			
				|  |  |  |  |         <div class="form-check"> | 
		
	
		
			
				|  |  |  |  |           <label class="form-check-label"> | 
		
	
		
			
				|  |  |  |  |           <input class="form-check-input" type="radio" name="put-action" id="put-action" value="/upload/put" v-model="putAction"> On | 
		
	
		
			
				|  |  |  |  |             <input id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value="/upload/put"> On | 
		
	
		
			
				|  |  |  |  |           </label> | 
		
	
		
			
				|  |  |  |  |         </div> | 
		
	
		
			
				|  |  |  |  |         <small class="form-text text-muted">After the shutdown, use the POST method to upload</small> | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <label for="thread">Thread:</label> | 
		
	
		
			
				|  |  |  |  |       <input type="number" max="5" min="1" id="thread" class="form-control" v-model.number="thread"> | 
		
	
		
			
				|  |  |  |  |         <input id="thread" v-model.number="thread" type="number" max="5" min="1" class="form-control"> | 
		
	
		
			
				|  |  |  |  |         <small class="form-text text-muted">Also upload the number of files at the same time (number of threads)</small> | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <label for="size">Max size:</label> | 
		
	
		
			
				|  |  |  |  |       <input type="number" min="0" id="size" class="form-control" v-model.number="size"> | 
		
	
		
			
				|  |  |  |  |         <input id="size" v-model.number="size" type="number" min="0" class="form-control"> | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <label for="minSize">Min size:</label> | 
		
	
		
			
				|  |  |  |  |       <input type="number" min="0" id="minSize" class="form-control" v-model.number="minSize"> | 
		
	
		
			
				|  |  |  |  |         <input id="minSize" v-model.number="minSize" type="number" min="0" class="form-control"> | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <label for="autoCompress">Automatically compress:</label> | 
		
	
		
			
				|  |  |  |  |       <input type="number" min="0" id="autoCompress" class="form-control" v-model.number="autoCompress"> | 
		
	
		
			
				|  |  |  |  |       <small class="form-text text-muted" v-if="autoCompress > 0">More than {{autoCompress | formatSize}} files are automatically compressed</small> | 
		
	
		
			
				|  |  |  |  |       <small class="form-text text-muted" v-else>Set up automatic compression</small> | 
		
	
		
			
				|  |  |  |  |         <input id="autoCompress" v-model.number="autoCompress" type="number" min="0" class="form-control"> | 
		
	
		
			
				|  |  |  |  |         <small v-if="autoCompress > 0" class="form-text text-muted">More than {{ autoCompress | formatSize }} files are automatically compressed</small> | 
		
	
		
			
				|  |  |  |  |         <small v-else class="form-text text-muted">Set up automatic compression</small> | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <div class="form-check"> | 
		
	
		
			
				|  |  |  |  |           <label class="form-check-label"> | 
		
	
		
			
				|  |  |  |  |           <input type="checkbox" id="add-index" class="form-check-input" v-model="addIndex"> Start position to add | 
		
	
		
			
				|  |  |  |  |             <input id="add-index" v-model="addIndex" type="checkbox" class="form-check-input"> Start position to add | 
		
	
		
			
				|  |  |  |  |           </label> | 
		
	
		
			
				|  |  |  |  |         </div> | 
		
	
		
			
				|  |  |  |  |         <small class="form-text text-muted">Add a file list to start the location to add</small> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -186,7 +183,7 @@ | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <div class="form-check"> | 
		
	
		
			
				|  |  |  |  |           <label class="form-check-label"> | 
		
	
		
			
				|  |  |  |  |           <input type="checkbox" id="drop" class="form-check-input" v-model="drop"> Drop | 
		
	
		
			
				|  |  |  |  |             <input id="drop" v-model="drop" type="checkbox" class="form-check-input"> Drop | 
		
	
		
			
				|  |  |  |  |           </label> | 
		
	
		
			
				|  |  |  |  |         </div> | 
		
	
		
			
				|  |  |  |  |         <small class="form-text text-muted">Drag and drop upload</small> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -194,7 +191,7 @@ | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <div class="form-check"> | 
		
	
		
			
				|  |  |  |  |           <label class="form-check-label"> | 
		
	
		
			
				|  |  |  |  |           <input type="checkbox" id="drop-directory" class="form-check-input" v-model="dropDirectory"> Drop directory | 
		
	
		
			
				|  |  |  |  |             <input id="drop-directory" v-model="dropDirectory" type="checkbox" class="form-check-input"> Drop directory | 
		
	
		
			
				|  |  |  |  |           </label> | 
		
	
		
			
				|  |  |  |  |         </div> | 
		
	
		
			
				|  |  |  |  |         <small class="form-text text-muted">Not checked, filter the dragged folder</small> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -202,7 +199,7 @@ | 
		
	
		
			
				|  |  |  |  |       <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |         <div class="form-check"> | 
		
	
		
			
				|  |  |  |  |           <label class="form-check-label"> | 
		
	
		
			
				|  |  |  |  |           <input type="checkbox" id="upload-auto" class="form-check-input" v-model="uploadAuto"> Auto start | 
		
	
		
			
				|  |  |  |  |             <input id="upload-auto" v-model="uploadAuto" type="checkbox" class="form-check-input"> Auto start | 
		
	
		
			
				|  |  |  |  |           </label> | 
		
	
		
			
				|  |  |  |  |         </div> | 
		
	
		
			
				|  |  |  |  |         <small class="form-text text-muted">Automatically activate upload</small> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -212,12 +209,8 @@ | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |     </div> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |   <div :class="{'modal-backdrop': true, 'fade': true, show: addData.show}"></div> | 
		
	
		
			
				|  |  |  |  |   <div :class="{modal: true, fade: true, show: addData.show}" id="modal-add-data" tabindex="-1" role="dialog"> | 
		
	
		
			
				|  |  |  |  |     <div :class="{'modal-backdrop': true, 'fade': true, show: addData.show}" /> | 
		
	
		
			
				|  |  |  |  |     <div id="modal-add-data" :class="{modal: true, fade: true, show: addData.show}" tabindex="-1" role="dialog"> | 
		
	
		
			
				|  |  |  |  |       <div class="modal-dialog" role="document"> | 
		
	
		
			
				|  |  |  |  |         <div class="modal-content"> | 
		
	
		
			
				|  |  |  |  |           <div class="modal-header"> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -230,17 +223,17 @@ | 
		
	
		
			
				|  |  |  |  |             <div class="modal-body"> | 
		
	
		
			
				|  |  |  |  |               <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |                 <label for="name">Name:</label> | 
		
	
		
			
				|  |  |  |  |               <input type="text" class="form-control" required id="name"  placeholder="Please enter a file name" v-model="addData.name"> | 
		
	
		
			
				|  |  |  |  |                 <input id="name" v-model="addData.name" type="text" class="form-control" required placeholder="Please enter a file name"> | 
		
	
		
			
				|  |  |  |  |                 <small class="form-text text-muted">Such as <code>filename.txt</code></small> | 
		
	
		
			
				|  |  |  |  |               </div> | 
		
	
		
			
				|  |  |  |  |               <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |                 <label for="type">Type:</label> | 
		
	
		
			
				|  |  |  |  |               <input type="text" class="form-control" required id="type"  placeholder="Please enter the MIME type" v-model="addData.type"> | 
		
	
		
			
				|  |  |  |  |                 <input id="type" v-model="addData.type" type="text" class="form-control" required placeholder="Please enter the MIME type"> | 
		
	
		
			
				|  |  |  |  |                 <small class="form-text text-muted">Such as <code>text/plain</code></small> | 
		
	
		
			
				|  |  |  |  |               </div> | 
		
	
		
			
				|  |  |  |  |               <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |                 <label for="content">Content:</label> | 
		
	
		
			
				|  |  |  |  |               <textarea class="form-control" required id="content" rows="3" placeholder="Please enter the file contents" v-model="addData.content"></textarea> | 
		
	
		
			
				|  |  |  |  |                 <textarea id="content" v-model="addData.content" class="form-control" required rows="3" placeholder="Please enter the file contents" /> | 
		
	
		
			
				|  |  |  |  |               </div> | 
		
	
		
			
				|  |  |  |  |             </div> | 
		
	
		
			
				|  |  |  |  |             <div class="modal-footer"> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -252,13 +245,8 @@ | 
		
	
		
			
				|  |  |  |  |       </div> | 
		
	
		
			
				|  |  |  |  |     </div> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |   <div :class="{'modal-backdrop': true, 'fade': true, show: editFile.show}"></div> | 
		
	
		
			
				|  |  |  |  |   <div :class="{modal: true, fade: true, show: editFile.show}" id="modal-edit-file" tabindex="-1" role="dialog"> | 
		
	
		
			
				|  |  |  |  |     <div :class="{'modal-backdrop': true, 'fade': true, show: editFile.show}" /> | 
		
	
		
			
				|  |  |  |  |     <div id="modal-edit-file" :class="{modal: true, fade: true, show: editFile.show}" tabindex="-1" role="dialog"> | 
		
	
		
			
				|  |  |  |  |       <div class="modal-dialog modal-lg" role="document"> | 
		
	
		
			
				|  |  |  |  |         <div class="modal-content"> | 
		
	
		
			
				|  |  |  |  |           <div class="modal-header"> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -271,22 +259,22 @@ | 
		
	
		
			
				|  |  |  |  |             <div class="modal-body"> | 
		
	
		
			
				|  |  |  |  |               <div class="form-group"> | 
		
	
		
			
				|  |  |  |  |                 <label for="name">Name:</label> | 
		
	
		
			
				|  |  |  |  |               <input type="text" class="form-control" required id="name"  placeholder="Please enter a file name" v-model="editFile.name"> | 
		
	
		
			
				|  |  |  |  |                 <input id="name" v-model="editFile.name" type="text" class="form-control" required placeholder="Please enter a file name"> | 
		
	
		
			
				|  |  |  |  |               </div> | 
		
	
		
			
				|  |  |  |  |             <div class="form-group" v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'"> | 
		
	
		
			
				|  |  |  |  |               <div v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'" class="form-group"> | 
		
	
		
			
				|  |  |  |  |                 <label>Image: </label> | 
		
	
		
			
				|  |  |  |  |                 <div class="edit-image"> | 
		
	
		
			
				|  |  |  |  |                 <img :src="editFile.blob" ref="editImage" /> | 
		
	
		
			
				|  |  |  |  |                   <img ref="editImage" :src="editFile.blob"> | 
		
	
		
			
				|  |  |  |  |                 </div> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |                 <div class="edit-image-tool"> | 
		
	
		
			
				|  |  |  |  |                   <div class="btn-group" role="group"> | 
		
	
		
			
				|  |  |  |  |                   <button type="button" class="btn btn-primary" @click="editFile.cropper.rotate(-90)" title="cropper.rotate(-90)"><i class="fa fa-undo" aria-hidden="true"></i></button> | 
		
	
		
			
				|  |  |  |  |                   <button type="button" class="btn btn-primary" @click="editFile.cropper.rotate(90)"  title="cropper.rotate(90)"><i class="fa fa-repeat" aria-hidden="true"></i></button> | 
		
	
		
			
				|  |  |  |  |                     <button type="button" class="btn btn-primary" title="cropper.rotate(-90)" @click="editFile.cropper.rotate(-90)"><i class="fa fa-undo" aria-hidden="true" /></button> | 
		
	
		
			
				|  |  |  |  |                     <button type="button" class="btn btn-primary" title="cropper.rotate(90)" @click="editFile.cropper.rotate(90)"><i class="fa fa-repeat" aria-hidden="true" /></button> | 
		
	
		
			
				|  |  |  |  |                   </div> | 
		
	
		
			
				|  |  |  |  |                   <div class="btn-group" role="group"> | 
		
	
		
			
				|  |  |  |  |                   <button type="button" class="btn btn-primary" @click="editFile.cropper.crop()" title="cropper.crop()"><i class="fa fa-check" aria-hidden="true"></i></button> | 
		
	
		
			
				|  |  |  |  |                   <button type="button" class="btn btn-primary" @click="editFile.cropper.clear()" title="cropper.clear()"><i class="fa fa-remove" aria-hidden="true"></i></button> | 
		
	
		
			
				|  |  |  |  |                     <button type="button" class="btn btn-primary" title="cropper.crop()" @click="editFile.cropper.crop()"><i class="fa fa-check" aria-hidden="true" /></button> | 
		
	
		
			
				|  |  |  |  |                     <button type="button" class="btn btn-primary" title="cropper.clear()" @click="editFile.cropper.clear()"><i class="fa fa-remove" aria-hidden="true" /></button> | 
		
	
		
			
				|  |  |  |  |                   </div> | 
		
	
		
			
				|  |  |  |  |                 </div> | 
		
	
		
			
				|  |  |  |  |               </div> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -303,7 +291,6 @@ | 
		
	
		
			
				|  |  |  |  |   </div> | 
		
	
		
			
				|  |  |  |  | </template> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | <script> | 
		
	
		
			
				|  |  |  |  | import Cropper from 'cropperjs' | 
		
	
		
			
				|  |  |  |  | import ImageCompressor from '@xkeshi/image-compressor' | 
		
	
	
		
			
				
					
					|  |  |  | @@ -313,7 +300,7 @@ import { sendAnalyzeRequest } from '@/api/user' | 
		
	
		
			
				|  |  |  |  | // import 'bootstrap/dist/css/bootstrap.min.css' | 
		
	
		
			
				|  |  |  |  | export default { | 
		
	
		
			
				|  |  |  |  |   components: { | 
		
	
		
			
				|  |  |  |  |     FileUpload, | 
		
	
		
			
				|  |  |  |  |     FileUpload | 
		
	
		
			
				|  |  |  |  |   }, | 
		
	
		
			
				|  |  |  |  |   data() { | 
		
	
		
			
				|  |  |  |  |     return { | 
		
	
	
		
			
				
					
					|  |  |  | @@ -332,12 +319,12 @@ export default { | 
		
	
		
			
				|  |  |  |  |       thread: 3, | 
		
	
		
			
				|  |  |  |  |       name: 'file', | 
		
	
		
			
				|  |  |  |  |       postAction: '/upload/post', | 
		
	
		
			
				|  |  |  |  |       putAction: 'http://localhost:8888/uploader', | 
		
	
		
			
				|  |  |  |  |       putAction: 'http://localhost:8010/uploader', | 
		
	
		
			
				|  |  |  |  |       headers: { | 
		
	
		
			
				|  |  |  |  |         'X-Csrf-Token': 'xxxx', | 
		
	
		
			
				|  |  |  |  |         'X-Csrf-Token': 'xxxx' | 
		
	
		
			
				|  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |       data: { | 
		
	
		
			
				|  |  |  |  |         '_csrf_token': 'xxxxxx', | 
		
	
		
			
				|  |  |  |  |         '_csrf_token': 'xxxxxx' | 
		
	
		
			
				|  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |       autoCompress: 1024 * 1024, | 
		
	
		
			
				|  |  |  |  |       uploadAuto: false, | 
		
	
	
		
			
				
					
					|  |  |  | @@ -346,11 +333,11 @@ export default { | 
		
	
		
			
				|  |  |  |  |         show: false, | 
		
	
		
			
				|  |  |  |  |         name: '', | 
		
	
		
			
				|  |  |  |  |         type: '', | 
		
	
		
			
				|  |  |  |  |         content: '', | 
		
	
		
			
				|  |  |  |  |         content: '' | 
		
	
		
			
				|  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |       editFile: { | 
		
	
		
			
				|  |  |  |  |         show: false, | 
		
	
		
			
				|  |  |  |  |         name: '', | 
		
	
		
			
				|  |  |  |  |         name: '' | 
		
	
		
			
				|  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |     } | 
		
	
		
			
				|  |  |  |  |   }, | 
		
	
	
		
			
				
					
					|  |  |  | @@ -365,8 +352,8 @@ export default { | 
		
	
		
			
				|  |  |  |  |           if (!this.$refs.editImage) { | 
		
	
		
			
				|  |  |  |  |             return | 
		
	
		
			
				|  |  |  |  |           } | 
		
	
		
			
				|  |  |  |  |           let cropper = new Cropper(this.$refs.editImage, { | 
		
	
		
			
				|  |  |  |  |             autoCrop: false, | 
		
	
		
			
				|  |  |  |  |           const cropper = new Cropper(this.$refs.editImage, { | 
		
	
		
			
				|  |  |  |  |             autoCrop: false | 
		
	
		
			
				|  |  |  |  |           }) | 
		
	
		
			
				|  |  |  |  |           this.editFile = { | 
		
	
		
			
				|  |  |  |  |             ...this.editFile, | 
		
	
	
		
			
				
					
					|  |  |  | @@ -381,7 +368,7 @@ export default { | 
		
	
		
			
				|  |  |  |  |         this.addData.type = '' | 
		
	
		
			
				|  |  |  |  |         this.addData.content = '' | 
		
	
		
			
				|  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |     }, | 
		
	
		
			
				|  |  |  |  |     } | 
		
	
		
			
				|  |  |  |  |   }, | 
		
	
		
			
				|  |  |  |  |   methods: { | 
		
	
		
			
				|  |  |  |  |     inputFilter(newFile, oldFile, prevent) { | 
		
	
	
		
			
				
					
					|  |  |  | @@ -405,7 +392,7 @@ export default { | 
		
	
		
			
				|  |  |  |  |           const imageCompressor = new ImageCompressor(null, { | 
		
	
		
			
				|  |  |  |  |             convertSize: Infinity, | 
		
	
		
			
				|  |  |  |  |             maxWidth: 512, | 
		
	
		
			
				|  |  |  |  |             maxHeight: 512, | 
		
	
		
			
				|  |  |  |  |             maxHeight: 512 | 
		
	
		
			
				|  |  |  |  |           }) | 
		
	
		
			
				|  |  |  |  |           imageCompressor.compress(newFile.file) | 
		
	
		
			
				|  |  |  |  |             .then((file) => { | 
		
	
	
		
			
				
					
					|  |  |  | @@ -420,7 +407,7 @@ export default { | 
		
	
		
			
				|  |  |  |  |         // Create a blob field | 
		
	
		
			
				|  |  |  |  |         // 创建 blob 字段 | 
		
	
		
			
				|  |  |  |  |         newFile.blob = '' | 
		
	
		
			
				|  |  |  |  |         let URL = window.URL || window.webkitURL | 
		
	
		
			
				|  |  |  |  |         const URL = window.URL || window.webkitURL | 
		
	
		
			
				|  |  |  |  |         if (URL && URL.createObjectURL) { | 
		
	
		
			
				|  |  |  |  |           newFile.blob = URL.createObjectURL(newFile.file) | 
		
	
		
			
				|  |  |  |  |         } | 
		
	
	
		
			
				
					
					|  |  |  | @@ -482,12 +469,12 @@ export default { | 
		
	
		
			
				|  |  |  |  |         this.editFile.show = false | 
		
	
		
			
				|  |  |  |  |         return | 
		
	
		
			
				|  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |       let data = { | 
		
	
		
			
				|  |  |  |  |         name: this.editFile.name, | 
		
	
		
			
				|  |  |  |  |       const data = { | 
		
	
		
			
				|  |  |  |  |         name: this.editFile.name | 
		
	
		
			
				|  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |       if (this.editFile.cropper) { | 
		
	
		
			
				|  |  |  |  |         let binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1]) | 
		
	
		
			
				|  |  |  |  |         let arr = new Uint8Array(binStr.length) | 
		
	
		
			
				|  |  |  |  |         const binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1]) | 
		
	
		
			
				|  |  |  |  |         const arr = new Uint8Array(binStr.length) | 
		
	
		
			
				|  |  |  |  |         for (let i = 0; i < binStr.length; i++) { | 
		
	
		
			
				|  |  |  |  |           arr[i] = binStr.charCodeAt(i) | 
		
	
		
			
				|  |  |  |  |         } | 
		
	
	
		
			
				
					
					|  |  |  | @@ -504,7 +491,7 @@ export default { | 
		
	
		
			
				|  |  |  |  |         this.alert('Your browser does not support') | 
		
	
		
			
				|  |  |  |  |         return | 
		
	
		
			
				|  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |       let input = this.$refs.upload.$el.querySelector('input') | 
		
	
		
			
				|  |  |  |  |       const input = this.$refs.upload.$el.querySelector('input') | 
		
	
		
			
				|  |  |  |  |       input.directory = true | 
		
	
		
			
				|  |  |  |  |       input.webkitdirectory = true | 
		
	
		
			
				|  |  |  |  |       this.directory = true | 
		
	
	
		
			
				
					
					|  |  |  | @@ -522,8 +509,8 @@ export default { | 
		
	
		
			
				|  |  |  |  |         this.alert('Your browser does not support') | 
		
	
		
			
				|  |  |  |  |         return | 
		
	
		
			
				|  |  |  |  |       } | 
		
	
		
			
				|  |  |  |  |       let file = new window.File([this.addData.content], this.addData.name, { | 
		
	
		
			
				|  |  |  |  |         type: this.addData.type, | 
		
	
		
			
				|  |  |  |  |       const file = new window.File([this.addData.content], this.addData.name, { | 
		
	
		
			
				|  |  |  |  |         type: this.addData.type | 
		
	
		
			
				|  |  |  |  |       }) | 
		
	
		
			
				|  |  |  |  |       this.$refs.upload.add(file) | 
		
	
		
			
				|  |  |  |  |     }, | 
		
	
	
		
			
				
					
					|  |  |  | @@ -552,7 +539,6 @@ export default { | 
		
	
		
			
				|  |  |  |  |   } | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | </script> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | <style> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -633,7 +619,6 @@ export default { | 
		
	
		
			
				|  |  |  |  | } | 
		
	
		
			
				|  |  |  |  | </style> | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  | <!-- <template> | 
		
	
		
			
				|  |  |  |  |   <div class="app-container"> | 
		
	
		
			
				|  |  |  |  |     <ul> | 
		
	
	
		
			
				
					
					|  |  |  | @@ -721,11 +706,6 @@ export default { | 
		
	
		
			
				|  |  |  |  | import 'vue-upload-component/dist/vue-upload-component.part.css' | 
		
	
		
			
				|  |  |  |  | @import "vue-upload-component/dist/vue-upload-component.part.css" | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |  | 
		
	
		
			
				|  |  |  |  |   | 
		
	
		
			
				|  |  |  |  | .file-uploads { | 
		
	
		
			
				|  |  |  |  |   overflow: hidden; | 
		
	
		
			
				|  |  |  |  |   position: relative; | 
		
	
	
		
			
				
					
					|  |  |  |   |