Angular + Spring File Upload Example

Angular + Spring File Upload Example with examples, spring aop tutorial, spring dependency injection, spring mvc tutorial, spring jdbctemplate, spring hibernate, spring data jpa, spring remoting, spring mvs, multiple view page, model interface, form tag library, text field, form check box, applications, crud example, file upload example, mvc tiles, drop-down list, radio button etc.

<< Back to ANGULAR

next → ← prev

Spring Angular File Upload Application

In this section, we are going to create a File Upload web application. This application includes a registration form. In this integration, we are using Spring to handle the backend part and Angular to handle the frontend part.

Working of Application

Once we deployed our application on the server, a registration page generates.
A user can fill the required information and upload the image.
Remember, the image size must not exceed 1 MB.

Tools to be used

Use any IDE to develop the Spring and Hibernate project. It may be MyEclipse/Eclipse/Netbeans. Here, we are using Eclipse.
MySQL for the database.
Use any IDE to develop the Angular project. It may be Visual Studio Code/Sublime. Here, we are using Visual Studio Code.
Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Technologies we used

Here, we use the following technologies:

Spring 5
Hibernate 5
Angular 6
MYSQL

Create Database

Let's create a database fileuploadexample. There is no need to create a table as Hibernate automatically created it.

Spring Module

Let's see the directory structure of Spring we need to follow:

To develop a file upload application, follow the below steps: -

Add dependencies to pom.xml file.

pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.TheDeveloperBlog</groupId>
  <artifactId>FileUploadExample</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>FileUploadExample Maven Webapp</name>
  <url>http://maven.apache.org</url>
  
  <properties>
		<springframework.version>5.0.6.RELEASE</springframework.version>
		<hibernate.version>5.2.16.Final</hibernate.version>
		<mysql.connector.version>5.1.45</mysql.connector.version>
		<c3po.version>0.9.5.2</c3po.version>

		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
	</properties>
	
	
  <dependencies>
  
   <!-- Spring -->
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-webmvc</artifactId>
		<version>${springframework.version}</version>
	</dependency>

	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-tx</artifactId>
		<version>${springframework.version}</version>
	</dependency>
		
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring-orm</artifactId>
		<version>${springframework.version}</version>
	</dependency>

	<!-- Add Jackson for JSON converters -->
	<dependency>
		<groupId>com.fasterxml.jackson.core</groupId>
		<artifactId>jackson-databind</artifactId>
		<version>2.9.5</version>
	</dependency>

	<!-- Hibernate -->
	<dependency>
		<groupId>org.hibernate</groupId>
		<artifactId>hibernate-core</artifactId>
		<version>${hibernate.version}</version>
	</dependency>

	<!-- MySQL -->
	<dependency>
		<groupId>mysql</groupId>
		<artifactId>mysql-connector-java</artifactId>
		<version>${mysql.connector.version}</version>
	</dependency>

	<!-- C3PO -->
	<dependency>
		<groupId>com.mchange</groupId>
		<artifactId>c3p0</artifactId>
		<version>${c3po.version}</version>
	</dependency>

	<!-- Servlet+JSP+JSTL -->
	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>javax.servlet-api</artifactId>
		<version>3.1.0</version>
	</dependency>

	<dependency>
		<groupId>javax.servlet.jsp</groupId>
		<artifactId>javax.servlet.jsp-api</artifactId>
		<version>2.3.1</version>
	</dependency>

	<dependency>
		<groupId>javax.servlet</groupId>
		<artifactId>jstl</artifactId>
		<version>1.2</version>
	</dependency>


	<!-- to compensate for java 9 not including jaxb -->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-api</artifactId>
		<version>2.3.0</version>
	</dependency>
 	
 	<!--  JUnit dependency -->
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>3.8.1</version>
        <scope>test</scope>
    </dependency>
    
         <!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
	<dependency>
	    <groupId>commons-fileupload</groupId>
	    <artifactId>commons-fileupload</artifactId>
	    <version>1.3</version>
	</dependency>
	
	<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2 -->
	<dependency>
	    <groupId>org.apache.commons</groupId>
	    <artifactId>commons-dbcp2</artifactId>
	    <version>2.0</version>
	</dependency> 
    
    
    
  </dependencies>
  <build>
    <finalName>FileUploadExample</finalName>
  </build>
