Angular 6 Image Upload with Validation Example

Angular 6 Image Upload with Validation Example

Today, We want to share with you Angular 6 Image Upload with Validation Example.In this post we will show you Angular 6 Multiple File Upload with Validation Example, hear for file extension validation in Angular 6 we will give you demo and example for implement.In this post, we will learn about Image Upload with Validation in Angular 6 with an example.

Angular 6 Image Upload with Validation Example

There are the Following The simple About Angular 6 Image Upload with Validation Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Angular 6 file upload with Validation, so the some major files and Directory structures for this example is following below.

  • index.html

Angular 6 Example

Angular Latest My Previous Post With Source code Read more…..

  1. Angular 6 Folder Project Structure
  2. Angular 6 CLI Installation
  3. Angular 6 Module File
  4. Angular 6 Components
  5. Angular 6 Services
  6. Angular 6 Routing
  7. Angular 6 CSS
  8. Angular 6 Class Binding
  9. Angular 6 Animation
  10. Angular 6 Templating
  11. Angular 6 HTTP Client
  vuejs Smooth Scroll to Top

Image Upload with Validation in Angular 6

member-form/member-form.component.ts

import { Component } from '@angular/core';

import { Member }    from '../member';

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

  qualifications = ['Jaydeep Gondaliya', 'Krunal sisodariya',
            'Ankit Shah', 'Jigar Shah'];

  model = new Member(18, 'Dr IQ', this.qualifications[0], 'Chuck Overstreet');

  submitted = false;

  onSubmit() { this.submitted = true; }

  newMember() {
    this.model = new Member(42, '', '');
  }
}

member-form/member-form.component.html

Simple Member Form Angular 6 Image Upload with Validation Example

<div class="container">
  <div>
    <h1>Member Form</h1>
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        
        <div class="alert alert-danger">
          Name is required
        </div>
      </div>

      <div class="form-group">
        <label for="status">Status</label>
        
      </div>

      <div class="form-group">
        <label for="qualification">Member Qualification</label>
        
          {{pow}}
        
        <div class="alert alert-danger">
          Qualification is required
        </div>
      </div>

      <button type="submit" class="btn btn-success">Submit</button>
      <button type="button" class="btn btn-default">New Member</button>
    </form>
  </div>

  <div>
    <h2>You Angular 6 submitted the following:</h2>
    <div class="row">
      <div class="col-xs-3">Name</div>
      <div class="col-xs-9  pull-left">{{ model.name }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Status</div>
      <div class="col-xs-9 pull-left">{{ model.status }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Qualification</div>
      <div class="col-xs-9 pull-left">{{ model.qualification }}</div>
    </div>
    <br>
    <button class="btn btn-primary">Edit</button>
  </div>
</div>

member.ts

export class Member {

  constructor(
    public id: number,
    public name: string,
    public qualification: string,
    public status?: string
  ) {  }

}

app.module.ts

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

import { AppComponent }  from './app.component';
import { MemberFormComponent } from './member-form/member-form.component';

//Angular 6 validate file input
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,
    MemberFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.html

app.component.ts

//Angular 6 validate file input import
import { Component } from '@angular/core';

Angular 6 validate file input Component
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

forms.css

.ng-valid[required], .ng-valid.required  {
  border-left: 6px solid #c60000;
}

.ng-invalid:not(form)  {
  border-left: 6px solid #a94442;
}

Angular 6 Image Upload with Validation Example

Component

  how to delete Multiple Selected rows using checkbox in laravel

Example Angular 6 – File Uploads with Angular Reactive Forms

@Component({
  template: `
    <form>
      
      <button type="submit">Submit</button>
    </form>
  `
})
export class MemberComponent {

  memberGroup = this.fb.group({
    file: [null, Validators.required]
  });

  constructor(private fb: FormBuilder) {}
  
}

File Uploads with Angular Reactive Forms

//Angular 6 Image Upload with Validation Example Input

JS part

uploadImageFile Events

uploadImageFile(event) {
  let fileimgmain = new FileReader();
 
  if(event.target.files && event.target.files.length) {
    const [file] = event.target.files;
    fileimgmain.readAsDataURL(file);
  
    fileimgmain.onload = () => {
      this.memberGroup.patchValue({
        file: fileimgmain.result
      });
     
      this.cd.markForCheck();
    };
  }
}

Angular 6 Component

@Component({
  template: `
    <form>
      
      <button type="submit">Submit</button>
    </form>
  `
})
export class MemberComponent {

  memberGroup = this.fb.group({
    file: [null, Validators.required]
  });

  constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {}
  
  uploadImageFile(event) {
    const fileimgmain = new FileReader();
 
    if(event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      fileimgmain.readAsDataURL(file);
  
      fileimgmain.onload = () => {
        this.memberGroup.patchValue({
          file: fileimgmain.result
       });
        this.cd.markForCheck();
      };
    }
  }
  
}

Angular 6 File upload validation before the file uploads
  Create Animated Scroll To Top Button using jQuery
Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular 6 Image Upload with Size Type Dimension Validation.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

avatar
  Subscribe  
Notify of