Commit 8fd83c62 authored by Rutesh Rathod's avatar Rutesh Rathod
Browse files

Addition Of File Upload

parent 53322b62
No related merge requests found
Showing with 144 additions and 51 deletions
...@@ -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