Angular FormData fails to append and upload files

Question

Angular FormData fails to append and upload files

I am attempting to use FormData in order to upload a file through an HTTP Request. Here is the HTML code:

<ng-template #displayApp>
    <div class="display flex justify-content-center">
        <div >
            <p-fileUpload 
            chooseLabel="Select First File"
            [showUploadButton]="false"
            [showCancelButton]="false"        
            (onSelect)="checkFilesSelected()"
            (onRemove)="checkFilesSelected()"
            #originalFile>
            </p-fileUpload>
        </div>

        <div style="margin: 0 20px;"></div>

        <div >
            <p-fileUpload 
            chooseLabel="Select Second File"
            [showUploadButton]="false"
            [showCancelButton]="false"             
            (onSelect)="checkFilesSelected()"
            (onRemove)="checkFilesSelected()"
            #revisedFile>
            </p-fileUpload>
        </div>
    </div>
    <div style="margin-bottom: 20px;"> </div>
    <div class="display flex justify-content-center">
        <p-button [disabled]="!areFilesSelected" (click)="onUpload()">Compare Files</p-button>
    </div>
</ng-template>

I am choosing two files and attempting to upload both files together with a single call to keep them synchronized.

Here is my component's TS file:

  @ViewChild('firstFile') firstFile!: FileUpload;
  @ViewChild('secondFile') secondFile!: FileUpload;

onUpload() {
    console.log("File upload called",);

    const originalFiles: File = this.originalFile.files[0]
    const revisedFiles: File[] = this.revisedFile.files;
    let formData: FormData = new FormData();

    console.log("First ",originalFiles, originalFiles.name)
    debugger;

    formData.append('First', originalFiles)
    console.log("Form Data ", formData)

    let uploadUrl = new URL('baseURL');

    uploadUrl.searchParams.append('First',"first");
    uploadUrl.searchParams.append('Second',"second");  

    this.http.post(uploadUrl.toString(), formData).subscribe(
      response => {
        console.log('File uploaded successfully:', response);
      },
      error => {
        console.error('Error uploading file:', error);
      }
    );
  }

I have noticed that originalFiles gets populated with file details. However, when I try to append it to formData, it remains empty without throwing any exceptions. The formData appears empty when viewed on the console. Any assistance on this issue would be greatly appreciated.

I attempted to change the data type to File instead of FileUpload, but it did not resolve the issue. Using event.Files[0] appends the file correctly. I am unsure how to merge this event into a single one for file uploads.

angular typescript primeng

Answer 1

Answer №1

When working with form data in Angular, it is crucial to ensure that the enctype header is properly set. Checking the values within the FormData can be done using the

entries method.</p>
<pre><code>onUpload() {
  console.log("Initiating file upload");

  const originalFiles: File = this.originalFile.files[0];
  const revisedFiles: File[] = this.revisedFile.files;
  
  let formData: FormData = new FormData();
  formData.append('First', originalFiles);

  // Logging each entry in the formData
  for (const [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
  }

  let uploadUrl = new URL('baseURL');
  uploadUrl.searchParams.append('First', "first");
  uploadUrl.searchParams.append('Second', "second");

  const headers = new HttpHeaders({ 'enctype': 'multipart/form-data' });

  this.http.post(uploadUrl.toString(), formData, { headers: headers }).subscribe(
    response => {
      console.log('File uploaded successfully:', response);
    },
    error => {
      console.error('Error uploading file:', error);
    }
  );
}

Answer 2

When working with form data in Angular, it is crucial to ensure that the enctype header is properly set. Checking the values within the FormData can be done using the

entries method.</p>
<pre><code>onUpload() {
  console.log("Initiating file upload");

  const originalFiles: File = this.originalFile.files[0];
  const revisedFiles: File[] = this.revisedFile.files;
  
  let formData: FormData = new FormData();
  formData.append('First', originalFiles);

  // Logging each entry in the formData
  for (const [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
  }

  let uploadUrl = new URL('baseURL');
  uploadUrl.searchParams.append('First', "first");
  uploadUrl.searchParams.append('Second', "second");

  const headers = new HttpHeaders({ 'enctype': 'multipart/form-data' });

  this.http.post(uploadUrl.toString(), formData, { headers: headers }).subscribe(
    response => {
      console.log('File uploaded successfully:', response);
    },
    error => {
      console.error('Error uploading file:', error);
    }
  );
}

Angular FormData fails to append and upload files

Answer №1

Similar questions

Unraveling the Mystery of @Input and @Output Aliases in Angular 2

Is there a way to ensure in TypeScript that a generic type includes a property that implements a particular method?

Can someone confirm if I am importing this png file correctly? I am encountering an error with Vite, here is my code

Defining a structure for an entity in which its attributes distinguish between different data types and an array combination

Can you explain the significance of the '#' symbol within the input tag?

Initializing various objects on the same interface type array in one line

Building Individual Elements in Angular 2

When is the best time in the redux flow to utilize methods for displaying notifications, such as toasts?

Connecting Angularfire2 with Firestore for advanced querying

Angular2 - Incorporating a New Attribute

Despite subscribing, the Ngxs @Select decorator is still returning undefined values

Best practices for organizing API Services using TypeScript and Next.js Server Actions

TypeORM's one-to-many relationship alters the primary entity once the relationship has been established

Headers cannot be modified after they have been sent to the client in Node.js and Angular

Navigating with Angular's router occurs before the guard is fully completed

Experimenting with throws using Jest

When in development mode, opt for the unminified version of the library in Web

What is the best way to execute a function while utilizing its default options?

Managing state on the login page functions properly, although there is a minor inconvenience of having to click the login button twice after entering the username and password

"Exploring the dynamic duo: Algolia integration with Angular