Mechanism for uploading files to Xata

uploading-mechanism.vue

<template>
  <div class="flex flex-column flex-row-ns pa3 calisto bg-black-05">
    <div class="w-50-ns w-100 ph3">
      <!-- upload image -->
      <form enctype="multipart/form-data" v-if="isInitial || isSaving">
        <h2>Add Image</h2>
        <div
          class="b--dashed bw1 b--light-purple pa3 hover-bg-black-10 bg-animate pointer relative h4">
          <input
            type="file"
            id="fileInput"
            accept="image/*"
            :name="uploadFieldName"
            :disabled="isSaving"
            @change="filesChange($event.target.name, $event.target.files)"
            class="input-file absolute w-100 h4 pointer o-0" />
          <p v-if="isInitial" class="tc f4">
            Drag your image here to begin<br />
            or click to browse
          </p>
          <p v-if="isSaving" class="tc f4">Adding image...</p>
        </div>
      </form>
      <!--adding successful-->
      <div v-if="isSuccess">
        <h2>Image added successfully.</h2>
        <button
          @click.prevent="reset()"
          class="bg-light-purple mb3 link dim br2 pointer ba b--light-blue dib white">
          Upload another
        </button>
        <img class="db center" :src="imageURL" :alt="imageName" />
      </div>
      <!--upload failed-->
      <div v-if="isFailed">
        <h2>Uploaded failed.</h2>
        <button @click.prevent="reset()">Try again</button>
        <pre>{{ uploadError }}</pre>
      </div>
    </div>
    <section class="w-40-l w-50-m w-100 ph3 tl">
      ...
    </section>
  </div>
</template>
<script>
  import { upload } from "@/utils/file-upload.service.js";
  import { getXataClient } from "@/xata";
  const xata = getXataClient();
  const STATUS_INITIAL = 0,
    STATUS_SAVING = 1,
    STATUS_SUCCESS = 2,
    STATUS_FAILED = 3;
  export default {
    data() {
      return {
        uploadedImages: [],
        uploadError: null,
        currentStatus: null,
        uploadFieldName: "photos",
        imageDataArray: [],
        recordId: null,
        imageURL: "",
        imageName: "",
      };
    },
    computed: {
      isInitial() {
        return this.currentStatus === STATUS_INITIAL;
      },
      isSaving() {
        return this.currentStatus === STATUS_SAVING;
      },
      isSuccess() {
        return this.currentStatus === STATUS_SUCCESS;
      },
      isFailed() {
        return this.currentStatus === STATUS_FAILED;
      },
    },
    methods: {
      reset() {
        // reset form to initial state
        this.currentStatus = STATUS_INITIAL;
        this.uploadedImages = [];
        this.uploadError = null;
      },
      save(formData) {
        // upload data to the server
        this.currentStatus = STATUS_SAVING;
        upload(formData)
          .then((x) => {
            this.uploadedImages = [].concat(x);
            this.uploadImageToXata();
            this.currentStatus = STATUS_SUCCESS;
          })
          .catch((err) => {
            this.uploadError = err.response;
            this.currentStatus = STATUS_FAILED;
          });
      },
      filesChange(fieldName, fileList) {
        // handle file changes
        const formData = new FormData();
        if (!fileList.length) return;
        // append the files to FormData
        Array.from(Array(fileList.length).keys()).map((x) => {
          formData.append(fieldName, fileList[x], fileList[x].name);
        });
        // save it
        this.save(formData);
      },
      prepareFormData() {
        const parts = this.uploadedImages[0].url.split(",");
        const metaDataMatch = parts[0].match(/^data:(.*?);base64/);
        const metaData = metaDataMatch[1];
        const base64Data = parts[1];
        const imageDataObject = {
          mediaType: metaData,
          base64Content: base64Data,
          name: this.uploadedImages[0].fileName,
          enablePublicUrl: true,
        };
        // Push the object to the imageDataArray
        this.imageDataArray.push(imageDataObject);
      },
      async uploadImageToXata() {
        this.prepareFormData();
        await xata.db.images
          .create({
            image: this.imageDataArray,
          })
          .then((res) => {
            this.imageDataArray = [];
            this.imageURL = res.image[0].url;
            this.imageName = res.image[0].name;
            this.recordId = res.id;
          })
          .catch(() => {
            this.$notify({ type: "error", text: "Uploading failed!" });
          });
      },
    },
    mounted() {
      this.reset();
    },
  };
</script>