</project>

Create the configuration classes
Instead of XML, we perform annotation-based configuration. So, we create two classes and specify the required configuration in it.

DemoAppConfig.java

package com.TheDeveloperBlog.FileUploadExample.config;

import java.beans.PropertyVetoException;
import java.io.IOException;
import java.util.Properties;
import javax.sql.DataSource;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.orm.hibernate5.HibernateTransactionManager;
import org.springframework.orm.hibernate5.LocalSessionFactoryBean;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import com.mchange.v2.c3p0.ComboPooledDataSource;

@Configuration
@EnableWebMvc
@EnableTransactionManagement
@ComponentScan("com.TheDeveloperBlog.FileUploadExample")
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:application.properties" })
public class DemoAppConfig implements WebMvcConfigurer {
	
	@Autowired
	private Environment env;
	
	@Bean
	public DataSource myDataSource() {
		
		// create connection pool
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();

		// set the jdbc driver
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			throw new RuntimeException(exc);
		}
		
		// set database connection props
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		
		// set connection pool props
		myDataSource.setInitialPoolSize(getIntProperty("connection.pool.initialPoolSize"));
		myDataSource.setMinPoolSize(getIntProperty("connection.pool.minPoolSize"));
		myDataSource.setMaxPoolSize(getIntProperty("connection.pool.maxPoolSize"));		
		myDataSource.setMaxIdleTime(getIntProperty("connection.pool.maxIdleTime"));

		return myDataSource;
	}
	
	private Properties getHibernateProperties() {

		// set hibernate properties
		Properties props = new Properties();
		props.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect"));
		props.setProperty("hibernate.show_sql", env.getProperty("hibernate.show_sql"));
		props.setProperty("hibernate.format_sql", env.getProperty("hibernate.format_sql"));
		props.setProperty("hibernate.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl"));
		return props;				
	}

	
	// need a helper method 
	// read environment property and convert to int
	
	private int getIntProperty(String propName) {
		
		String propVal = env.getProperty(propName);
		
		// now convert to int
		int intPropVal = Integer.parseInt(propVal);
		return intPropVal;
	}	
	
	@Bean
	public LocalSessionFactoryBean sessionFactory(){
		
		// create session factorys
		LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
		
		// set the properties
		sessionFactory.setDataSource(myDataSource());
		sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
		sessionFactory.setHibernateProperties(getHibernateProperties());
		
		return sessionFactory;
	}
	
	@Bean
	@Autowired
	public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
		
		// setup transaction manager based on session factory
		HibernateTransactionManager txManager = new HibernateTransactionManager();
		txManager.setSessionFactory(sessionFactory);

		return txManager;
	}	
	
	@Bean(name="multipartResolver")
    public CommonsMultipartResolver getResolver() throws IOException{
        CommonsMultipartResolver resolver = new CommonsMultipartResolver();
         
        //Set the maximum allowed size (in bytes) for each individual file.
       // resolver.setMaxUploadSize(5242880);//5MB
        
        resolver.setMaxUploadSize(524288);//0.5MB
        
        //You may also set other available properties.  
        return resolver;
    }
	
}

MySpringMvcDispatcherServletInitializer.java

package com.TheDeveloperBlog.FileUploadExample.config;

import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {

	@Override
	protected Class<?>[] getRootConfigClasses() {
		// TODO Auto-generated method stub
		return null;
	}

	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}

	@Override
	protected String[] getServletMappings() {
		return new String[] { "/" };
	}

}

Create the entity class
Here, we are creating an Entity/POJO (Plain Old Java Object) class.

UserDetail.java

package com.TheDeveloperBlog.FileUploadExample.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name="user_detail")
public class UserDetail {
	
	@Id
	@GeneratedValue(strategy=GenerationType.AUTO)
	@Column(name="user_id")
	private int userId;
	
	@Column(name="email_id")
	public String emailId;
	
	@Column(name="name")
	public String name;
	
	@Column(name="profile_image")
	public String profileImage;
	
	public UserDetail() { }

	public UserDetail(int userId, String emailId, String name, String profileImage) {
		super();
		this.userId = userId;
		this.emailId = emailId;
		this.name = name;
		this.profileImage = profileImage;
	}

	public int getUserId() {
		return userId;
	}

