Same file is submitting in the database with different name using Angular

Question

I have created an API in Django for submitting documents which works fine. I want to connect it to AngularJS front end and send documents from the front end to the API, when I am trying to do so same file is submitting in the database with different names although I want different files with respect to their original name. Don't know what is wrong here.

my .ts files looks like:

import { Component, OnInit } from '@angular/core';
import { UsersService } from 'src/app/services/users.service';

@Component({
  selector: 'higherstudiesdocuments',
  templateUrl: './higherstudiesdocuments.component.html',
  styleUrls: ['./higherstudiesdocuments.component.scss'],
  providers: [UsersService]
})
export class HigherstudiesdocumentsComponent implements OnInit {

  selectedFile: File = null;
  constructor(private userService: UsersService) { }

  ngOnInit() {

  }
  onFileSelected(event) {
    this.selectedFile = <File>event.target.files[0];
  }
  onSubmit() {
    const formData = new FormData();
    formData.append('admission_letter', this.selectedFile, this.selectedFile.name);
    formData.append('award_letter', this.selectedFile, this.selectedFile.name);
    formData.append('attested_degree', this.selectedFile, this.selectedFile.name);
    formData.append('cv', this.selectedFile, this.selectedFile.name);
    formData.append('travel_agent', this.selectedFile, this.selectedFile.name);
    formData.append('surety_bond', this.selectedFile, this.selectedFile.name);
    formData.append('attested_surety_bond', this.selectedFile, this.selectedFile.name);
    formData.append('guarantee_cnic', this.selectedFile, this.selectedFile.name);
    formData.append('study_leave', this.selectedFile, this.selectedFile.name);
    formData.append('objection_certificate', this.selectedFile, this.selectedFile.name);
    formData.append('hod_form', this.selectedFile, this.selectedFile.name);
    formData.append('rector_form', this.selectedFile, this.selectedFile.name);
    this.userService.higherStudiesphdDocuments(formData).subscribe(
      response => {
        console.log(response);
      }
    );
  }
  logout() {
    return this.userService.logout();
  }

}

and html file is as follows:

<navbar></navbar>
      <div class="form-group row" id="myclass">
          <a (click)="logout()">Log Out</a>
      </div>
      <div class="container-fluid px-xl-5">
          <section class="py-5">
            <div class="row">
              <div class="col-lg-12 mb-5">

                <!--  First Box -->
                <div class="card">
                  <div class="card-header">
                    <h3 class="h6 text-uppercase mb-0">To proceed for Ph.D.</h3>
                  </div>
                  <div class="card-body">
                    <form class="form-horizontal">
                      <div class="form-group row">
                        <label class="col-md-6 form-control-label">Unconditional admission letter from Foreign University offering you admission in Ph.D.</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="admissionletter" type="file" class="form-control" required>
                        </div>
                      </div>
                  <div class="line"></div>                      
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Copy of your award letter for scholarship or financial assistance or affidavit about self-finance.</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="presentationmode" type="file" class="form-control" required>
                        </div>
                      </div>
                  <div class="line"></div>                     
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Copy of your highest Degree duly attested by HEC.</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="evidence" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div> 
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Brief CV (2-3 pages).</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="evidencepublish" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div> 
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Quotation from the travel agent indicating the shortest route.</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="eventbrochure" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div>  
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Proof of the Surety bond of Rs.100/- by two guarantors to be purchased in the name of guarantor(s).</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="fulltextpaper" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div> 
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Surety Bond attested by the Oath Commissioner and countersigned by First Class Magistrate.</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="co-aurthornoc" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div> 
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Copy of CNIC of Guarantee</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="agentquotation" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div> 
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Copy of study leave from your employer (required from applicant employed in any organization).</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="study_leave" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div> 
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Copy of No Objection Certificate (NOC) from your employer (required from applicants employed in any organization).</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="cv" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div> 
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Application form duly signed and stamped by the Head of Department in Section No. 6 (required from applicant employed in any organization).</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="cv" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div> 
                  <div class="form-group row">
                        <label class="col-md-6 form-control-label">Application form duly signed and stamped by the Rector/Vice-Chancellor of your university in Section No. 7 (required from applicant employed in any organization).</label>
                        <div class="col-md-3">
                          <input class="validate" (change)="onFileSelected($event)" name="cv" type="file" class="form-control" required>
                        </div>
                      </div>  
                  <div class="line"></div>                                                                                                                                                                                                                                                   
                    </form>
                  </div>
                </div>
                <div class="line"></div>



                <div class="form-group row">
                    <div class="col-md-12" style="text-align: center;">
                      <button (click)="onSubmit()" type="submit" class="btn btn-primary shadow">SUBMIT AND APPLY</button>
                    </div>
                </div>
              </div>
            </div>
          </section>
      </div>

Massimiliano Sartoretto · Accepted Answer · 2019-04-07 17:15:23Z

You are using only one variable (this.selectedFile) to keep every document, while you need one variable for each document.

Something like this:

@Component({
  selector: 'higherstudiesdocuments',
  templateUrl: './higherstudiesdocuments.component.html',
  styleUrls: ['./higherstudiesdocuments.component.scss'],
  providers: [UsersService]
})
export class HigherstudiesdocumentsComponent implements OnInit {
  selectedFiles: { [key: string]: File } = {};
  constructor(private userService: UsersService) {}

  ngOnInit() {}

  onFileSelected(event, documentKey: string) {
    const file = <File>event.target.files[0];
    this.selectedFiles[documentKey] = file;
  }

  onSubmit() {
    const formData = new FormData();

    Object.keys(this.selectedFiles).forEach(documentKey => {
      let file = this.selectedFiles[documentKey];
      formData.append(documentKey, file, file.name);
    });

    this.userService.higherStudiesphdDocuments(formData).subscribe(response => {
      console.log(response);
    });
  }

  logout() {
    return this.userService.logout();
  }
}

and for each input file pass along the documentKey to the handler, like this:

<div class="form-group row">
  <label class="col-md-6 form-control-label">Unconditional admission letter from Foreign University offering you admission in Ph.D.</label>
  <div class="col-md-3">
    <input class="validate" (change)="onFileSelected($event, 'admissionletter')" name="admissionletter" type="file" class="form-control" required>
  </div>
</div>

PS: This is Angular, not AngularJS

Collectives™ on Stack Overflow

Same file is submitting in the database with different name using Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related