1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
|
<input id="files" ref="files" type="file" multiple="multiple" class="q-uploader-input absolute-full cursor-pointer" v-on:change="handleFilesUpload()">
<div class="row q-my-xg gutter-md">
<div class="col-lg-7 col-md-8 col-xs-10">
<draggable v-model="files" class="dragArea">
<div class="q-list q-uploader-files q-py-none scroll" v-for="(file, key) in files">
<div class="q-uploader-file q-pa-xs q-item q-item-division relative-position">
<div class="q-uploader-progress-text absolute">100%</div>
<div class="q-item-side q-item-section q-item-side-left">
<q-radio v-model="carProfilePicture" :val="key" :id="file.name"/>
</div>
<div class="q-item-side q-item-section q-item-side-left">
<img class="q-item-image" v-bind:ref="'image'+parseInt( key )" :alt="file.name"/>
</div>
<div class="q-item-main q-item-section">
<div class="q-item-label" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;">{{ file.name }}</div>
</div>
<div class="q-item-side q-item-section q-item-side-right">
<i aria-hidden="true" class="q-icon cursor-pointer material-icons text-primary q-item-icon" v-on:click="removeFileBeforeUpload( key )">cancel</i>
</div>
</div>
</div>
</draggable>
</div>
</div>
<script>
'use strict'
import { mapState } from 'vuex';
import draggable from 'vuedraggable';
const querystring = require('querystring');
export default {
name : 'UploadPhotoForm',
components : {
draggable,
},
data () {
return {
carProfilePicture: '',
testa : '',
url: this.getBaseUrl() + 'listings/import-photo',
hide: true,
preUploadFile: [],
files: [],
uploadedFile : {
idFile : ''
},
profilePicFile : {
idFile : ''
}
}
},
computed : {
assets() {
return process.env.APP_FO_ASSETS
},
baseUrl() {
return process.env.APP_FO_BASEURL
},
...mapState({
userInfo : state => state.user.userInfo
})
},
methods : {
handleFilesUpload(){
let uploadedFiles = this.$refs.files.files;
//Adds the uploaded file to the files array
for( var i = 0; i < uploadedFiles.length; i++ ){
this.files.push( uploadedFiles[i] );
}
//Generate image previews for the uploaded files
this.getImagePreviews();
},
//Gets the preview image for the file.
getImagePreviews(){
//Iterate over all of the files and generate an image preview for each one.
for( let i = 0; i < this.files.length; i++ ){
//Ensure the file is an image file
if ( /\.(jpe?g|png|gif)$/i.test( this.files[i].name ) ) {
//Create a new FileReader object
let reader = new FileReader();
/*
Add an event listener for when the file has been loaded
to update the src on the file preview.
*/
reader.addEventListener("load", function(){
this.$refs['image'+parseInt( i )][0].src = reader.result;
}.bind(this), false);
/*
Read the data for the file in through the reader. When it has
been loaded, we listen to the event propagated and set the image
src to what was loaded from the reader.
*/
reader.readAsDataURL( this.files[i] );
}
}
}, |
Partager