when I try to attach a file, the file name does not come out and comes out "[object Object] would anyone know how to help me? I can't get any names to appear
export class ReclamiRaccoltaComponent implements OnInit {
files: any[] = []
onChange(event) {
for (let file of event.target.files) {
this.files.push({
name: file.name,
type: file.type,
size: file.size
});
}
}
<form method="post" action="" enctype="multipart/form-data">
<input type="file" onChange="console.log(event.target.files[0].name)" #fileInput (change)="onChange($event)" name="upload1" id="upload1" class="upload" multiple="multiple" />
<label for="upload1">
<svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-upload"></use></svg>
<span>Upload</span>
</label>
<ul class="upload-file-list" *ngFor="let file of files">
<li class="upload-file success">
<svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-file"></use></svg>
<p>
<span class="sr-only">File caricato:</span>
{{file}} <span class="upload-file-weight">KB</span>
</p>
<button disabled>
<span class="sr-only">Caricamento ultimato</span>
<svg class="icon" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-check"></use></svg>
</button>
</li>
</ul>
</form>
<button [disabled]="!form.valid" onclick="notificationShow('notificationIcnTxt', 6000)" type="submit" class="btn mb-5 btn-primary" style="width: 120px; height: 60px;">INVIA</button>
You can use filereader() function in angular to read input file.
// This is typescript code only runs with angular
// This is typescript code only runs with angular
// This is typescript code only runs with angular
fileName: string;
fileSize: number;
fileType: string;
loadFile(event): void {
const inputValue = event.target;
const file: File = inputValue.files[0];
const myReader: FileReader = new FileReader();
myReader.readAsDataURL(file);
myReader.onloadend = (e) => {
console.log(e);
this.fileName = file.name;
this.fileSize = file.size;
this.fileType = file.type
myReader.result as string; // this is base64 string to upload or save in DB
};
}
<input type="file" id="file" class="input" (change)="loadFile($event)" />
<p>Name: {{fileName}}</p>
<p>Size: {{fileSize}}</p>
<p>Type: {{fileType}}</p>
You get object object because file is an object. If you want the name you need to ask {{ file.name }} type {{ file.type }} size {{ file.size }}
<form method="post" action="" enctype="multipart/form-data">
<input type="file" onChange="console.log(event.target.files[0].name)" #fileInput (change)="onChange($event)" name="upload1" id="upload1" class="upload" multiple="multiple" />
<label for="upload1">
<svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-upload"></use></svg>
<span>Upload</span>
</label>
<ul class="upload-file-list" *ngFor="let file of files">
<li class="upload-file success">
<svg class="icon icon-sm" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-file"></use></svg>
<p>
<span class="sr-only">File caricato:</span>
{{file.name}} {{file.type}} {{file.size}} <span class="upload-file-weight">KB</span>
</p>
<button disabled>
<span class="sr-only">Caricamento ultimato</span>
<svg class="icon" aria-hidden="true"><use href="assets/bootstrap-italia/svg/sprite.svg#it-check"></use></svg>
</button>
</li>
</ul>
</form>
<button [disabled]="!form.valid" onclick="notificationShow('notificationIcnTxt', 6000)" type="submit" class="btn mb-5 btn-primary" style="width: 120px; height: 60px;">INVIA</button>