FileUpload - custom upload when click on save form button

UI Components for Vue
Post Reply
aristos
Posts: 1
Joined: 26 Apr 2015, 23:46

25 May 2020, 02:17

Hello !
I'm Aristide and I'm new using PrimeVue.

I faced to a problem, I want to upload a picture but dont know how to proced with FileUpload component.

I use firestorage and firestore.

I need a custom upload:
1. Form fields are filed (= image also selected)
2. Click save button
  • Upload file to Firestorage

  • Get back the image url

  • Save user form information into Firestore
Using standard HTML, Bootstrap and VueJS, I did it like that:

Code: Select all


<intput type="file" name="userpic" @change="previewPec" class="form-input" id="photo" />

export default()
{
	data(){
		return{
		     user{
		        photo: null
		     }
		}
	),
	method: {
		previewPec(evt){

               	//console.log('uploading');
                	let file = evt.target.files[0];

               	 //console.log(file);
                	let reader = new FileReader();

                	// 2111775 = 2 MB en base64
                	if(file['size'] < 2111775){
                    		reader.onloadend = (file) => {
                        	//console.log('RESULT : ', reader.result);
                        	this.user.photo = reader.result;
                    		}
                    		reader.readAsDataURL(file);
               	 }else {
                   		swal({
                        	type: 'error',
                        	'title': 'Oops...',
                        	'text': 'You are uploading a large file (limit size is less than 2MB)'
                    		})
                	}
             	}
	}
}


How to write custom upload using PrimeVue FileUpload component like above?
Can I mixe standard HTML component with primevue component ?

Thank you.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

04 Jul 2020, 10:15

We'll add a custom upload hook in 2.0.0 final that you may use to customize the upload behavior instead of the default one. PrimeNG and PrimeReact already has it so next week's 2.0 will bring it as well to Vue.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

04 Jul 2020, 12:05

With 2.0.0-Final;

Uploading implementation can be overridden by enabling customMode property and defining a custom upload handler event.

Code: Select all

<FileUpload name="demo[]" :customUpload="true" @uploader="myUploader" />

myUploader(event) {
    //event.files == files to upload
}

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests