manshu
11 months ago
2004
22
Vue

VueJS File Upload, Not working

Posted 11 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.