manshu
513
22
Vue

VueJS File Upload, Not working

Posted 2 months ago by manshu

Here is my Vue Component and im having trouble upload image. Any idea why it's not taking image? I am able to submit the form, but having issue submitting image.

<template>
  <div class="container mx-auto py-10">
    <form @submit.prevent="submitListing">
      <div class="w-full px-3">
        <label
          class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2"
          for="grid-company-name"
        >Company Name</label>
        <input
          class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          id="grid-company-name"
          type="text"
          placeholder="Company Name"
          required
          v-model="form.name"
        >
      </div>
      <div class="w-full px-3">
        <label
          class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2"
          for="grid-email"
        >Email</label>
        <input
          class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          id="grid-email"
          type="text"
          required
          v-model="form.email"
          placeholder="Company Email"
        >
      </div>
      <div class="w-full px-3">
        <label
          class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2"
          for="grid-website"
        >Your Website</label>
        <input
          class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          id="grid-website"
          type="text"
          required
          v-model="form.website"
          placeholder="Company Website"
        >
      </div>
      <div class="w-full px-3">
        <label
          class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2"
          for="grid-phone"
        >Company Phone</label>
        <input
          class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          id="grid-tollfreephone"
          type="text"
          required
          v-model="form.tollfree_phone"
          placeholder="Company Toll Free Phone"
        >
      </div>
      <div class="w-full px-3">
        <label
          class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2"
          for="grid-phone"
        >Company Local Phone</label>
        <input
          class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          id="grid-localphone"
          type="text"
          required
          v-model="form.local_phone"
          placeholder="Company Local Phone"
        >
      </div>
      <div class="w-full px-3">
        <label
          class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2"
          for="grid-phone"
        >Address</label>
        <input
          class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          id="grid-address"
          type="text"
          required
          v-model="form.address_1"
          placeholder="Company Address"
        >
      </div>
      <div class="w-full px-3">
        <label
          class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2"
          for="grid-phone"
        >Address 2</label>
        <input
          class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          id="grid-phone"
          type="text"
          required
          v-model="form.address_2"
          placeholder="Suite 200"
        >
      </div>
      <div class="w-full px-3">
        <label
          class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2"
          for="grid-phone"
        >Address 2</label>
        <textarea
          class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          placeholder="Company Details"
          v-model="form.description"
          rows="6"
        ></textarea>
      </div>
      <div class="flex flex-wrap mb-2">
        <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
          <label
            class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
            for="grid-state"
          >State</label>
          <div class="relative">
            <select
              class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
              id="grid-state"
              required
              v-model="form.state_id"
              @change="getCities($event.target.value)"
            >
              <option selected>Select one</option>
              <option v-for="state in states" :key="state.id" :value="state.id">{{ state.name }}</option>
            </select>
            <div
              class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
            >
              <svg
                class="fill-current h-4 w-4"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
              >
                <path
                  d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
                ></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
          <label
            class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
            for="grid-state"
          >City</label>
          <div class="relative">
            <select
              class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
              id="grid-state"
              required
              v-model="form.city_id"
            >
              <option selected>Select one</option>
              <option v-for="city in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
            </select>
            <div
              class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
            >
              <svg
                class="fill-current h-4 w-4"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
              >
                <path
                  d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
                ></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
          <label
            class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
            for="grid-zip"
            required
          >Zip</label>
          <input
            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
            id="grid-zip"
            type="text"
            v-model="form.zip"
            placeholder="90210"
          >
        </div>
      </div>
      <div class="w-full px-3">
        <label
          class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2 mt-2"
          for="grid-phone"
        >Company Image</label>
        <input
          class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
          id="grid-phone"
          type="file"
          accept="image/*"
          @change="onFileChanged"
          placeholder="Company Local Phone"
        >
      </div>
      <div class="w-full px-3 mt-4">
        <div class>
          <button class="btn btn-raisin-light" type="submit">Sign Up</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      selectedCountry: "",
      states: [],
      cities: {},
      form: {
        name: "",
        description: "",
        email: "",
        website: "",
        tollfree_phone: "",
        local_phone: "",
        address_1: "",
        address_2: "",
        state_id: "",
        city_id: "",
        zip: "",
        imageUrl: null
      }
    };
  },
  created() {
    axios.get("/api/users/states").then(response => {
      this.states = response.data;
    });
  },
  methods: {
    getCities(state) {
      axios.get("/api/users/cities/" + state).then(response => {
        this.cities = response.data;
      });
    },
    submitListing() {
      const config = {
        headers: { "content-type": "multipart/form-data" }
      };

      let formData = new FormData();
      formData.append("imageUrl", this.form.imageUrl.data, config);
      axios.post("/listings", this.form, formData).then(response => {
        console.log(response.data);
      });
    },
    onFileChanged(event) {
      let selectedFile = event.target.files[0];
      this.form.imageUrl = selectedFile;
    }
  }
};
</script>

<style>
</style>

Please sign in or create an account to participate in this conversation.