[Vuejs]-How to implement my own upload file component and make it customizable in vue js?

by

0👍

✅

I’ve finished the component in the followig way:

In my parent component I have two different styles for my component:

  <div id="app" class="container box">
    <upload-file url="url"></upload-file> <-- the default one with statuses outside -->

    <upload-file url="url"> <-- custom one which look like a box with statuses in it -->
      <template #fileselect="{status, change}">
        <custom-file-upload :status="status" @change="change"></custom-file-upload>
      </template> <-- I've used custom-file-upload component here and tnjected all the properties from default implementation -->
    </upload-file>
  </div>

My default file input is nothing but a slot with default implementation:

<template>
  <div>
    <slot name="fileselect" :change="selectedFileChanged" :status="status">
      <input id="fileselect" @change="selectedFileChanged" class="file-input" type="file">

      <div class="help is-info" v-if="isWaiting">Waiting</div>
      <div class="help is-success" v-if="isUploaded">Uploaded</div>
      <div class="help is-info" v-if="isUploading">Uploading {{currentPercent}} %</div>
      <div class="help is-error" v-if="isFailed">Failed</div>
    </slot>
  </div>
</template>

and what is the code looks like:

  name: "upload-file",

  props: ["url"], // url which will be used in upload request

  data() {
    return {
      currentStatus: 1,
      selectedFile: null,
      currentPercent: 0
    };
  },

computed: {
    someOtherProperties,
    status() {
      return {
        isWaiting: this.isWaiting, // this.currentStatus === 1
        isUploaded: this.isUploaded,
        isUploading: this.isUploading,
        isFailed: this.isFailed,

        currentPercent: this.currentPercent,
        selectedFile: this.selectedFile
      };
    }
  },

 methods: {
    selectedFileChanged: function(event) {
      this.selectedFile = event.target.files[0];

      const xhr = new XMLHttpRequest();

      // some handlers for XHR

      xhr.open("POST", this.url, true);

      xhr.send(formData);
    }
  }

Now I can use the file upload component with different styling but it will encapsulate in a base implementation all the status handling and upload logic.

I hope this solution will help someone 🙂

To view the full version of the code, please follow https://codesandbox.io/s/vue-template-pi7e9

Leave a comment