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