Best Approach To Upload image using <q-uploader>



  • I need to upload an image by using <q-uploader>, but i still have some input field need to be fill in by user, so i plan when user clicked submit button, image and those data will upload to sever together. So i hide the upload button from <q-uploader> and i need upload the image by using that submit button, how to i trigger the <q-uploader> upload event when I click that submit button? Thank in advance!



  • Quite simple:

    <q-uploader 
              :url="upload"
              :labels = "{add:'Selecionar arquivo',remove:'Remover',upload:'Enviar',failed:'ERRO',uploading:'Enviando'}"      
              :additionalFields = "[
                {'name':'id_cliente','value':this.id_cliente},
                {'name':'id_usuario','value':this.id_usuario},
                {'name':'url','value':this.url},
                {'name':'token','value':this.token},
                {'name':'categoria','value':this.form.categoria},
                {'name':'titulo','value':this.form.titulo},
                {'name':'email','value':this.form.email},
                {'name':'telefone','value':this.form.telefone},
                {'name':'comentario','value':this.form.comentario},
              ]"
              :hide-upload-button = "true"
              @finish = "upload_ok"
              @fail   = "upload_erro"           
              buttonClass="bg-green-7 radius04 text-white"
              ref="uploader">         
    </q-uploader>
    

    then after some validation you call

    this.$refs.uploader.upload();
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.