Show progress on html file input?

Question

I want to show a progress bar or spinner when I choose a file for upload, I'm not talking about server upload success, I already got that covered, I want to show a spinner when image is loading right after I click the "Choose file" button from the input file, is that possible?

I'm using Vue.

<label class="modal_input_image fs_normal c_dark" :for="field.id" :style="'background-image:url('+backgroundImage+');'"></label>
<input :id="field.id" type="file">

Answer 1

Check out the input and change events on file inputs - after the value of the file input changes, it should fire those events - try both, see which one suits your needs.

Show the 'loading' indicator when the event first fires, hide the indicator on server upload success!