How to upload files using Angular 4

Question

How to upload files using Angular 4

Having some trouble trying to upload a file using angular 4, even after closely following a tutorial. I'm not sure where I might be going wrong, so any help in spotting the issue would be greatly appreciated. Here is the code snippet:

import { Component, OnInit } from '@angular/core';
import { ConnectionManagerComponent } from 'src/app/connection-manager/connection-manager.component';
import { ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
import { Validators } from '@angular/forms';

@Component({
  selector: 'app-new-contact-list.component',
  templateUrl: './new-contact-list.component.html',
  styleUrls: ['./new-contact-list.component.css']
})
export class NewContactListComponent implements OnInit {
  @ViewChild(ConnectionManagerComponent) connectionManager:ConnectionManagerComponent;
  form:FormGroup;
  selectedFile: File;

  onFileChanged(event) {
    this.selectedFile = event.target.files[0]
  }

  constructor(private fb: FormBuilder,public router:Router) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      fileName: ['', Validators.required],


  });
  }

  ngOnInit() {
  }
  addContactList()
  {
    const val = this.form.value;
    let contactListName = val.name;
    const fd = new FormData();
    fd.append("name" ,contactListName);
    fd.append('file', this.selectedFile,this.selectedFile.name);
    console.log(fd);
    this.connectionManager.post('/contactGroups', res => {
      console.log(res);
           this.router.navigateByUrl('/newContactList');
       },fd);
  }

}

 <div class="input-group">
   <input style="display: none" id="fileName" 
          formControlName="fileName"
          type="file"
          (change)="onFileChanged($event)"
          #fileInput>
   <button (click)="fileInput.click()">Select File</button>
 </div>

javascript angular typescript events file-upload

Answer 1

Answer №1

It seems that only file selection is occurring in this section. The execution halts at the onFileChanged() function. You can try using the code snippet provided below for the onFileChanged() function. If it does not work as expected, please include a reference for further assistance.

onFileChanged(event) {
this.selectedFile = event.target.files[0];
addContactList();
}

Answer 2

It seems that only file selection is occurring in this section. The execution halts at the onFileChanged() function. You can try using the code snippet provided below for the onFileChanged() function. If it does not work as expected, please include a reference for further assistance.

onFileChanged(event) {
this.selectedFile = event.target.files[0];
addContactList();
}

Answer 3

Answer №2

How to Upload Files in Angular:

Within the app.component.html file, add the following code:

<input #fileUpload type="file" id="fileUpload" style="" (change)="detectFiles($event)" (click)="fileUpload.value = null">

In the app.component.ts file, include the following TypeScript code:

import { Component } from '@angular/core';
import { HttpEvent, HttpEventType } from '@angular/common/http';
import { FileUploadService } from './fileUpload.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private fileUploadService: FileUploadService) {

  }
  detectFiles(event) {
    if (event.target.files.length == 0) {
      console.log("No file selected!");
      return
    }
    let file: File = event.target.files[0];
    console.log("FILE DATA:",file);

    let uploadPath = "/home/upload/";

  this.fileUploadService.uploadFile(uploadPath, file).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Response:
          console.log(event.body);
      }
    });

  }
}

To properly configure file uploads, make changes in the app.module.ts file as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { HttpClientModule } from '@angular/common/http';
import { FileUploadService } from './fileUpload.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ FileUploadService ]
})
export class AppModule { }

Lastly, create a fileUpload.service.ts file and add the following code for handling file upload requests:

import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders, HttpRequest } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class FileUploadService {
  constructor(private http: HttpClient) {

  }

  uploadFile(uploadPath, fileToUpload: File) {
    const _formData = new FormData();
    _formData.append('file', fileToUpload, fileToUpload.name);
    _formData.append('uploadPath', uploadPath);

    const url = `api/v1/uploadFile`;

    const request = new HttpRequest('POST', url, _formData, {reportProgress: true });
    return this.http.request(request);
  }

}

For more information and a working example, visit this link.

Answer 4

How to Upload Files in Angular:

Within the app.component.html file, add the following code:

<input #fileUpload type="file" id="fileUpload" style="" (change)="detectFiles($event)" (click)="fileUpload.value = null">

In the app.component.ts file, include the following TypeScript code:

import { Component } from '@angular/core';
import { HttpEvent, HttpEventType } from '@angular/common/http';
import { FileUploadService } from './fileUpload.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private fileUploadService: FileUploadService) {

  }
  detectFiles(event) {
    if (event.target.files.length == 0) {
      console.log("No file selected!");
      return
    }
    let file: File = event.target.files[0];
    console.log("FILE DATA:",file);

    let uploadPath = "/home/upload/";

  this.fileUploadService.uploadFile(uploadPath, file).subscribe((event: HttpEvent<any>) => {
      switch (event.type) {
        case HttpEventType.Response:
          console.log(event.body);
      }
    });

  }
}

To properly configure file uploads, make changes in the app.module.ts file as follows:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { HttpClientModule } from '@angular/common/http';
import { FileUploadService } from './fileUpload.service';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [ FileUploadService ]
})
export class AppModule { }

Lastly, create a fileUpload.service.ts file and add the following code for handling file upload requests:

import { Inject, Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders, HttpRequest } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class FileUploadService {
  constructor(private http: HttpClient) {

  }

  uploadFile(uploadPath, fileToUpload: File) {
    const _formData = new FormData();
    _formData.append('file', fileToUpload, fileToUpload.name);
    _formData.append('uploadPath', uploadPath);

    const url = `api/v1/uploadFile`;

    const request = new HttpRequest('POST', url, _formData, {reportProgress: true });
    return this.http.request(request);
  }

}

For more information and a working example, visit this link.

How to upload files using Angular 4

Answer №1

Answer №2

Similar questions

Verify if there is a cookie available; then execute the load() function. If the cookie matches, it is necessary to

Presenting a fully equipped GLTF model prior to incorporating it into the environment

Matching HTML tags with Regex while excluding specific ones is possible using a carefully

canvas resolution adjustments

Unexpected type error being thrown by Typescript

Methods for opening ngx-daterangepicker-material outside of a button/icon when there are multiple date range pickers in the same form

Tips for observing the return value of a function in JavaScript

The getelementbyid function can only target and retrieve the information from the first ID within a PHP

Encountering issues with connecting to the MongoDB server through Node.js

Using Typescript to replicate Object.defineProperties

I continue to encounter an error every time I attempt to place an HTML nested div on a separate line

What exactly does the term "new.target" refer to?

Expanding constructor in TypeScript

Deleting the HTML element

Retrieve the HTML tags following the modification of my information in ASP.NET

Deleting a row from a table using TypeScript in Angular

Identifying the Type of Element Based on Its Identifier

Failure to display updated property value

javascript doesn't execute the php script

What could be causing the issue with multiple selection in jQuery?