I am going to explain you example of angular 9 drag and drop file upload using dropzone. We will look at example of angular 9 dropzone file upload example. if you want to see example of angular 9 drop zone file then you are a right place. This tutorial will give you simple example of angular 9 file dropzone.
i will give you very simple example from scratch for multiple file upload using dropzone component in angular 9 application. we will use ngx-dropzone npm package for drag and drop file uploading in angular 9/8 app.
I written step by step dropzone js file uploading with angular 9 application, also created web service using php, so you can also upload file on server using api. so let's follow bellowing step and get preview like as bellow:
Step 1: Create New App
You can easily create your angular app using bellow command:
ng new my-dropzone-app
Step 2: Install ngx-dropzone Packages
In this step, we will install ngx-dropzone npm package for use of dropzone js in angular. so let's run both command:
npm install --save ngx-dropzone
Step 3: Import Module
In this step, we need to import HttpClientModule and NgxDropzoneModule to app.module.ts file. so let's import it as like bellow:
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { NgxDropzoneModule } from 'ngx-dropzone';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
NgxDropzoneModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4: Updated View File
Now here, we will updated our html file. we will create simple use dropzone component here in view file.
so let's put bellow code:
src/app/app.component.html
<h1>Angular Dropzone File Upload Example - HDTuto.com</h1>
<ngx-dropzone (change)="onSelect($event)">
<ngx-dropzone-label>Drop it, baby!</ngx-dropzone-label>
<ngx-dropzone-preview *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
Step 5: Use Component ts File
Now we need to update our component.ts file with HttpClient and write method of selected images.
i used my local api file url 'http://localhost:8001/upload.php', you can use your api there.
so, let's update as like bellow:
src/app/app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'dropzone';
files: File[] = [];
constructor(private http: HttpClient) { }
onSelect(event) {
console.log(event);
this.files.push(...event.addedFiles);
const formData = new FormData();
for (var i = 0; i < this.files.length; i++) {
formData.append("file[]", this.files[i]);
}
this.http.post('http://localhost:8001/upload.php', formData)
.subscribe(res => {
console.log(res);
alert('Uploaded Successfully.');
})
}
onRemove(event) {
console.log(event);
this.files.splice(this.files.indexOf(event), 1);
}
}
Now we are ready to run our example, we will create api file using php. so you can create update.php file with "upload" folder and run with different port and call it. so let's create upload.php file as like bellow:
upload.php
<?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/";
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
foreach ($request->fileSource as $key => $value) {
$image_parts = explode(";base64,", $value);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.'.$image_type;
file_put_contents($file, $image_base64);
}
Now we are ready to run both:
Run Angular App:
ng serve
Run PHP API:
php -S localhost:8001
Now you can run and check it.
you can get more information about ngx-dropzone from here: Click Here.
I hope it can help you...
Do you like below Tutorials ?
- How to Display Data in Angular 10?
- Angular 10 Routing Module Example Tutorial
- Angular 10 CRUD Operations with Web API Example
- Laravel 8 CRUD Operation Step By Step Tutorial
- Solved - Target class [ProductController] does not exist in Laravel 8
- Step by Step Form Validation in Laravel 8 Example
- Laravel 8 Image Upload with Preview Example
- Laravel 8 Multiple Images Upload with Preview Example