protected void initDropzone(Element e, Element template, String previews, Element uploadPreview, Element uploadedFiles) {
        JQueryElement previewNode = $(template);
        previewNode.asElement().setId("");
        String previewTemplate = previewNode.parent().html();
        options.previewTemplate = previewTemplate;
        options.previewsContainer = "#" + previews;
        uploader = new Dropzone(e, options);

        uploader.on(FileUploaderEvents.DROP, event -> {
            fireDropEvent();
            if (preview) {
                $(e).removeClass(CssName.ACTIVE);
            }
            return true;
        });

        uploader.on(FileUploaderEvents.DRAG_START, event -> {
            DragStartEvent.fire(this);
            return true;
        });

        uploader.on(FileUploaderEvents.DRAG_END, event -> {
            DragEndEvent.fire(this);
            return true;
        });

        uploader.on(FileUploaderEvents.DRAG_ENTER, event -> {
            DragEnterEvent.fire(this, null);
            if (preview) {
                $(e).addClass(CssName.ACTIVE);
            }
            return true;
        });

        uploader.on(FileUploaderEvents.DRAG_OVER, event -> {
            DragOverEvent.fire(this);
            return true;
        });

        uploader.on(FileUploaderEvents.DRAG_LEAVE, event -> {
            DragLeaveEvent.fire(this, null);
            if (preview) {
                $(e).removeClass(CssName.ACTIVE);
            }
            return true;
        });

        uploader.on(FileUploaderEvents.ADDED_FILE, file -> {
            AddedFileEvent.fire(this, convertUploadFile(file));
            totalFiles++;

            if (isPreview()) {
                $(uploadedFiles).html("Uploaded files " + totalFiles);
                getUploadPreview().getUploadHeader().getProgress().setPercent(0);
                getUploadPreview().setVisibility(Style.Visibility.VISIBLE);
            }
        });

        uploader.on(FileUploaderEvents.REMOVED_FILE, file -> {
            RemovedFileEvent.fire(this, convertUploadFile(file));
            totalFiles -= 1;
            $(uploadedFiles).html("Uploaded files " + totalFiles);

            if (totalFiles == 0 && isPreview()) {
                getUploadPreview().setVisibility(Style.Visibility.HIDDEN);
            }
        });

        uploader.on("error", (file, response) -> {
            int code = 200;
            String statusText = "";

            if (file.xhr != null) {
                code = file.xhr.status;
                statusText = file.xhr.statusText;
            }

            String body = "";

            if (response instanceof String) {
                body = (String)response;
            } else {
                statusText = getResponseMessage(response);
            }

            if (code == 401) {
                statusText = statusText.isEmpty() ? "Unauthorized. Your session may have expired. Log in and try again." : statusText;
                globalResponse = response;
                UnauthorizedEvent.fire(this, convertUploadFile(file), new UploadResponse(code, statusText, body));
            }

            if (code == 404) {
                statusText = statusText.isEmpty() ? "There is a problem uploading your file." : statusText;
                globalResponse = response;
            }

            if (code == 500) {
                statusText = statusText.isEmpty() ? "There is a problem uploading your file." : statusText;
                globalResponse = response;
            }


            ErrorEvent.fire(this, convertUploadFile(file), new UploadResponse(code, statusText, body));
        });

        uploader.on(FileUploaderEvents.TOTAL_UPLOAD_PROGRESS, (progress, file, response) -> {
            TotalUploadProgressEvent.fire(this, progress);
            if (isPreview()) {
                getUploadPreview().getUploadHeader().getProgress().setPercent(progress);
            }
        });

        uploader.on(FileUploaderEvents.UPLOAD_PROGRESS, (progress, file, response) -> {
            CurrentUploadProgressEvent.fire(this, progress);
            if ($this != null) {
                $this.find(".progress .determinate").css("width", progress + "%");
            }
        });

        uploader.on(FileUploaderEvents.SENDING, file -> {
            SendingEvent.fire(this, convertUploadFile(file),
                    new UploadResponse(file.xhr.status, file.xhr.statusText));
        });

        uploader.on(FileUploaderEvents.SUCCESS, (file, response) -> {
            globalResponse = response;
            String message = getResponseMessage(response);
            SuccessEvent.fire(this, convertUploadFile(file),
                    new UploadResponse(file.xhr.status, file.xhr.statusText, message));
        });

        uploader.on(FileUploaderEvents.COMPLETE, file -> {
            String message = getResponseMessage(globalResponse);
            CompleteEvent.fire(this, convertUploadFile(file),
                    new UploadResponse(file.xhr.status, file.xhr.statusText, message));
        });

        uploader.on(FileUploaderEvents.CANCELED, file -> {
            CanceledEvent.fire(this, convertUploadFile(file));
        });

        uploader.on(FileUploaderEvents.MAX_FILES_REACHED, file -> {
            MaxFilesReachedEvent.fire(this, convertUploadFile(file));
        });

        uploader.on(FileUploaderEvents.MAX_FILES_EXCEEDED, file -> {
            MaterialToast.fireToast("You have reached the maximum files to be uploaded.");
            MaxFilesExceededEvent.fire(this, convertUploadFile(file));
        });
    }