	public void setUserId(int userId) {
		this.userId = userId;
	}

	public String getEmailId() {
		return emailId;
	}

	public void setEmailId(String emailId) {
		this.emailId = emailId;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getProfileImage() {
		return profileImage;
	}

	public void setProfileImage(String profileImage) {
		this.profileImage = profileImage;
	}

	@Override
	public String toString() {
		return "UserDetail [userId=" + userId + ", emailId=" + emailId + ", name=" + name + ", profileImage="
				+ profileImage + "]";
	}

	
}

Create the DAO interface
Here, we are creating a DAO interface to perform database related operations.

UserDAO.java

package com.TheDeveloperBlog.FileUploadExample.DAO.interfaces;

import com.TheDeveloperBlog.FileUploadExample.entity.UserDetail;

public interface UserDAO {
	
	public int saveUser(UserDetail userDetail);
	
	public UserDetail getUserDetail(int userId);
	
	public int updateProfileImage(String profileImage , int userID);
	

}

Create the DAO interface implementation class

UserDAOImpl.java

package com.TheDeveloperBlog.FileUploadExample.DAO.implementation;

import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.query.Query;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.TheDeveloperBlog.FileUploadExample.DAO.interfaces.UserDAO;
import com.TheDeveloperBlog.FileUploadExample.entity.UserDetail;

@Repository("userDAO")
public class UserDAOImpl implements UserDAO {

	@Autowired
	SessionFactory sessionFactory;
	
	public int saveUser(UserDetail userDetail) {
		
		Session session = null;
		try
		{
			session = sessionFactory.getCurrentSession();
			int status = (Integer) session.save(userDetail);
			return status;
		}
		catch(Exception exception)
		{
			System.out.println("Exception in saving data into the database" + exception);
			return 0;
		}
		finally
		{
			session.flush();
		}
	}

	public UserDetail getUserDetail(int userId) {
		Session session = null;
		try
		{
			session = sessionFactory.getCurrentSession();
			UserDetail userDetail = session.get(UserDetail.class, userId);
			return userDetail;
		}
		catch(Exception exception)
		{
			System.out.println("Exception in saving data into the database " + exception);
			return null;
		}
		finally
		{
			session.flush();
		}
	}

	public int updateProfileImage(String profileImage, int userID) {
		Session session= sessionFactory.getCurrentSession();
		int result;
		
		try
		{
			Query<UserDetail> query = session.createQuery("update UserDetail set profileImage = :profileImage where userId=:userID ");
			query.setParameter("profileImage", profileImage);
			query.setParameter("userID", userID);
			result = query.executeUpdate();
			if(result > 0)
			{
				return result;
			}
			else return -5;
		}
		catch(Exception exception)
		{
			System.out.println("Error while updating profileImage from DAO :: " + exception.getMessage());
			return -5;
		}
		finally
		{
			session.flush();
		}
		
		
	}
}

Create the service layer interface

Here, we are creating a service layer interface that acts as a bridge between DAO and Entity classes.

UserService.java

package com.TheDeveloperBlog.FileUploadExample.service.interfaces;

import javax.servlet.http.HttpSession;

import org.springframework.web.multipart.MultipartFile;

import com.TheDeveloperBlog.FileUploadExample.entity.UserDetail;

public interface UserService {
	
	public int saveUser(UserDetail userDetail);
	
	public UserDetail getUserDetail(int userId);
	
	public int store(MultipartFile file, int userID ,  HttpSession session);
	
	

}

Create the service layer implementation class

UserServiceImpl.java

package com.TheDeveloperBlog.FileUploadExample.service.implementation;

import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import javax.servlet.http.HttpSession;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import com.TheDeveloperBlog.FileUploadExample.DAO.interfaces.UserDAO;
import com.TheDeveloperBlog.FileUploadExample.entity.UserDetail;
import com.TheDeveloperBlog.FileUploadExample.service.interfaces.UserService;

@Service("userService")
public class UserServiceImpl implements UserService {

	@Autowired
	private UserDAO userDAO;
	
	@Transactional
	public int saveUser(UserDetail userDetail) {
		return userDAO.saveUser(userDetail);
	}
	
	@Transactional
	public UserDetail getUserDetail(int userId) {
		return userDAO.getUserDetail(userId);
	}

