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