Skip to content
GitLab
Commit 8fd83c62 authored by Rutesh Rathod's avatar Rutesh Rathod
Browse files

Addition Of File Upload

parent 53322b62
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 144 additions and 51 deletions
src/views/ApplicantRegistration.vue
+ 144
− 51
View file @ 8fd83c62
...@@ -205,8 +205,8 @@ ...@@ -205,8 +205,8 @@
<label class="col-md-3 col-form-label">Password</label> <label class="col-md-3 col-form-label">Password</label>
<div class="col-md-9"> <div class="col-md-9">
<div <div
class="form-group" class="form-group"
:class="{error: errors.has('password')}" :class="{error: errors.has('password')}"
> >
<input <input
v-validate="'required'" v-validate="'required'"
...@@ -216,8 +216,9 @@ ...@@ -216,8 +216,9 @@
ref="password" ref="password"
> >
<small <small
class="form-text text-danger" class="form-text text-danger"
v-if="errors.has('password')"> v-if="errors.has('password')"
>
{{ errors.first('password') }} {{ errors.first('password') }}
</small> </small>
</div> </div>
...@@ -230,8 +231,8 @@ ...@@ -230,8 +231,8 @@
<label class="col-md-3 col-form-label">Repeat Password</label> <label class="col-md-3 col-form-label">Repeat Password</label>
<div class="col-md-9"> <div class="col-md-9">
<div <div
class="form-group" class="form-group"
:class="{error: errors.has('password_confirmation')}" :class="{error: errors.has('password_confirmation')}"
> >
<input <input
v-validate="'required|confirmed:password'" v-validate="'required|confirmed:password'"
...@@ -242,15 +243,16 @@ ...@@ -242,15 +243,16 @@
v-model="regUser.password" v-model="regUser.password"
> >
<small <small
class="form-text text-danger" class="form-text text-danger"
v-if="errors.has('password_confirmation')"> v-if="errors.has('password_confirmation')"
>
{{ errors.first('password_confirmation') }} {{ errors.first('password_confirmation') }}
</small> </small>
</div> </div>
</div> </div>
</div> </div>
<!-- <div <!-- <div
class="alert alert-danger" class="alert alert-danger"
v-show="errors.any()" v-show="errors.any()"
> >
...@@ -358,33 +360,11 @@ ...@@ -358,33 +360,11 @@
</div> </div>
</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>
<div class="col-md-6"> <div class="col-md-6">
<div class="form-group row"> <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="col-md-9">
<div <div
class="form-group" class="form-group"
...@@ -397,7 +377,7 @@ ...@@ -397,7 +377,7 @@
name="Address" name="Address"
placeholder="Address Please" placeholder="Address Please"
v-validate="'required'" v-validate="'required'"
v-model="regUser.addressl2" v-model="regUser.address"
> >
<small <small
class="form-text text-danger" class="form-text text-danger"
...@@ -600,14 +580,14 @@ ...@@ -600,14 +580,14 @@
<input <input
class="form-control mb-2" class="form-control mb-2"
id="files" id="files"
@change="submitFile" @change="submitPhoto"
type="file" type="file"
> >
<button <button
type="button" type="button"
class="btn btn-primary btn-sm" class="btn btn-primary btn-sm"
id="uploadtBtn" id="uploadtBtn1"
@click.stop.prevent="uploadFile" @click.stop.prevent="uploadPhoto"
> >
Upload Upload
</button> </button>
...@@ -622,14 +602,14 @@ ...@@ -622,14 +602,14 @@
<input <input
class="form-control mb-2" class="form-control mb-2"
id="files" id="files"
@change="submitFile" @change="submitProjectDoc"
type="file" type="file"
> >
<button <button
type="button" type="button"
class="btn btn-primary btn-sm" class="btn btn-primary btn-sm"
id="uploadtBtn" id="uploadtBtn2"
@click.stop.prevent="uploadFile" @click.stop.prevent="uploadPorjectDoc"
> >
Upload Upload
</button> </button>
...@@ -642,14 +622,14 @@ ...@@ -642,14 +622,14 @@
<input <input
class="form-control mb-2" class="form-control mb-2"
id="files" id="files"
@change="submitFile" @change="submitResume"
type="file" type="file"
> >
<button <button
type="button" type="button"
class="btn btn-primary btn-sm" class="btn btn-primary btn-sm"
id="uploadtBtn" id="uploadtBtn3"
@click.stop.prevent="uploadFile" @click.stop.prevent="uploadResume"
> >
Upload Upload
</button> </button>
...@@ -1043,6 +1023,7 @@ import vSelect from 'vue-select' ...@@ -1043,6 +1023,7 @@ import vSelect from 'vue-select'
import VeeValidate from 'vee-validate' import VeeValidate from 'vee-validate'
import Datepicker from 'vuejs-datepicker' import Datepicker from 'vuejs-datepicker'
import MQL from '@/plugins/mql.js' import MQL from '@/plugins/mql.js'
import MQLCdn from '@/plugins/mqlCdn.js'
Vue.use(VeeValidate, { events: 'input|blur' }) Vue.use(VeeValidate, { events: 'input|blur' })
// var randomo = require('randomatic') // var randomo = require('randomatic')
...@@ -1065,6 +1046,14 @@ export default { ...@@ -1065,6 +1046,14 @@ export default {
data () { data () {
return { return {
inputFileName1: 'ProejctDocument',
inputFileName2: 'ApplicantResume',
inputFileName: 'ProfilePhoto',
fileURL: '',
files: '',
uploadedFilePath: '',
cdnBaserURl: Vue.getCDNBaseURL(),
regUser: { regUser: {
regInst: {} regInst: {}
// password: randomo('*', 8) // password: randomo('*', 8)
...@@ -1175,19 +1164,123 @@ export default { ...@@ -1175,19 +1164,123 @@ export default {
}) })
}, },
uploadFile () { submitPhoto (event) {
this.regUser.profilePhoto = event.target.files[0]
},
uploadPhoto () {
let formData = new FormData() 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() new MQLCdn()
.enablePageLoader(true) .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 .setFormData(formData) // (required) sets file data
.setFileName(this.inputFileName) // (optional field) if you want to set name to file that is being uploaded .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. // FIXED: pass buckeyKey instead of name
.uploadFile('uploadtBtn') .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 => { .then(res => {
// (required) this will upload file takes element id (optional param) which will be blocked while file upload.. // (required) this will upload file takes element id (optional param) which will be blocked while file upload..
if (res.isValid()) { 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 { } else {
res.showErrorToast() res.showErrorToast()
} }
...@@ -1206,15 +1299,15 @@ export default { ...@@ -1206,15 +1299,15 @@ export default {
console.log(res.result.otp) console.log(res.result.otp)
if (res.result.otp == 'OTPFOUND') { if (res.result.otp == 'OTPFOUND') {
this.flag = 3 this.flag = 3
this.$refs.formWizard.changeTab(0,1) this.$refs.formWizard.changeTab(0, 1)
//alert('Mobile Number Verified') // alert('Mobile Number Verified')
// showAlertSuccess() // showAlertSuccess()
} else { } else {
alert('Invalid OTP') alert('Invalid OTP')
} }
// this.regotp.o_mobile=this.regUser.mobile // this.regotp.o_mobile=this.regUser.mobile
} else { } else {
//alert('Wrong OTP ') // alert('Wrong OTP ')
rs.showErrorToast('ApplicantOtpVerification(2)') rs.showErrorToast('ApplicantOtpVerification(2)')
} }
}) })
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment