Upload Easy File Using DropzoneJS AngularJs

Posted By : Puneet Sharma | 28-Nov-2017

Saving user files in web applications requires images, videos or documents in too many cases. This post will proceed on the way to easily apply both the back and frontend components to facilitate the storage of files in a database. In addition, we have to make DrapezonJS attractive and make the process of front end uploading more smooth.

First we will facilitate the backend framework to maintain user files in the database. We will start with backend implementation by creating a basic RET server using Java Spring, with the end point for both accepting and sending files. After this, a frontend implementation will be followed by using the Angiens as an AP component and DropsZones as a library for uploading files.

One thing note below, in the form element, we have added an attribute dropzone, it will be an angular instruction used to wrap this element and it should be accessible by our app. We will go ahead and release the next instructions.

1) Just paste the code snippet below into the HTML file.

2) You must have the following files in javascript directory:-

                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js"></script>

<script src="js/fileAppDirectives.js"></script>

<script src="js/dropzone/dropzone.js"></script>

3) Now create the controller to handle the data :-


var fileAppDirectives = angular.module('fileAppDirectives', []);

            fileAppDirectives.directive('dropzone', function() {
                return {
                    restrict: 'C',
                    link: function(scope, element, attrs) {

                        var config = {
                            url: 'http://localhost:8080/upload',
                            maxFilesize: 100,
                            paramName: "uploadfile",
                            maxThumbnailFilesize: 10,
                            parallelUploads: 1,
                            autoProcessQueue: false
                        };

                        var eventHandlers = {
                            'addedfile': function(file) {
                                scope.file = file;
                                if (this.files[1]!=null) {
                                    this.removeFile(this.files[0]);
                                }
                                scope.$apply(function() {
                                    scope.fileAdded = true;
                                });
                            },

                            'success': function (file, response) {
                            }

                        };

                        dropzone = new Dropzone(element[0], config);

                        angular.forEach(eventHandlers, function(handler, event) {
                            dropzone.on(event, handler);
                        });

                        scope.processDropzone = function() {
                            dropzone.processQueue();
                        };

                        scope.resetDropzone = function() {
                            dropzone.removeAllFiles();
                        }
                    }
                }
            });

dropzone area