How to prepopulate a Vuetify v-file-input field with text?

MarkusAfricanus 0
Viewed 27

Is it possible to the Vuetify v-file-input component on an edit screen where the user can upload files. When a file is uploaded we save the file name. When opening the edit screen again we would like to should the name of the file in the v-file-input component to indicate that there is already a file uploaded. How can we achieve this?

Atempts to achieve this includes:

  • Setting the v-model to the file name (name does not show up in the input field)
  • Using the placeholder property together with the file name (doesn't work)

Example of input:

<!-- ID Upload -->
 <v-file-input
  outlined
  dense
  accept="image/*"
  label="Upload ID / Passport (Certified)"
  :rules="[v => !!v || 'ID / Passport is required']"
  @change="onNewFileUpload"
 ></v-file-input>
vuetify.js vue.js
1 Answers

As Yits suggested in the comments you can use the prepend-inner slot. I used that while chaning the label attribute text dynamically based if a file already existed to achieve the goal.

 <v-file-input
   outlined
   dense
   accept="image/*"
   :label="fileInputLabel"
   :rules="[v => !!v || 'ID / Passport is required']"
   @change="onNewFileUpload">
   <template v-if="executive.id_doc" #prepend-inner>
     {{executive.id_doc.fileName}}
   </template>
</v-file-input>
MarkusAfricanus0
Related