From 8fd83c62f57ea1b41855fa3855e1ad9c650de350 Mon Sep 17 00:00:00 2001 From: Rutesh <ruteshr@mkcl.org> Date: Thu, 9 Jan 2020 18:53:40 +0530 Subject: [PATCH] Addition Of File Upload --- src/views/ApplicantRegistration.vue | 195 ++++++++++++++++++++-------- 1 file changed, 144 insertions(+), 51 deletions(-) diff --git a/src/views/ApplicantRegistration.vue b/src/views/ApplicantRegistration.vue index 34ca3a9..cd35310 100644 --- a/src/views/ApplicantRegistration.vue +++ b/src/views/ApplicantRegistration.vue @@ -205,8 +205,8 @@ <label class="col-md-3 col-form-label">Password</label> <div class="col-md-9"> <div - class="form-group" - :class="{error: errors.has('password')}" + class="form-group" + :class="{error: errors.has('password')}" > <input v-validate="'required'" @@ -216,8 +216,9 @@ ref="password" > <small - class="form-text text-danger" - v-if="errors.has('password')"> + class="form-text text-danger" + v-if="errors.has('password')" + > {{ errors.first('password') }} </small> </div> @@ -230,8 +231,8 @@ <label class="col-md-3 col-form-label">Repeat Password</label> <div class="col-md-9"> <div - class="form-group" - :class="{error: errors.has('password_confirmation')}" + class="form-group" + :class="{error: errors.has('password_confirmation')}" > <input v-validate="'required|confirmed:password'" @@ -242,15 +243,16 @@ v-model="regUser.password" > <small - class="form-text text-danger" - v-if="errors.has('password_confirmation')"> + class="form-text text-danger" + v-if="errors.has('password_confirmation')" + > {{ errors.first('password_confirmation') }} </small> </div> </div> </div> - <!-- <div + <!-- <div class="alert alert-danger" v-show="errors.any()" > @@ -358,33 +360,11 @@ </div> </div> - <div class="form-group row"> - <label class="col-md-3 col-form-label">Address Line 1</label> - <div class="col-md-9"> - <div - class="form-group" - :class="{error: errors.has('Address')}" - > - <input - type="Address" - class="form-control" - autocomplete - name="Address" - placeholder="Address Please" - v-validate="'required'" - v-model="regUser.address1" - > - <small - class="form-text text-danger" - v-if="errors.has('Address')" - >{{ $t(errors.first('Address')) }}</small> - </div> - </div> - </div> + </div> <div class="col-md-6"> <div class="form-group row"> - <label class="col-md-3 col-form-label">Address Line 2</label> + <label class="col-md-3 col-form-label">Address</label> <div class="col-md-9"> <div class="form-group" @@ -397,7 +377,7 @@ name="Address" placeholder="Address Please" v-validate="'required'" - v-model="regUser.addressl2" + v-model="regUser.address" > <small class="form-text text-danger" @@ -600,14 +580,14 @@ <input class="form-control mb-2" id="files" - @change="submitFile" + @change="submitPhoto" type="file" > <button type="button" class="btn btn-primary btn-sm" - id="uploadtBtn" - @click.stop.prevent="uploadFile" + id="uploadtBtn1" + @click.stop.prevent="uploadPhoto" > Upload </button> @@ -622,14 +602,14 @@ <input class="form-control mb-2" id="files" - @change="submitFile" + @change="submitProjectDoc" type="file" > <button type="button" class="btn btn-primary btn-sm" - id="uploadtBtn" - @click.stop.prevent="uploadFile" + id="uploadtBtn2" + @click.stop.prevent="uploadPorjectDoc" > Upload </button> @@ -642,14 +622,14 @@ <input class="form-control mb-2" id="files" - @change="submitFile" + @change="submitResume" type="file" > <button type="button" class="btn btn-primary btn-sm" - id="uploadtBtn" - @click.stop.prevent="uploadFile" + id="uploadtBtn3" + @click.stop.prevent="uploadResume" > Upload </button> @@ -1043,6 +1023,7 @@ import vSelect from 'vue-select' import VeeValidate from 'vee-validate' import Datepicker from 'vuejs-datepicker' import MQL from '@/plugins/mql.js' +import MQLCdn from '@/plugins/mqlCdn.js' Vue.use(VeeValidate, { events: 'input|blur' }) // var randomo = require('randomatic') @@ -1065,6 +1046,14 @@ export default { data () { return { + inputFileName1: 'ProejctDocument', + inputFileName2: 'ApplicantResume', + + inputFileName: 'ProfilePhoto', + fileURL: '', + files: '', + uploadedFilePath: '', + cdnBaserURl: Vue.getCDNBaseURL(), regUser: { regInst: {} // password: randomo('*', 8) @@ -1175,19 +1164,123 @@ export default { }) }, - uploadFile () { + submitPhoto (event) { + this.regUser.profilePhoto = event.target.files[0] + }, + uploadPhoto () { let formData = new FormData() - formData.append('file', this.files) // append your file as 'file' in formdata. + formData.append('file', this.regUser.profilePhoto) // append your file as 'file' in formdata. new MQLCdn() .enablePageLoader(true) + // FIXED: change this to directory pathy + .setDirectoryPath('/Applicant') // (optional field) if you want to save file to specific directory path .setFormData(formData) // (required) sets file data .setFileName(this.inputFileName) // (optional field) if you want to set name to file that is being uploaded - .setBucketKey('client2') // (required) valid bucket key need to set in which file will be uploaded. - .uploadFile('uploadtBtn') + // FIXED: pass buckeyKey instead of name + .setBucketKey('1W9bjVgIx7bFVDT0LQyw2dC3vev') // (required) valid bucket key need to set in which file will be uploaded. + .setPurposeId('1W9bfR3iUzxof4QiNQsl0ZotJOO') // (required) valid purposeId need to set in which file will be uploaded. + .setClientId('1W9bfR3iUzxof4QiNQsl0ZotJOO') // (required) valid purposeId need to set in which file will be uploaded. + .uploadFile('uploadtBtn1') .then(res => { // (required) this will upload file takes element id (optional param) which will be blocked while file upload.. if (res.isValid()) { - this.uploadedFilePath = res.uploadedFileURL() // returns uploaded file url.. + this.uploadedFilePath = res.uploadedFileURL() + console.log(this.uploadedFilePath) + this.regUser.profilePhoto = + this.uploadedFilePath.cdnServer + + '/' + + this.uploadedFilePath.filePath + + console.log(this.regUser.profilePhoto) + // returns uploaded file url.. + console.log('res cdn path', this.uploadedFilePath) + this.$toasted.success('Profile Photo uploaded.', { + theme: 'bubble', + position: 'top-center', + duration: 5000 + }) + } else { + res.showErrorToast() + } + }) + }, + + submitProjectDoc (event) { + this.regUser.projectDocument = event.target.files[0] + }, + uploadPorjectDoc () { + let formData = new FormData() + formData.append('file', this.regUser.projectDocument) // append your file as 'file' in formdata. + new MQLCdn() + .enablePageLoader(true) + // FIXED: change this to directory pathy + .setDirectoryPath('/Applicant') // (optional field) if you want to save file to specific directory path + .setFormData(formData) // (required) sets file data + .setFileName(this.inputFileName1) // (optional field) if you want to set name to file that is being uploaded + // FIXED: pass buckeyKey instead of name + .setBucketKey('1W9bjVgIx7bFVDT0LQyw2dC3vev') // (required) valid bucket key need to set in which file will be uploaded. + .setPurposeId('1W9bfR3iUzxof4QiNQsl0ZotJOO') // (required) valid purposeId need to set in which file will be uploaded. + .setClientId('1W9bfR3iUzxof4QiNQsl0ZotJOO') // (required) valid purposeId need to set in which file will be uploaded. + .uploadFile('uploadtBtn2') + .then(res => { + // (required) this will upload file takes element id (optional param) which will be blocked while file upload.. + if (res.isValid()) { + this.uploadedFilePath = res.uploadedFileURL() + console.log(this.uploadedFilePath) + this.regUser.projectDocument = + this.uploadedFilePath.cdnServer + + '/' + + this.uploadedFilePath.filePath + + console.log(this.regUser.projectDocument) + // returns uploaded file url.. + console.log('res cdn path', this.uploadedFilePath) + this.$toasted.success('Project Document uploaded.', { + theme: 'bubble', + position: 'top-center', + duration: 5000 + }) + } else { + res.showErrorToast() + } + }) + }, + + submitResume (event) { + this.regUser.applicantResume = event.target.files[0] + }, + uploadResume () { + let formData = new FormData() + formData.append('file', this.regUser.applicantResume) // append your file as 'file' in formdata. + new MQLCdn() + .enablePageLoader(true) + // FIXED: change this to directory pathy + .setDirectoryPath('/Applicant') // (optional field) if you want to save file to specific directory path + .setFormData(formData) // (required) sets file data + .setFileName(this.inputFileName2) // (optional field) if you want to set name to file that is being uploaded + // FIXED: pass buckeyKey instead of name + .setBucketKey('1W9bjVgIx7bFVDT0LQyw2dC3vev') // (required) valid bucket key need to set in which file will be uploaded. + .setPurposeId('1W9bfR3iUzxof4QiNQsl0ZotJOO') // (required) valid purposeId need to set in which file will be uploaded. + .setClientId('1W9bfR3iUzxof4QiNQsl0ZotJOO') // (required) valid purposeId need to set in which file will be uploaded. + .uploadFile('uploadtBtn3') + .then(res => { + // (required) this will upload file takes element id (optional param) which will be blocked while file upload.. + if (res.isValid()) { + this.uploadedFilePath = res.uploadedFileURL() + console.log(this.uploadedFilePath) + this.regUser.applicantResume = + this.uploadedFilePath.cdnServer + + '/' + + this.uploadedFilePath.filePath + + console.log(this.regUser.applicantResume) + // returns uploaded file url.. + console.log('res cdn path', this.uploadedFilePath) + this.$toasted.success('Resume uploaded.', { + theme: 'bubble', + position: 'top-center', + duration: 5000 + }) } else { res.showErrorToast() } @@ -1206,15 +1299,15 @@ export default { console.log(res.result.otp) if (res.result.otp == 'OTPFOUND') { this.flag = 3 - this.$refs.formWizard.changeTab(0,1) - //alert('Mobile Number Verified') + this.$refs.formWizard.changeTab(0, 1) + // alert('Mobile Number Verified') // showAlertSuccess() } else { alert('Invalid OTP') } // this.regotp.o_mobile=this.regUser.mobile } else { - //alert('Wrong OTP ') + // alert('Wrong OTP ') rs.showErrorToast('ApplicantOtpVerification(2)') } }) -- GitLab