Allow multiple images to be sent and include CSRF token from backend

src/views/CreateListing.vue

 <template>
   <b-container class="b-form-container">
-    <div v-html="casLogin">
-      <p>Hello</p>
-    </div>
     <h1 class="text-center"><strong>SRCT</strong> BOOKSHARE</h1>
     <h3 class="text-center">Add Textbook</h3>
     <b-form @submit="onSubmit" @reset="onReset" v-if="show">
@@ -80,8 +77,9 @@
       </b-form-group>
       <b-form-group id="fieldset6" label="Images:" label-for="photo">
         <b-form-file
-          id="photo"
-          v-model="form.photo"
+          id="files"
+          ref="files"
+          v-model="files"
           accept="image/*"
           multiple
           placeholder="Choose some photos..."
@@ -136,12 +134,12 @@ import { required, minLength, maxLength, between, numeric, helpers } from 'vueli
 })
 export default class CreateListing extends Vue {
   // Private Form Variables
-  private form: {isbn: string, course: string, condition: number, photo: File[],
+  private form: {isbn: string, course: string, condition: number,
     accessCode: number, price: number, description: string} = {
-    isbn: '', course: '', condition: 0, photo: [], accessCode: 2, price: 0, description: '',
+    isbn: '', course: '', condition: 0, accessCode: 2, price: 0, description: '',
   };
   private show: boolean = true;
-  private casLogin: any = ``;
+  private files: File[] = [];
 
   // List of options
   private condition: {value: number, text: string}[] = [
@@ -154,12 +152,6 @@ export default class CreateListing extends Vue {
     {value: 0, text: 'Access Code NOT Included'},
   ];
 
-  // private login() {
-  //   API.get('login').then(function (response) {
-  //     console.log(response);
-  //   });
-  // }
-
   mounted() {
     API.get("/").then(function (response) {
       const token = response.headers["x-csrf-token"];
@@ -174,55 +166,30 @@ export default class CreateListing extends Vue {
   private onSubmit(evt: Event) {
     evt.preventDefault();
 
-    // fetch('https://localhost:8888/api/bs/api/listing', {
-    //   mode: "cors",
-    //   method: 'get',
-    //   // body: JSON.stringify(this.form),
-    //   // headers: {
-    //   //   "Origin": "https://localhost:8888",
-    //   // }
-    // }).then(response => window.location.href = "https://localhost:8888/api/bs/api/login");
-    // .then(response => window.location.href = response.url);
-    // .then(response => console.log(response));
-
-    // API.interceptors.request.use(function (config:any) {
-    //   // Do something before request is sent
-    //   return config;
-    // }, function (error:any) {
-    //   // Do something with request error
-    //   return Promise.reject(error);
-    // });
-
-    // API.get('bs/api/listing')
+    let formData = new FormData();
+    for( var i = 0; i < this.files.length; i++ ) {
+      let file = this.files[i];
 
-    API.post('bs/api/listing', { //?ticket=' + localStorage.getItem('token'), {
-      isbn: this.form.isbn,
-      course: this.form.course,
-      condition: this.form.condition,
-      accessCode: this.form.accessCode,
-      price: this.form.price,
-      description: this.form.description,
-      photo: this.form.photo,
-    },
-    {
-      headers: {
-        'X-CSRF-TOKEN': localStorage.getItem('csrf_token'),
-      }
+      formData.append('images', file, file.name);
+      console.log(file);
+    }
+    console.log(formData.getAll('images'));
+    
+    formData.append('data', JSON.stringify(this.form));
+    API.post('bs/api/listing', 
+      formData,
+      {
+        headers: {
+          'X-CSRF-TOKEN': localStorage.getItem('csrf_token'),
+          'Content-Type': 'multipart/form-data',
+        }
     }).then(function(response) {console.log(response);})
-    // .then(function (this: CreateListing, response) {
-    //   console.log(response);
-    //   // window.location.href = response.request.url;
-    //   // if (response.status == 200) {
-    //   //   this.casLogin = response.data;
-    //   // }
-    // })
     .catch(function (this: CreateListing, error) {
       //handle error
       console.log(error.response);
-      // console.log("hello");
+      // Redirect to backend login
       if (error.response == undefined || error.response.status == 403) {
         location.replace('https://localhost:9090/bs/api/login');
-        // this.login();
       }
     });
   }
@@ -233,7 +200,6 @@ export default class CreateListing extends Vue {
     this.form.isbn = '';
     this.form.course = '';
     this.form.condition = 0;
-    this.form.photo = [];
     this.form.accessCode = 2;
     this.form.price = 0;
     this.form.description = '';