	@Transactional
	public int store(MultipartFile file, int userID, HttpSession session) {
		
		Path rootLocation = Paths.get(session.getServletContext().getRealPath("/resources/images"));
		
		System.out.println("rootLocation  ==  " + rootLocation);
		
		UserDetail userDetail = this.getUserDetail(userID);
		 
		 String nameExtension[] = file.getContentType().split("/");

		 String profileImage = userID + "." + nameExtension[1];
		 	
		 System.out.println("ProfileImage  :: " + profileImage);
		 
		 if(userDetail.getUserId() > 0 )
		 {
			 
			if(userDetail.getProfileImage() == null || userDetail.getProfileImage() == " " || userDetail.getProfileImage() == "" )
			{
				try
				{
					Files.copy(file.getInputStream(),rootLocation.resolve(profileImage));
					int result = userDAO.updateProfileImage(profileImage, userID);	
					if(result > 0)
						return result;
					else
						return -5;
				}
				catch(Exception exception)
				{
					System.out.println("error while uploading image catch:: " + exception.getMessage());
					return -5;
				}
			}
			else
			{
				try
				{
					//Files.delete(rootLocation.resolve(profileImage));
					
					Files.delete(rootLocation.resolve(userDetail.getProfileImage()));
					
					Files.copy(file.getInputStream(),rootLocation.resolve(profileImage));
					int result = userDAO.updateProfileImage(profileImage, userID);	
					if(result > 0)
						return result;
					else
						return -5;
				}
				catch(Exception exception)
				{
					System.out.println("Error while uploading image when image is already Exists :: " + exception.getMessage());
					return -5;
				}
			}
		}
		else {
			return 0;
		}
	}

	

}

Create the controller class

UserController.java

package com.TheDeveloperBlog.FileUploadExample.restController;

import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.TheDeveloperBlog.FileUploadExample.entity.UserDetail;
import com.TheDeveloperBlog.FileUploadExample.service.interfaces.UserService;

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "*")
public class UserController {
	
	@Autowired
	private UserService userService;
	
	@PostMapping("/saveUser")
	public int saveUser(@RequestBody UserDetail userDetail)
	{
		return userService.saveUser(userDetail);
	}
	
	@PostMapping("/uploadImage/{userId}")
	public int handleFileUpload(@PathVariable int userId , @RequestParam("file") MultipartFile file, HttpSession session) {
		return userService.store(file, userId, session);		
	}
	
}

Create the properties file
Here, we are creating properties file inside the src/main/resources in the project.

application.properties

spring.http.multipart.max-file-size=1024KB
spring.http.multipart.max-request-size=1024KB

persistence-mysql.properties

#
# JDBC connection properties
#
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/fileuploadexample?useSSL=false
jdbc.user=root
jdbc.password=

#
# Connection pool properties
#
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000

#
# Hibernate properties
#

hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql=true
hibernate.format_sql=true
hibernate.hbm2ddl=update
hibernate.packagesToScan=com.TheDeveloperBlog.FileUploadExample.entity

Angular Module

Let's see the directory structure of Angular we need to follow:

Create an Angular project

Let's create an Angular project by using the following command:

ng new FileUploadExample

Here, FileUploadExample is the name of the project.

Install Bootstrap CSS framework

Use the following command to install bootstrap in the project.

npm install bootstrap@3.3.7 --save

Now, include the following code in the style.css file.

@import "~bootstrap/dist/css/bootstrap.css";

Generate Component
Open the project in visual studio and then use the following command to generate Angular component:
ng g c Register

Let's also create a service class by using the following command: -

ng g s services/UserDetail

Edit the app.module.ts file
- Import ReactiveFormsModule - Here, we are importing the ReactiveFormsModule for reactive forms and specifying it in imports array.
- Import HttpModule - Here, we are importing the HttpModule for server requests and specifying it in the imports array.
- Register Service class - Here, we are mentioning the service class in the provider's array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// import ReactiveFormsModule for reactive form
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { RegisterComponent } from './register/register.component';

import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Edit the app.component.html file

<app-register></app-register>

Create the UserDetail.ts class

Let's create a class by using the following command: -

ng g class classes/UserDetail

Now, specify the required fields within the UserDetail class.

export class UserDetail {

    emailId : string;
    name : string;
    profileImage : string;

}

