Drag and Drop Image Upload in Angular Example

Drag and Drop Image Upload in Angular Example

In this post we will give you information about Drag and Drop Image Upload in Angular Example. Hear we will give you detail about Drag and Drop Image Upload in Angular ExampleAnd how to use it also give you demo for it if it is necessary.

In this example, i will show you angular drag and drop image upload using dropzone js. i explained simply step by step drag and drop image upload in angular. i explained simply about angular dropzone example. it’s simple example of dropzone js angular example. follow bellow step for dropzone in angular image upload.

i will give you very simple example from scratch for multiple image upload using dropzone component in angular application. we will use ngx-dropzone npm package for drag and drop image uploading in angular app. you can easily use dropzone js in angular 6, angular 7, angular 8 and angular 9 app.

I written step by step dropzone js image uploading with angular application, also created web service using php, so you can also upload image 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 - ItSolutionStuff.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

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:

Also see:Angular 9/8 Dropzone Image Upload Example

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…

Hope this code and post will helped you for implement Drag and Drop Image Upload in Angular Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

81  +    =  90

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US