Step 1 \u2013 Create New Angular App<\/h4>\n\n\n\n
First of all, open your terminal and execute the following command on it to install angular app:<\/p>\n\n\n\n
ng new my-new-app<\/code><\/pre>\n\n\n\nStep 2 \u2013 Import Module<\/h4>\n\n\n\n
Then, Open app.module.ts file and import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file like following:<\/p>\n\n\n\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { HttpClientModule } from '@angular\/common\/http';\nimport { FormsModule, ReactiveFormsModule } from '@angular\/forms';\n \nimport { AppComponent } from '.\/app.component';\n \n@NgModule({\n declarations: [\n AppComponent\n ],\n imports: [\n BrowserModule,\n HttpClientModule,\n FormsModule,\n ReactiveFormsModule\n ],\n providers: [],\n bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n\n\n\nStep 3 \u2013 Add Code on View File<\/h4>\n\n\n\n
In this step, create simple reactive form with input file element and image tag. So, visit src\/app\/app.component.html and update the following code into it:<\/p>\n\n\n\n
<h1>Angular 11 Image Upload with Preview<\/h1>\n \n<form [formGroup]=\"myForm\" (ngSubmit)=\"submit()\">\n \n <div class=\"form-group\">\n <label for=\"name\">Name<\/label>\n <input\n formControlName=\"name\"\n id=\"name\"\n type=\"text\"\n class=\"form-control\">\n <div *ngIf=\"f.name.touched && f.name.invalid\" class=\"alert alert-danger\">\n <div *ngIf=\"f.name.errors.required\">Name is required.<\/div>\n <div *ngIf=\"f.name.errors.minlength\">Name should be 3 character.<\/div>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"file\">File<\/label>\n <input\n formControlName=\"file\"\n id=\"file\"\n type=\"file\"\n class=\"form-control\"\n (change)=\"onFileChange($event)\">\n <div *ngIf=\"f.file.touched && f.file.invalid\" class=\"alert alert-danger\">\n <div *ngIf=\"f.file.errors.required\">File is required.<\/div>\n <\/div>\n <\/div>\n \n <img [src]=\"imageSrc\" *ngIf=\"imageSrc\" style=\"height: 300px; width:500px\">\n \n <button class=\"btn btn-primary\" type=\"submit\">Submit<\/button>\n<\/form><\/code><\/pre>\n\n\n\nStep 4 \u2013 Use Component ts File<\/h4>\n\n\n\n
In this step, open the file app.component.ts<\/strong>. Then add the following code. We import formGroup and formControl element on component.ts file:<\/p>\n\n\n\nimport { Component } from '@angular\/core';\nimport { HttpClient } from '@angular\/common\/http';\nimport { FormGroup, FormControl, Validators} from '@angular\/forms';\n \n@Component({\n selector: 'app-root',\n templateUrl: '.\/app.component.html',\n styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent {\n imageSrc: string;\n myForm = new FormGroup({\n name: new FormControl('', [Validators.required, Validators.minLength(3)]),\n file: new FormControl('', [Validators.required]),\n fileSource: new FormControl('', [Validators.required])\n });\n \n constructor(private http: HttpClient) { }\n \n get f(){\n return this.myForm.controls;\n }\n \n onFileChange(event) {\n const reader = new FileReader();\n \n if(event.target.files && event.target.files.length) {\n const [file] = event.target.files;\n reader.readAsDataURL(file);\n \n reader.onload = () => {\n \n this.imageSrc = reader.result as string;\n \n this.myForm.patchValue({\n fileSource: reader.result\n });\n \n };\n \n }\n }\n \n submit(){\n console.log(this.myForm.value);\n this.http.post('http:\/\/localhost:8001\/upload.php', this.myForm.value)\n .subscribe(res => {\n console.log(res);\n alert('Uploaded Successfully.');\n })\n }\n}<\/code><\/pre>\n\n\n\nStep 5 \u2013 Create Upload.php File<\/h4>\n\n\n\n
In this step, Create upload.php file and update following code into it:<\/p>\n\n\n\n
<?php\n \n header(\"Access-Control-Allow-Origin: *\");\n header(\"Access-Control-Allow-Methods: PUT, GET, POST\");\n header(\"Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept\");\n \n $folderPath = \"upload\/\";\n $postdata = file_get_contents(\"php:\/\/input\");\n $request = json_decode($postdata);\n \n $image_parts = explode(\";base64,\", $request->fileSource);\n \n $image_type_aux = explode(\"image\/\", $image_parts[0]);\n \n $image_type = $image_type_aux[1];\n \n $image_base64 = base64_decode($image_parts[1]);\n \n $file = $folderPath . uniqid() . '.png';\n \n file_put_contents($file, $image_base64);\n \n?><\/code><\/pre>\n\n\n\nNote that, the upload.php file code will help you to upload image on server from angular 11 app.<\/p><\/blockquote>\n\n\n\n
Step 6 \u2013 Start Angular App And PHP Server<\/h4>\n\n\n\n
In this step, execute the following commands on terminal to start angular app and as well as php server:<\/p>\n\n\n\n
ng serve\n\nphp -S localhost:8001<\/code><\/pre>\n\n\n\n
![\"\"\/](\"https:\/\/raw.githubusercontent.com\/promosis\/file-upload-with-preview\/master\/public\/file-upload-with-preview-animated.gif\")
<\/figure>\n\n\n\n