I'm facing a challenge in creating a loading bar that shows the progress when a file is selected for upload in a form. Most of the examples I come across online demonstrate the loading bar after hitting an 'upload' button, but in my case, I want to display the loading progress immediately after selecting the file, even before hitting the submit button. So, once a file is added to the input field, a loading percentage should be visible. I would greatly appreciate any guidance on how to achieve this.
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>