Vue JS - File upload loading progress client side

Question

I'm currently trying to create a small loading bar for when I select a file to upload in my form but I'm really struggling to make sense out of it. Most examples I find online show an upload loading example when we hit a button to 'upload' because it comes with an xmlhttprequest or similar, but in my case, I want to show the loading progress right when I select the file before I hit the button that sends the form. Therefore once I add the file to my input a loading percentage should appear. I'd really appreciate if someone could give an indication as to what needs to be done here.

FileUpload.vue - file upload input component

 <div class="container">
    <!--UPLOAD-->
      <h3 class="form-input-title">{{labelText}}</h3>
      <div class="dropbox">
        <img src="../../assets/img/icon/curr/ic_download.svg"
             class="download-icon"
             alt="download icon"/>
        <input :name="fieldName"  
               :accept="accept"
               @change="loadFile($event)"
               type="file"
               class="input-file">
          <p v-if="!isLoading && !isSuccess">{{text}}</p>
          <p v-if="isLoading">Uploading files... {{uploadLoadPercentage}}</p>
          <p v-if="isSuccess">{{fileName}}</p>
      </div>
  </div>


<script>
  import {ref, watch} from '@vue/composition-api';
  import Validator from "@/utils/yo-validator/YoValidator";

  export default {
    name: 'FileUpload',

    setup(props) {
      /** validator returned error messages **/
      const {errorMessages, validateFieldByData, setFieldData} = Validator.register(props);

      /** watch api error text from parent **/
      const apiError = ref('');
      watch(() => props.apiErrorText, (newVal) => {
        apiError.value = newVal.trim();
      });

      const isLoading = ref(false);
      const isSuccess = ref(false);
      const uploadFailed = ref(false);
      let uploadLoadPercentage = ref(0);
      const fileName = ref('');
      /** watch input in the template **/
      const loadFile = async (event) => {
        // TODO: File loading > When the file is selected, check how long the file (in bytes) takes to upload
        // If the loading is successful proceed without any errors

        // validate the image
        validateFieldByData(event.target.files);

        // define data
        const data = props.isMultiple ? event.target.files : event.target.files[0];

        // set the name of the file that has been uploaded.
        fileName.value = event.target.files[0].name;

        // Once loading and validation is completed, save the data
        saveFile(data);
      };

      const saveFile = (data) => {
        // Once saveFile is triggered, the upload value will be successful.
        isSuccess.value = true;

        // update form data
        setFieldData(data);
        // call the parent if needed
        updateParent(data);
      }
  
      // update parent component
      const updateParent = (data) => {
        if (props.callback) {
          props.callback(data);
        }
      };
      const clearFile = (event) => {
        // clear the value to trigger change event for uploading the same image
        event.target.value = null;
      };

      return {
        errorMessages,
        apiError,
        loadFile,
        clearFile,
        isLoading,
        isSuccess,
        uploadFailed,
        fileName,
        uploadLoadPercentage
      }
    }
  }
</script>

Answer 1

First of all, progress for the file upload has to be tracked when you upload it to some server or to some storage space, normally you make a POST or PUT request, with axios, for example, which has a onUploadProgress callback, with which you can upload your progress tracker, I will not go into detail here, since there are countless examples for this, like: The answer to this SO question , which details this nicely.

If you are in a special case, like not sending this through a simple HTTP request, but through something like firebase, they have builtin tools for this as well, but if you give more detail maybe i would be able to help you more in depth with your problem :D

UPDATE: Okay, sorry, my applogies, I totally misunderstood, what you needed:

 < script > import { ref } from 'vue'; export default { setup() { const reader = new FileReader(); const fileUrl = ref(null); const totalSize = ref(0); const currentProgress = ref('0%'); function handleEvent(event) { if (['loadend', 'load'].includes(event.type)) { console.log('finished loading file'); currentProgress.value = 'Finished loading file'; fileUrl.value = reader.result; } if (event.type === 'progress') { currentProgress.value = `${(event.loaded / totalSize.value).toFixed(2) * 100}%`; console.log('Progress: ', currentProgress.value); console.log('Bytes transferred: ', event.loaded, 'bytes'); } if (event.type === 'loadstart') { totalSize.value = event.total; } } function addListeners(reader) { reader.addEventListener('loadstart', handleEvent); reader.addEventListener('load', handleEvent); reader.addEventListener('loadend', handleEvent); reader.addEventListener('progress', handleEvent); reader.addEventListener('error', handleEvent); reader.addEventListener('abort', handleEvent); //dont do this, make diffrent functions for every //event listener please, your code's readability will be 100% better, //i am on a bus rn, but will make it prettier later :D } function handleSelected(e) { console.log(e); const selectedFile = e.target.files[0]; if (selectedFile) { addListeners(reader); reader.readAsDataURL(selectedFile); } } return { handleSelected, fileUrl, currentProgress }; } }; < /script>

 <template> <div> <div> <label for="img">Choose an image:</label> <input type="file" id="img" name="img" accept="image/*" @change="handleSelected" /> </div> <img v-if="fileUrl" :src="fileUrl" class="preview" height="200" alt="Image preview..." /> <div> <span>Progress: {{ currentProgress }}</span> </div> </div> </template>

Just make a Reader object, which is there to handle these types of situations, and listen for the events emitted by it. Hope this helps, if you have any more questions, please ask :D And this is the output to the console, you can use this data to display on the UI as well:

NOTE: In my opinion for images you dont need this progress indicator, since they dont take a long time to upload and will show 100% for most of images(the console output is for a file that is 500mb large), but if you include the http request to upload the file here, then i think it would be ok, if you want to upload regular files, than this is expected and needed.