Begin here: https://soderlind.no/dropzonejs-wordpress-demo-plugin/

customize_dropzonejs.js

// dropzoneWordpressForm is the configuration for the element that has an id attribute
// with the value dropzone-wordpress-form (or dropzoneWordpressForm)
Dropzone.options.dropzoneWordpressForm = {
	//acceptedFiles: "image/*", // all image mime types
	acceptedFiles: ".jpg", // only .jpg files
	maxFiles: 1,
	uploadMultiple: false,
	maxFilesize: 5, // 5 MB
	//addRemoveLinks: true,
	//dictRemoveFile: 'X (remove)',
	init: function() {
		this.on("sending", function(file, xhr, formData) {
			formData.append("name", "value"); // Append all the additional input data of your form here!
		});
	}
};

dropzonejs-wordpress.php

<?php
/*
Plugin Name: DropzoneJS & WordPress
Version: 0.0.1
Description: Demos DropzoneJS in WordPress
Author: Per Soderlind
Author URI: https://soderlind.no
Plugin URI: https://gist.github.com/soderlind/f9e8b06cc205fb8c493d
License: GPL
*/

define( 'DROPZONEJS_PLUGIN_URL',   plugin_dir_url( __FILE__ ) );
define( 'DROPZONEJS_PLUGIN_VERSION', '0.0.1' );

add_action( 'plugins_loaded', 'dropzonejs_init' );

function dropzonejs_init() {
	add_action( 'wp_enqueue_scripts', 'dropzonejs_enqueue_scripts' );
	add_shortcode( 'dropzonejs', 'dropzonejs_shortcode' );
}

function dropzonejs_enqueue_scripts() {

	wp_enqueue_script(
		'dropzonejs',
		'https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js',
		array(),
		DROPZONEJS_PLUGIN_VERSION
	);
	/*
	// Load custom dropzone javascript
	wp_enqueue_script(
		'customdropzonejs',
		DROPZONEJS_PLUGIN_URL. '/js/customize_dropzonejs.js',
		array( 'dropzonejs' ),
		DROPZONEJS_PLUGIN_VERSION
	);
	*/
	wp_enqueue_style(
		'dropzonecss',
		'https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.css',
		array(),
		DROPZONEJS_PLUGIN_VERSION
	);
}


// Add Shortcode
function dropzonejs_shortcode( $atts ) {

	$url         = admin_url( 'admin-ajax.php' );
	$nonce_files = wp_nonce_field( 'protect_content', 'my_nonce_field' );

	return <<<ENDFORM
<div id="dropzone-wordpress"><form action="$url" class="dropzone needsclick dz-clickable" id="dropzone-wordpress-form">
	$nonce_files
	<div class="dz-message needsclick">
		Drop files here or click to upload.<br>
		<span class="note needsclick">(Files are uploaded to uploads/yyyy/mm)</span>
  	</div>
	<input type='hidden' name='action' value='submit_dropzonejs'>
</form></div>
ENDFORM;
}


add_action( 'wp_ajax_nopriv_submit_dropzonejs', 'dropzonejs_upload' ); //allow on front-end
add_action( 'wp_ajax_submit_dropzonejs', 'dropzonejs_upload' );

/**
 * dropzonejs_upload() handles the AJAX request, learn more about AJAX in Plugins at https://codex.wordpress.org/AJAX_in_Plugins
 * @return [type] [description]
 */
function dropzonejs_upload() {

	if ( !empty( $_FILES ) && wp_verify_nonce( $_REQUEST['my_nonce_field'], 'protect_content' ) ) {

		$uploaded_bits = wp_upload_bits(
			$_FILES['file']['name'],
			null, //deprecated
			file_get_contents( $_FILES['file']['tmp_name'] )
		);

		if ( false !== $uploaded_bits['error'] ) {
			$error = $uploaded_bits['error'];
			return add_action( 'admin_notices', function() use ( $error ) {
					$msg[] = '<div class="error"><p>';
					$msg[] = '<strong>DropzoneJS & WordPress</strong>: ';
					$msg[] = sprintf( __( 'wp_upload_bits failed,  error: "<strong>%s</strong>' ), $error );
					$msg[] = '</p></div>';
					echo implode( PHP_EOL, $msg );
				} );
		}
		$uploaded_file     = $uploaded_bits['file'];
		$uploaded_url      = $uploaded_bits['url'];
		$uploaded_filetype = wp_check_filetype( basename( $uploaded_bits['file'] ), null );

		/*
		etc ...
		*/
	}
	die();
}

Hello, thank you for the plugin. So how do I use it in editing the front end profile page. Would you help me?
The front-end html code looks like this:

                               < div class="my-2 col-xs-6 p-0" >  
                                    <label class="text-muted">Image</label> 
                                    <div id="user-profile-image" class="dropzone needsclick">
                                        <div class="dz-message needsclick text-muted">    
                                            Drop file here or click to upload.
                                        </div>
                                    </div>
                                    <div id="dropzone-preview-template" class="d-none plan-image-template">
						
                                        <div class="dz-preview dz-file-preview">
                                            <div class="dz-image"><img src="" data-dz-thumbnail="" alt="prop-image"></div>
                                            <div class="dz-details">
                                                <div class="dz-size"><span data-dz-size=""></span></div>
                                                <div class="dz-filename"><span data-dz-name=""></span></div>
                                            </div >
										
                                            <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
                                            <div class="dz-error-message"><span data-dz-errormessage=""></span></div>
                                            <div class="dz-success-mark">
                                                <i class="material-icons mat-icon-xlg">check</i> 
                                            </div>
                                            <div class="dz-error-mark">
                                                <i class="material-icons mat-icon-xlg">cancel</i> 
                                            </div> 
                                        </div>
										
                                    </div>  
                                </div>