The purpose of this class is to map the specified fields with the fields of the Spring entity class.

Edit the user-detail.service.ts file

import { Injectable } from '@angular/core';
import { UserDetail } from '../classes/user-detail';
import { Observable } from 'rxjs';
import { Http, RequestOptions , Headers } from '@angular/http';

@Injectable({
  providedIn: 'root'
})
export class UserDetailService {

  // Base URL
  private  baseUrl = "http://localhost:8080/FileUploadExample/api/";

  constructor(private http: Http) { }

  saveData(userDetail : UserDetail) : Observable
  {
      let url = this.baseUrl + "saveUser";
      return this.http.post(url,userDetail);
  }

  uploadFile( file: File , id : number ) : Observable
  {
    let url = this.baseUrl + "uploadImage/" + id ;

    const formdata: FormData = new FormData();
  
    formdata.append('file', file);
 
    return this.http.post(url , formdata);
  }
}

Edit the register.component.ts file

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UserDetail } from '../classes/user-detail';
import { UserDetailService } from '../services/user-detail.service';
import { jsonpFactory } from '@angular/http/src/http_module';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {

  selectedFiles: FileList;
  currentFileUpload: File;

  private userDetail = new UserDetail(); 
  
  constructor(private userDetailService : UserDetailService) { }

  ngOnInit() {
  }

  selectFile(event) {
    const file = event.target.files.item(0);
 
    if (file.type.match('image.*')) {
      var size = event.target.files[0].size;
      if(size > 1000000)
      {
          alert("size must not exceeds 1 MB");
          this.form.get('profileImage').setValue("");
      }
      else
      {
        this.selectedFiles = event.target.files;
      }
    } else {
      alert('invalid format!');
    }

  }   

  // create the form object.
  form = new FormGroup({
    fullName : new FormControl('' , Validators.required),
    email : new FormControl('' , Validators.required),
    profileImage : new FormControl()
  });

  AdminForm(AdminInformation)
  {
    this.userDetail.name = this.FullName.value;
    this.userDetail.emailId = this.Email.value;

    console.log(this.userDetail);

    this.userDetailService.saveData(this.userDetail).subscribe(
      response => {
          let result = response.json();
          console.log(result);
          if(result > 0 )
          {
            if(this.selectedFiles != null)
            {
              this.currentFileUpload = this.selectedFiles.item(0);
              console.log(this.currentFileUpload);

              this.userDetailService.uploadFile(this.currentFileUpload , result).subscribe(
                  res => {

                    let re = res.json();
                     if(re > 0)
                     {
                        alert("file upload successfully ");
                        this.form.get('fullName').setValue("");
                        this.form.get('email').setValue("");
                        this.form.get('profileImage').setValue("");
                     }
                     else{
                        alert("error while uploading fie details");
                     }
                  },
                  err => {
                      alert("error while uploading fie details");
                  }
              );

            }
          }
      },
      error => {
        console.log("error while saving data in the DB");
      }
    );

  }

    get FullName(){
      return this.form.get('fullName');
    }

    get Email(){
        return this.form.get('email');
    } 



     
}

Edit the register.component.html file

<h2>Registration form</h2>

<form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)">

  <div class="row">
    <div class=" col-md-offset-1 col-md-4">
        <label for="fullName"> Name </label>
        <input formControlName="fullName" class="form-control" type="text"> 
    </div>
  </div>

  <div class="row">
    <div class=" col-md-offset-1 col-md-4">
        <label for="email"> Email </label>
        <input formControlName="email" class="form-control" type="text"> 
    </div>
  </div>

  
  <div class="row">
    <div class=" col-md-offset-1 col-md-4">
        
      <label for="profileImage">Upload Image</label>
        <input formControlName="profileImage" class="form-control" type="file" (change)="selectFile($event)"> 
    </div>
  </div>

  <div class="row" style="margin-top: 40px;">
    <div class="col-md-offset-1 col-md-4">
        <button class="btn btn-md btn-primary btn-style"  >Save</button>
    </div>
  </div>

</form>

Once completed, provide the URL http://localhost:4200/ at the web browser. The following web page occurs:

Now, we can fill the required information and choose the file need to be uploaded.

Download this example

Next TopicLogin & Logout Example

← prev next →

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com