how to show the selected file in file input

hello ,

I would like to show the selected file because now event when I select one the field is always "Select image"


<div class="custom-file">
                                            <input v-on:change="onImageChange($event)" type="file" accept="image/*"
                                                   class="custom-file-input" id="profilePicture">
                                            <label for="profilePicture" class="custom-file-label">Select image</label>
                                        </div>

cometads

6 years ago

Level 3

<template>
  <div class="custom-file">
    <input
      v-on:change="onImageChange($event)"
      type="file"
      accept="image/*"
      class="custom-file-input"
      id="profilePicture"
    />
    <label for="profilePicture" class="custom-file-label">{{ fileName ? fileName : 'Select image' }}</label>
  </div>
</template>

<script>
export default {
  name: "FileInput",
  data: {
    fileName: null
  },
  method: {
    onImageChange(e) {
      let files = e.target.files || e.dataTransfer.files
      if (!files.length) {
        this.fileName = null
      } else {
        this.fileName = files[0].name
      }
    }
  }
}
</script>

Please or to participate in this conversation.