Ajax AngularJS Laravel Laravel 5.5 Laravel 5.6

Perfect use of Dropzone with Laravel and AngularJS

Perfect use of Dropzone JS with Laravel and AngularJS
Written by Yogesh Koli

Learn how to implement multiple file uploads with drag and drop feature using Dropzone library with Laravel and AngularJS

# Introduction:

This article covers the complete steps to understand and use of Dropzone JS, Dropzone is really flexible and specifically improves file uploading feature for end user, It enables drag and drop option while uploading a file, so it is always good to implement drop zone JS into the application when we require to handle file upload.

Recently I have realsed a tutorial on Laravel File AngularJS upload, if you want to learn handling file upload in Laravel framework and AngulaJS only then you can read previous tutorial before going to handle this tutorial.

In this tutorial we be developing a file upload demo with Laravel 5.6 and AngularJS and our demo will have following list of features:

  • Upload multiple files by dragging and dropping on dropzone box
  • Store records for each uploaded file into the database 
  • List all uploaded files
  • Delete exiting file from directory as well a associated record from the database

By reading this tutorial you will learn use of dropzone library with AngularJS and Laravel framework. 

So let’s begin:

# Project Setup

In this step we are going to create new Laravel project and setup database settings along with creating new database (will be using MySQL database).

If you already have your  existing project, you can skip this step and start from the next step onwards to implement drag and drop feature into your project.

Create new project using Laravel installer or Composer:

$ laravel new laravel-dropzonejs-file-upload

OR

Database Settings:

Open up your project into your code editor, in my case I am using visual studio code.

Next go ahead and open .env file and update add database name, the database username and password.

Create new database

Open MySQL and create new database as you have mentioned in the above step.

# Create Database Migration and Eloquent Model

We are going to need a database migration file to create new table into the database and a eloquent model file to handle database operations.

To generate both files use following artisan command 

You should have create_files_table and File.php files generated 

Open up File.php file into code editor from app/ directory and add guarded property as all Eloquent models protect against mass-assignment.

File.php:

Next update migration file and add new fields as showing below 

Now migrate the database to create files table using command given below:

We are all set about the database setup in next step let’s focus on angularjs and dropzone installation.

# AngularJS, Dropzone installation and Setup into Laravel:

To handle this step you should have node package manager installed into your system so that you can install required dependencies and compile your front end code with Laravel mix.

To install npm you can simply install Node.Js from nodejs.org, npm comes along the nodejs.

okay so now I assume that you have npm installed and ready to use.

Note –  if you haven’t installed node dependencies for your Laravel project then use following command to install them first.

Wait until your get all the dependencies installed, you should get message showing below when the installation process is complete:

Next install angularjs

Now install dropzone using following command

Open bootstrap.js file from /resources/assets/js/ and replace it with the script given below:

/resources/assets/js/bootstrap.js:

If you notice above code, you will see that we have imported angular as well as dropzone, also take a note we are declaring dropzone globally so that we can use anywhere int the project using window object.

Next open up app.scss file from /resources/assets/sass/  directory and a line to import dropzone css file. as showing below script

/resources/assets/sass/app.scss:

Now are are good with angularjs and dropzone installation, next will have to use into into our JS, but before going to do that, first let’s design our front end view.

# Design Frontend View

In this step we will design a view, the view will have a dropzone box along with list of uploaded files.

Go ahed and open welcome.blade.php view from /resources/views/ directory. You can use different file if you are using existing project don’t get confuse.

Replace view following script, If notice the script basically we are setting up the page structure along with AngularJS module and controller setup.

Don’t forget to note the window.laravel declaration here, this is the important variable we are going to use this token while handling http/xhr requests from front end. without this the project will not work.

/resources/views/welcome.blade.php:

Next add following script into the same above page and it should go into the ng-controller section:

If read above script carefully you will have we have number of things written up there, the page title, dropzone implementation along with custom directive and also lopping files into the html table with different columns.

# AngularJS Controller and Custom Directive for dropzone

This specifically important step, in this step we are going define our AngularJS controller along with the a directive fro dropzone, the directive will ensure the few things such as render dropzone, bind events and methods.

Go ahead and open app.js file from /resources/assets/js/ folder and replace with the following script 

/resources/assets/js/app.js:

If you notice above script from the first line to last you will notice few important things going on here, details points are here:

  • Import bootstrap.js file where we have added our external library files such as bootstrap, jquery, proper.js, angular and dropzone.
  • AngularJS module declaration with http provider configuration to have new field added to the header called X-CSRF-TOKEN
  • AngularJS Controller definition  along with dropzone configuration and methods to load files from server as well as delete the file from the server 
  • Custom directive for dropzone called mydropzone – this important one read it carefully to understand the declaring, rendering and other configuration part such as events binding methods binding.

# Laravel Routes and Controller Setup

As we see we have complete all the front end part of the demo, now it’s time look at the backend where we are going to handle different request coming from the front end such as upload and store the file, list out the files and delete existing file.

To this let’s generate new controller and required define methods:

Open up FileUploadsController.php file and add following definiation:

Now will needs to define routes to align income requests, open web.php file and add following new routes:

# Compile Assets using Laravel Mix:

We are almost done with the development part, now we just have compile the assets (the css and JS part) and test the project.

If you remember at the start of this tutorial I told your about npm and compile the assets with laravel mix.

Okay so you don’t have do much things you just needs to run following command and your done.

If you success message like this:

Then you can go ahead and test the demo into the browser, you should see output as showing into the screen below:

Dropzone AngularJS and Laravel File upload Demo

Try uploading single or multiple files and then try deleting files as well see the result.

All done, let me know if you get any issues using comment box below and keep sharing I Tech Empires tutorials to your friends on social media.

About the author

Yogesh Koli

Yogesh Koli is a software engineer & a Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 5+ years of experience working with the front-end, back-end, web application development, and system design.

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of