Cara multiple upload di Aplikasi Angular 11. Dalam tutorial ini, Anda akan belajar cara upload banyak file dalam aplikasi angular 11.
Selain itu, tutorial ini akan memandu Anda langkah demi langkah tentang cara mengunggah banyak file dalam angular 11. Dan juga menggunakan formulir reaktif untuk mengunggah banyak file dalam aplikasi angular 11.
Dalam tutorial ini, kami akan memberi Anda contoh yang sangat sederhana dan mudah tentang cara mengunggah banyak file di aplikasi angular 11 dan juga cara menyimpan banyak file ke dalam direktori.
Cukup ikuti langkah-langkah berikut untuk multiple upload file dalam aplikasi angular 11 dengan bentuk reaktif:
Langkah 1 - Buat Aplikasi Angular Baru
Pertama-tama, buka terminal Anda dan jalankan perintah berikut untuk menginstal aplikasi angular:
ng new my-new-app
Langkah 2 - Import Modul
Kemudian, Buka file app.module.ts dan import HttpClientModule, FormsModule dan ReactiveFormsModule ke file app.module.ts seperti berikut:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Langkah 3 - Tambahkan Kode pada View File
Pada langkah ini, buat formulir reaktif sederhana dengan elemen file masukan dan tag upload file. Jadi, kunjungi src/app/app.component.html dan perbarui kode berikut ke dalamnya:
<h1>Angular 11 Multiple File Upload Example - Medikre.com</h1>
<form [formGroup]="myForm" (ngSubmit)="submit()">
<div class="form-group">
<label for="name">Name</label>
<input
formControlName="name"
id="name"
type="text"
class="form-control">
<div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">
<div *ngIf="f.name.errors.required">Name is required.</div>
<div *ngIf="f.name.errors.minlength">Name should be 3 character.</div>
</div>
</div>
<div class="form-group">
<label for="file">File</label>
<input
formControlName="file"
id="file"
type="file"
multiple
class="form-control"
(change)="onFileChange($event)">
<div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
<div *ngIf="f.file.errors.required">File is required.</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
Langkah 4 - Gunakan File Component
Pada langkah ini, kunjungi direktori src/app dan buka app.component.ts. Kemudian tambahkan kode berikut seperti formGroup dan elemen formControl pada file component.ts:
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myFiles:string [] = [];
myForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(3)]),
file: new FormControl('', [Validators.required])
});
constructor(private http: HttpClient) { }
get f(){
return this.myForm.controls;
}
onFileChange(event) {
for (var i = 0; i < event.target.files.length; i++) {
this.myFiles.push(event.target.files[i]);
}
}
submit(){
const formData = new FormData();
for (var i = 0; i < this.myFiles.length; i++) {
formData.append("file[]", this.myFiles[i]);
}
this.http.post('http://localhost:8001/upload.php', formData)
.subscribe(res => {
console.log(res);
alert('Uploaded Successfully.');
})
}
}
Langkah 5 - Buat File Upload.php
Pada langkah ini, Buat file upload.php dan perbarui kode berikut ke dalamnya:
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$folderPath = "upload/";
$file_names = $_FILES["file"]["name"];
for ($i = 0; $i < count($file_names); $i++) {
$file_name=$file_names[$i];
$extension = end(explode(".", $file_name));
$original_file_name = pathinfo($file_name, PATHINFO_FILENAME);
$file_url = $original_file_name . "-" . date("YmdHis") . "." . $extension;
move_uploaded_file($_FILES["file"]["tmp_name"][$i], $folderPath . $file_url);
}
?>
Perhatikan bahwa, kode file upload.php akan membantu Anda mengunggah banyak file di server dari aplikasi angular 11.
Langkah 6 - Jalankan Aplikasi Angular dan Server PHP
Pada langkah ini, jalankan perintah berikut di terminal untuk memulai aplikasi angular dan juga server php:
ng serve
php -S localhost:8001
multiple upload file angular