protected void initDropzone ( Element e , Element template , String previews , Element uploadPreview , Element uploadedFiles ) { JQueryElement previewNode = $ ( template ) ; previewNode . asElement ( ) . setId ( "" ) ; String previewTemplate = previewNode . parent ( ) . html ( ) ; options . previewTemplate = previewTemplate ; options . previewsContainer = "#" + previews ; uploader = new Dropzone ( e , options ) ; uploader . on ( FileUploaderEvents . DROP , event -> { fireDropEvent ( ) ; if ( preview ) { $ ( e ) . removeClass ( CssName . ACTIVE ) ; } return true ; } ) ; uploader . on ( FileUploaderEvents . DRAG_START , event -> { DragStartEvent . fire ( this ) ; return true ; } ) ; uploader . on ( FileUploaderEvents . DRAG_END , event -> { DragEndEvent . fire ( this ) ; return true ; } ) ; uploader . on ( FileUploaderEvents . DRAG_ENTER , event -> { DragEnterEvent . fire ( this , null ) ; if ( preview ) { $ ( e ) . addClass ( CssName . ACTIVE ) ; } return true ; } ) ; uploader . on ( FileUploaderEvents . DRAG_OVER , event -> { DragOverEvent . fire ( this ) ; return true ; } ) ; uploader . on ( FileUploaderEvents . DRAG_LEAVE , event -> { DragLeaveEvent . fire ( this , null ) ; if ( preview ) { $ ( e ) . removeClass ( CssName . ACTIVE ) ; } return true ; } ) ; uploader . on ( FileUploaderEvents . ADDED_FILE , file -> { AddedFileEvent . fire ( this , convertUploadFile ( file ) ) ; totalFiles ++ ; if ( isPreview ( ) ) { $ ( uploadedFiles ) . html ( "Uploaded files " + totalFiles ) ; getUploadPreview ( ) . getUploadHeader ( ) . getProgress ( ) . setPercent ( 0 ) ; getUploadPreview ( ) . setVisibility ( Style . Visibility . VISIBLE ) ; } } ) ; uploader . on ( FileUploaderEvents . REMOVED_FILE , file -> { RemovedFileEvent . fire ( this , convertUploadFile ( file ) ) ; totalFiles -= 1 ; $ ( uploadedFiles ) . html ( "Uploaded files " + totalFiles ) ; if ( totalFiles == 0 && isPreview ( ) ) { getUploadPreview ( ) . setVisibility ( Style . Visibility . HIDDEN ) ; } } ) ; uploader . on ( "error" , ( file , response ) -> { int code = 200 ; String statusText = "" ; if ( file . xhr != null ) { code = file . xhr . status ; statusText = file . xhr . statusText ; } String body = "" ; if ( response instanceof String ) { body = ( String ) response ; } else { statusText = getResponseMessage ( response ) ; } if ( code == 401 ) { statusText = statusText . isEmpty ( ) ? "Unauthorized. Your session may have expired. Log in and try again." : statusText ; globalResponse = response ; UnauthorizedEvent . fire ( this , convertUploadFile ( file ) , new UploadResponse ( code , statusText , body ) ) ; } if ( code == 404 ) { statusText = statusText . isEmpty ( ) ? "There is a problem uploading your file." : statusText ; globalResponse = response ; } if ( code == 500 ) { statusText = statusText . isEmpty ( ) ? "There is a problem uploading your file." : statusText ; globalResponse = response ; } ErrorEvent . fire ( this , convertUploadFile ( file ) , new UploadResponse ( code , statusText , body ) ) ; } ) ; uploader . on ( FileUploaderEvents . TOTAL_UPLOAD_PROGRESS , ( progress , file , response ) -> { TotalUploadProgressEvent . fire ( this , progress ) ; if ( isPreview ( ) ) { getUploadPreview ( ) . getUploadHeader ( ) . getProgress ( ) . setPercent ( progress ) ; } } ) ; uploader . on ( FileUploaderEvents . UPLOAD_PROGRESS , ( progress , file , response ) -> { CurrentUploadProgressEvent . fire ( this , progress ) ; if ( $this != null ) { $this . find ( ".progress .determinate" ) . css ( "width" , progress + "%" ) ; } } ) ; uploader . on ( FileUploaderEvents . SENDING , file -> { SendingEvent . fire ( this , convertUploadFile ( file ) , new UploadResponse ( file . xhr . status , file . xhr . statusText ) ) ; } ) ; uploader . on ( FileUploaderEvents . SUCCESS , ( file , response ) -> { globalResponse = response ; String message = getResponseMessage ( response ) ; SuccessEvent . fire ( this , convertUploadFile ( file ) , new UploadResponse ( file . xhr . status , file . xhr . statusText , message ) ) ; } ) ; uploader . on ( FileUploaderEvents . COMPLETE , file -> { String message = getResponseMessage ( globalResponse ) ; CompleteEvent . fire ( this , convertUploadFile ( file ) , new UploadResponse ( file . xhr . status , file . xhr . statusText , message ) ) ; } ) ; uploader . on ( FileUploaderEvents . CANCELED , file -> { CanceledEvent . fire ( this , convertUploadFile ( file ) ) ; } ) ; uploader . on ( FileUploaderEvents . MAX_FILES_REACHED , file -> { MaxFilesReachedEvent . fire ( this , convertUploadFile ( file ) ) ; } ) ; uploader . on ( FileUploaderEvents . MAX_FILES_EXCEEDED , file -> { MaterialToast . fireToast ( "You have reached the maximum files to be uploaded." ) ; MaxFilesExceededEvent . fire ( this , convertUploadFile ( file ) ) ; } ) ; }
Intialize the dropzone component with element and form url to provide a
dnd feature for the file upload.