You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
277 lines
7.3 KiB
277 lines
7.3 KiB
<template>
|
|
<div>
|
|
<h5 class="uploader-label">
|
|
{{ formInfo.preText }}
|
|
<a href="javascript:void(0)" :id="'Tooltip-' + uniqueId">
|
|
{{ formInfo.name }} <i class="fa fa-question-circle"></i>
|
|
</a>
|
|
<strong v-if="party === 1"> - For You</strong>
|
|
<strong v-if="party === 2"> - For Your Spouse</strong>
|
|
</h5>
|
|
<tooltip :text="formInfo.help" :target="'#Tooltip-' + uniqueId"></tooltip>
|
|
<label :for="inputId" class="sr-only">
|
|
{{ formInfo.preText }} {{ formInfo.name }}
|
|
<span v-if="party === 1"> - For You</span>
|
|
<span v-if="party === 2"> - For Your Spouse</span>
|
|
</label>
|
|
<div @dragover="draggingOn" @dragenter="draggingOn" @dragleave="draggingOff" @dragend="draggingOff" @drop="draggingOff">
|
|
<file-upload
|
|
ref="upload"
|
|
v-model="files"
|
|
:multiple="true"
|
|
:drop="true"
|
|
:drop-directory="false"
|
|
:post-action="postAction"
|
|
:input-id="inputId"
|
|
name="file"
|
|
:class="['drop-zone', dragging ? 'dragging' : '']"
|
|
:data="data"
|
|
@input-file="inputFile"
|
|
@input-filter="inputFilter">
|
|
<div v-if="files.length === 0" class="placeholder">
|
|
<i class="fa fa-plus-circle"></i><br>
|
|
<em>Drag and Drop the PDF document or JPG pages here,<br>or click here to Browse for files.</em>
|
|
</div>
|
|
<div v-else class="cards">
|
|
<div v-for="(file, index) in files" v-bind:key="index" class="card">
|
|
<item-tile
|
|
:file="file"
|
|
:index="index"
|
|
:file-count="files.length"
|
|
@remove="remove(file)"
|
|
@moveup="moveUp(index)"
|
|
@movedown="moveDown(index)"
|
|
@rotateleft="rotateLeft(index)"
|
|
@rotateright="rotateRight(index)"/>
|
|
</div>
|
|
<div class="card upload-button">
|
|
<div class="upload-button-wrapper">
|
|
<i class="fa fa-plus-circle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</file-upload>
|
|
</div>
|
|
<modal ref="warningModal" v-model="showWarning">
|
|
{{ warningText }}
|
|
</modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VueUploadComponent from 'vue-upload-component'
|
|
import { Tooltip, Modal } from 'uiv';
|
|
import ItemTile from './ItemTile'
|
|
import Forms from "../../utils/forms";
|
|
|
|
export default {
|
|
props: {
|
|
docType: String,
|
|
party: { type: Number, default: 0 }
|
|
},
|
|
data: function () {
|
|
return {
|
|
files: [],
|
|
dragging: false,
|
|
showWarning: false,
|
|
warningText: ""
|
|
}
|
|
},
|
|
components: {
|
|
FileUpload: VueUploadComponent,
|
|
ItemTile,
|
|
Tooltip,
|
|
Modal
|
|
},
|
|
computed: {
|
|
uniqueId() {
|
|
if (this.party === 0) {
|
|
return this.docType;
|
|
}
|
|
return this.docType + this.party;
|
|
},
|
|
inputId() {
|
|
return "Uploader-" + this.uniqueId;
|
|
},
|
|
formInfo() {
|
|
return Forms[this.docType];
|
|
},
|
|
postAction() {
|
|
return this.$parent.proxyRootPath + "poc/storage"
|
|
},
|
|
data() {
|
|
return {
|
|
doc_type: this.docType,
|
|
party_id: this.party
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
inputFile(newFile, oldFile) {
|
|
if (newFile && oldFile && !newFile.active && oldFile.active) {
|
|
// Get response data
|
|
console.log('response', newFile.response)
|
|
if (newFile.xhr) {
|
|
// Get the response status code
|
|
console.log('status', newFile.xhr.status)
|
|
}
|
|
}
|
|
this.$refs.upload.active = true;
|
|
|
|
if (newFile) {
|
|
console.log('inputFile newFile=' + newFile.name);
|
|
}
|
|
|
|
if (oldFile && !newFile) {
|
|
console.log('inputFile oldFile=' + oldFile.name);
|
|
}
|
|
},
|
|
inputFilter(newFile, oldFile, prevent) {
|
|
if (newFile && !oldFile) {
|
|
// Filter non-image file
|
|
if (!/\.(jpeg|jpg|gif|png|pdf)$/i.test(newFile.name)) {
|
|
this.warningText = 'Unsupported file type. Allowed extensions are jpeg, jpg, gif,png and pdf.';
|
|
this.showWarning = true;
|
|
return prevent()
|
|
}
|
|
|
|
this.files.forEach((file) => {
|
|
// prevent duplicates (based on filename and length)
|
|
if (file.name === newFile.name && file.length === newFile.length) {
|
|
this.warningText = 'Duplicate file: ' + newFile.name;
|
|
this.showWarning = true;
|
|
return prevent();
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
if (newFile) {
|
|
// if it's a PDF, make sure it's the only item being uploaded
|
|
if (newFile.type === 'application/pdf') {
|
|
if (this.files.length > 0) {
|
|
if (this.files[0].name != newFile.name || this.files[0].length != newFile.length) {
|
|
this.warningText = 'Only one PDF is allowed per form, and PDF documents cannot be combined with images.';
|
|
this.showWarning = true;
|
|
this.$refs.upload.remove(newFile);
|
|
return prevent();
|
|
}
|
|
}
|
|
|
|
} else {
|
|
// if it's not a PDF, make sure there are no PDFs already uplaoded
|
|
this.files.forEach((file) => {
|
|
if (file.type === 'application/pdf') {
|
|
this.warningText = 'PDF documents cannot be combined with images.';
|
|
this.showWarning = true;
|
|
this.$refs.upload.remove(newFile);
|
|
return prevent();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add extra data to to the file object
|
|
newFile.objectURL = ''
|
|
let URL = window.URL || window.webkitURL
|
|
if (URL && URL.createObjectURL) {
|
|
newFile.objectURL = URL.createObjectURL(newFile.file)
|
|
newFile.rotation = 0;
|
|
const img = new Image();
|
|
img.onload = function() {
|
|
newFile.width = this.width;
|
|
newFile.height = this.height;
|
|
}
|
|
img.src = newFile.objectURL;
|
|
}
|
|
}
|
|
},
|
|
remove(file) {
|
|
this.$refs.upload.remove(file)
|
|
},
|
|
moveUp(old_index) {
|
|
if (old_index >= 1 && this.files.length > 1) {
|
|
this.files.splice(old_index - 1, 0, this.files.splice(old_index, 1)[0]);
|
|
}
|
|
},
|
|
moveDown(old_index) {
|
|
if (old_index <= this.files.length && this.files.length > 1) {
|
|
this.files.splice(old_index + 1, 0, this.files.splice(old_index, 1)[0]);
|
|
}
|
|
},
|
|
rotateLeft(index) {
|
|
this.files[index].rotation -= 90;
|
|
},
|
|
rotateRight(index) {
|
|
this.files[index].rotation += 90;
|
|
},
|
|
draggingOn() {
|
|
this.dragging = true;
|
|
},
|
|
draggingOff() {
|
|
this.dragging = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.drop-zone {
|
|
background-color: white;
|
|
width: 100%;
|
|
display: block;
|
|
text-align: left;
|
|
border: 2px #365EBE dashed;
|
|
border-radius: 6px;
|
|
padding: 18px;
|
|
|
|
&.dragging {
|
|
background-color: #F2E3F2;
|
|
}
|
|
|
|
.cards {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: left;
|
|
}
|
|
|
|
.card {
|
|
flex: 0 1 160px;
|
|
margin-bottom: 10px;
|
|
width: 160px;
|
|
margin-right: 18px;
|
|
|
|
&.upload-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.fa-plus-circle {
|
|
font-size: 3rem;
|
|
margin-bottom: 8px;
|
|
color: #365EBE;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.placeholder {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
h5.uploader-label {
|
|
display: block;
|
|
margin-top: 30px;
|
|
margin-bottom: 10px;
|
|
font-weight: normal;
|
|
font-size: 1em;
|
|
|
|
a {
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
</style>
|