Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

152
Views
file name [object Object] on angular file upload

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>

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>

see stackblitz live example here

about 4 years ago · Juan Pablo Isaza Report

0

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>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!