javascript - How to detect if a file input is populated in Angular? -
what i'm using
- angular
- firebase
what i'm trying achieve
when uploading project details want know whether image has been selected or not.
if not, call different method service , assign default image
if so, use image
questions
i may approaching wrong, way thinking of performing logic see if user has selected 'select image' (input of type file). if image has been selected, 'if (file)' seems register fine, if image hasn't been selected errors out following:
projectsaddcomponent.html:71 error typeerror: cannot read property 'item' of undefined
- how can detect if user has chosen image upload data?
project add html
<div class="vs__upload__container"> <input type="file" id="file-1" class="inputfile inputfile-1" (change)="detectfiles($event)" /> <label class="vs__upload__button" for="file-1"> <i class="fa fa-upload" aria-hidden="true"></i> <span>choose file…</span> </label> </div> <div class="vs__details__actions"> <button class="vs__button" (click)="addnewproject(newtitle.value, newreference.value, newdate.value); newtitle.value=''; newreference.value=''; newdate.value='';"> add </button> </div>
project add component ts
please refer 'addnewproject' function if statement
import { component, oninit } '@angular/core'; import { projectsaddservice } './projects-add.service'; import { upload } './upload'; import * _ "lodash"; @component({ selector: 'upload-form', templateurl: './projects-add.component.html', styleurls: ['./projects-add.component.css'] }) export class projectsaddcomponent { selectedfiles: filelist; currentupload: upload; constructor(private upsvc: projectsaddservice) { } detectfiles(event) { this.selectedfiles = event.target.files; } uploadsingle() { let file = this.selectedfiles.item(0) this.currentupload = new upload(file); } addnewproject(title: string, reference: string, date: string) { let file = this.selectedfiles.item(0) this.currentupload = new upload(file); if (file) { console.log('this file = ', file); // call method in service include upload file this.upsvc.addnewprojectwithimage(title, reference, date, this.currentupload); } else { console.log('no file'); this.upsvc.addnewprojectwithoutimage(title, reference, date); } } }
you need check if files have been selected. code throwing undefined exception.
addnewproject(title: string, reference: string, date: string) { // check if image file has been selected if(this.selectedfiles && this.selectedfiles.length > 0) { let file = this.selectedfiles.item(0); this.currentupload = new upload(file); console.log('this file = ', file); // call method in service include upload file this.upsvc.addnewprojectwithimage(title, reference, date, this.currentupload); } // otherwise call method default image. else { console.log('no file'); this.upsvc.addnewprojectwithoutimage(title, reference, date); } }
check same condition in uploadsingle
method.
uploadsingle() { if(this.selectedfiles && this.selectedfiles.length > 0) { let file = this.selectedfiles.item(0); this.currentupload = new upload(file); } }
Comments
Post a Comment