CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Dhwng7
Dhwng7

Reputation: 57

Vuetify -remove preview image after cancelling the upload

i am trying to remove image preview after cancelling, but im having troubles finding the answers online

inserting image

enter image description here

after canceling

enter image description here

vue.js

   <v-avatar
      size="95">
      <v-img :src="url" />
    </v-avatar>
  </v-flex>
  <v-flex xs8>
    <v-file-input
      v-model="image"
      accept=".png, .jpeg, .jpg"
      :rules="imagesize"
      hint="File extentions (.png, .jpg, .jpeg) File Size limits (max: 10mb)"
      placeholder="Upload profile image"
      prepend-icon="mdi-camera"
      outlined
      filled
      @change="Preview_image"/>
  </v-flex>

method

Preview_image() {
  this.url = URL.createObjectURL(this.image);
},

Upvotes: 1

Views: 729

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Reset the url property in the @click:clear handler in v-file-input component :

 <v-file-input
   ...
 @click:clear="url=''"

LIVE DEMO

Upvotes: 1

Related Questions