| 
						 
							
							
							
						 
					 | 
				
			
			 | 
			 | 
			
				@@ -1,7 +1,7 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				<template>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  <div class="example-full">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				<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 class="fa fa-cog" aria-hidden="true"></i>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    Options
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  </button>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  <h1 id="example-title" class="example-title">Data Uploader</h1>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -9,8 +9,8 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <h3>Drop files to upload</h3>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div v-show="!isOption" class="upload">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div class="table-responsive">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  <div class="upload" v-show="!isOption">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="table-responsive" style="height: 400px">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <table class="table table-hover">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <thead>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <tr>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -27,32 +27,32 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          </tr>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <tr v-for="(file, index) in files" :key="file.id">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <td>{{ index }}</td>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <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 }}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                {{file.name}}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <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 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>{{file.size | formatSize}}</td>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <td>{{file.speed | formatSize}}</td>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <td v-if="file.error">{{ file.error }}</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 v-else></td>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <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 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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                  <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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                    <div class="dropdown-divider" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                  <div class="dropdown-divider"></div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                  <a class="dropdown-item" href="#" @click.prevent="$refs.upload.remove(file)">Remove</a>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              </div>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -76,16 +76,14 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </table>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="example-foorer">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <div class="footer-status float-right">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          Drop: {{ $refs.upload ? $refs.upload.drop : false }},
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          Active: {{ $refs.upload ? $refs.upload.active : false }},
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          Uploaded: {{ $refs.upload ? $refs.upload.uploaded : true }},
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          Drop active: {{ $refs.upload ? $refs.upload.dropActive : false }}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				<!--       <div class="footer-status float-right">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        Drop: {{$refs.upload ? $refs.upload.drop : false}},
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        Active: {{$refs.upload ? $refs.upload.active : false}},
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        Uploaded: {{$refs.upload ? $refs.upload.uploaded : true}},
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        Drop active: {{$refs.upload ? $refs.upload.dropActive : false}}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </div> -->
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div class="btn-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <file-upload
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            ref="upload"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            v-model="files"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          class="btn btn-primary dropdown-toggle"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          :post-action="postAction"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          :put-action="putAction"
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -100,10 +98,11 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          :drop="drop"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          :drop-directory="dropDirectory"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          :add-index="addIndex"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          v-model="files"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          @input-filter="inputFilter"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          @input-file="inputFile"
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          >
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <i class="fa fa-plus" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          ref="upload">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <i class="fa fa-plus"></i>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          Select
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        </file-upload>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <div class="dropdown-menu">
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -112,69 +111,73 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <a class="dropdown-item" href="#" @click.prevent="addData.show = true">Add data</a>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <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" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        Start Upload 
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </button>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <button v-if="!$refs.upload || !$refs.upload.active" type="button" class="btn btn-warning" @click.prevent="onSendAnalyzeRequest">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <button type="button" class="btn btn-warning" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="onSendAnalyzeRequest">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        Analyze
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </button>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <button v-else type="button" class="btn btn-danger" @click.prevent="$refs.upload.active = false">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <i class="fa fa-stop" aria-hidden="true" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <button type="button" class="btn btn-danger"  v-else @click.prevent="$refs.upload.active = false">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <i class="fa fa-stop" aria-hidden="true"></i>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        Stop Upload
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </button>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div v-show="isOption" class="option">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  <div class="option" v-show="isOption">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <label for="accept">Accept:</label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <input id="accept" v-model="accept" type="text" class="form-control">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <input type="text" id="accept" class="form-control" v-model="accept">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <small class="form-text text-muted">Allow upload mime type</small>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <label for="extensions">Extensions:</label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <input id="extensions" v-model="extensions" type="text" class="form-control">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <input type="text" id="extensions" class="form-control" v-model="extensions">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <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 id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value=""> Off
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <input class="form-check-input" type="radio" name="put-action" id="put-action" value="" v-model="putAction"> Off
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        </label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div class="form-check">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <label class="form-check-label">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <input id="put-action" v-model="putAction" class="form-check-input" type="radio" name="put-action" value="/upload/put"> On
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <input class="form-check-input" type="radio" name="put-action" id="put-action" value="/upload/put" v-model="putAction"> 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 id="thread" v-model.number="thread" type="number" max="5" min="1" class="form-control">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <input type="number" max="5" min="1" id="thread" class="form-control" v-model.number="thread">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <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 id="size" v-model.number="size" type="number" min="0" class="form-control">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <input type="number" min="0" id="size" class="form-control" v-model.number="size">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <label for="minSize">Min size:</label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <input id="minSize" v-model.number="minSize" type="number" min="0" class="form-control">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <input type="number" min="0" id="minSize" class="form-control" v-model.number="minSize">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <label for="autoCompress">Automatically compress:</label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div class="form-check">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <label class="form-check-label">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <input id="add-index" v-model="addIndex" type="checkbox" class="form-check-input"> Start position to add
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <input type="checkbox" id="add-index" class="form-check-input" v-model="addIndex"> Start position to add
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        </label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <small class="form-text text-muted">Add a file list to start the location to add</small>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -183,7 +186,7 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div class="form-check">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <label class="form-check-label">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <input id="drop" v-model="drop" type="checkbox" class="form-check-input"> Drop
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <input type="checkbox" id="drop" class="form-check-input" v-model="drop"> Drop
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        </label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <small class="form-text text-muted">Drag and drop upload</small>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -191,7 +194,7 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div class="form-check">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <label class="form-check-label">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <input id="drop-directory" v-model="dropDirectory" type="checkbox" class="form-check-input"> Drop directory
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <input type="checkbox" id="drop-directory" class="form-check-input" v-model="dropDirectory"> Drop directory
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        </label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <small class="form-text text-muted">Not checked, filter the dragged folder</small>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -199,7 +202,7 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div class="form-check">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <label class="form-check-label">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <input id="upload-auto" v-model="uploadAuto" type="checkbox" class="form-check-input"> Auto start
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <input type="checkbox" id="upload-auto" class="form-check-input" v-model="uploadAuto"> Auto start
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        </label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <small class="form-text text-muted">Automatically activate upload</small>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -209,8 +212,12 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <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-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-dialog" role="document">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div class="modal-content">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <div class="modal-header">
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -223,17 +230,17 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <div class="modal-body">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <label for="name">Name:</label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <input id="name" v-model="addData.name" type="text" class="form-control" required placeholder="Please enter a file name">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <input type="text" class="form-control" required id="name"  placeholder="Please enter a file name" v-model="addData.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 id="type" v-model="addData.type" type="text" class="form-control" required placeholder="Please enter the MIME type">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <input type="text" class="form-control" required id="type"  placeholder="Please enter the MIME type" v-model="addData.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 id="content" v-model="addData.content" class="form-control" required rows="3" placeholder="Please enter the file contents" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <textarea class="form-control" required id="content" rows="3" placeholder="Please enter the file contents" v-model="addData.content"></textarea>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <div class="modal-footer">
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -245,8 +252,13 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <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-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-dialog modal-lg" role="document">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      <div class="modal-content">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        <div class="modal-header">
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -259,22 +271,22 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          <div class="modal-body">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <div class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <label for="name">Name:</label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <input id="name" v-model="editFile.name" type="text" class="form-control" required placeholder="Please enter a file name">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <input type="text" class="form-control" required id="name"  placeholder="Please enter a file name" v-model="editFile.name">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <div v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'" class="form-group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            <div class="form-group" v-if="editFile.show && editFile.blob && editFile.type && editFile.type.substr(0, 6) === 'image/'">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <label>Image: </label>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <div class="edit-image">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                  <img ref="editImage" :src="editFile.blob">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <img :src="editFile.blob" ref="editImage" />
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              <div class="edit-image-tool">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <div class="btn-group" role="group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                    <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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                  <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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                <div class="btn-group" role="group">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                    <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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                  <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>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				                </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				              </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            </div>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -288,9 +300,10 @@
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  </div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				</div>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				</template>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				<script>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import Cropper from 'cropperjs'
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				import ImageCompressor from '@xkeshi/image-compressor'
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -300,7 +313,7 @@ import { sendAnalyzeRequest } from '@/api/user'
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				// import 'bootstrap/dist/css/bootstrap.min.css'
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  components: {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    FileUpload
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    FileUpload,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  },
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  data() {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    return {
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -319,12 +332,12 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      thread: 3,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      name: 'file',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      postAction: '/upload/post',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      putAction: 'http://localhost:8010/uploader',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      putAction: 'http://localhost:8888/uploader',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      headers: {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        'X-Csrf-Token': 'xxxx'
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        'X-Csrf-Token': 'xxxx',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      },
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      data: {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        '_csrf_token': 'xxxxxx'
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        '_csrf_token': 'xxxxxx',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      },
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      autoCompress: 1024 * 1024,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      uploadAuto: false,
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -333,11 +346,11 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        show: false,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        name: '',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        type: '',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        content: ''
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        content: '',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      },
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      editFile: {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        show: false,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        name: ''
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        name: '',
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  },
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -348,12 +361,12 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        this.$refs.upload.update(this.editFile.id, { error: this.editFile.error || '' })
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      if (newValue) {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        this.$nextTick(function() {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        this.$nextTick(function () {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          if (!this.$refs.editImage) {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            return
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          const cropper = new Cropper(this.$refs.editImage, {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            autoCrop: false
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          let cropper = new Cropper(this.$refs.editImage, {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            autoCrop: false,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          })
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          this.editFile = {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            ...this.editFile,
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -368,7 +381,7 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        this.addData.type = ''
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        this.addData.content = ''
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    },
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  },
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  methods: {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    inputFilter(newFile, oldFile, prevent) {
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -392,7 +405,7 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          const imageCompressor = new ImageCompressor(null, {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            convertSize: Infinity,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            maxWidth: 512,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            maxHeight: 512
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            maxHeight: 512,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          })
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          imageCompressor.compress(newFile.file)
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				            .then((file) => {
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -407,7 +420,7 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        // Create a blob field
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        // 创建 blob 字段
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        newFile.blob = ''
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        const URL = window.URL || window.webkitURL
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        let URL = window.URL || window.webkitURL
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        if (URL && URL.createObjectURL) {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          newFile.blob = URL.createObjectURL(newFile.file)
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        }
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -469,12 +482,12 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        this.editFile.show = false
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        return
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      const data = {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        name: this.editFile.name
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      let data = {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        name: this.editFile.name,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      if (this.editFile.cropper) {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        const binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        const arr = new Uint8Array(binStr.length)
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        let binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        let arr = new Uint8Array(binStr.length)
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        for (let i = 0; i < binStr.length; i++) {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				          arr[i] = binStr.charCodeAt(i)
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        }
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -491,7 +504,7 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        this.alert('Your browser does not support')
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        return
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      const input = this.$refs.upload.$el.querySelector('input')
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      let input = this.$refs.upload.$el.querySelector('input')
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      input.directory = true
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      input.webkitdirectory = true
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      this.directory = true
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -509,8 +522,8 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        this.alert('Your browser does not support')
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        return
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      const file = new window.File([this.addData.content], this.addData.name, {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        type: this.addData.type
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      let file = new window.File([this.addData.content], this.addData.name, {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				        type: this.addData.type,
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      })
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				      this.$refs.upload.add(file)
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    },
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -539,6 +552,7 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  }
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				</script>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				<style>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -550,6 +564,7 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				.example-full .btn-group:hover > .dropdown-menu {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  visibility: visible;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				.example-full label.dropdown-item {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  margin-bottom: 0;
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -605,8 +620,10 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  padding: 0;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				.example-full {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  height: auto;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  padding-left: 5;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  padding-right: 5;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  padding: 20px;
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				.modal-backdrop {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  z-index: -1;
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -619,6 +636,7 @@ export default {
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				}
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				</style>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				<!-- <template>
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				  <div class="app-container">
 | 
			
		
		
	
		
			
				 | 
				 | 
			
			 | 
			 | 
			
				    <ul>
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				@@ -706,6 +724,11 @@ 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;
 | 
			
		
		
	
	
		
			
				
					
					| 
						
					 | 
				
			
			 | 
			 | 
			
				 
 |