ahmadajah03 Mon Mar 2021 1 year ago

Contoh Tutorial Angular 11 Multiple Upload

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 &amp;&amp; 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 &amp;&amp; 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