<form action="/upload">
	<div class="dropzone"></div>
</form>
.dropzone {
	border-radius: 4px;
	border: 2px dashed #0087f7 !important;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1em;
}

.dz-success-mark {
	background-color: rgb( 102, 187, 106, .8 )!important;
}

.dz-success-mark svg {
	font-size: 54px;
	fill: #fff !important;
}

.dz-error-mark {
	background-color: rgba( 239, 83, 80, .8 ) !important;
}

.dz-error-mark svg {
	font-size: 54px;
	fill: #fff !important;
}
const dropzone = new Dropzone( '.dropzone', {
	url: '/upload',
	dictDefaultMessage: `オプション設定`,
	maxFiles: 1,
	maxFilesize: 3,
	uploadMultiple: false,
});

dropzone.on( 'complete', file => {
	dropzone.disable();
	setTimeout( () => {
		dropzone.removeFile( file );
		dropzone.enable();
	}, 5000 );
} );

dropzone.on( 'drop', e => {
	if ( dropzone.files.length > 0 || e.dataTransfer.files.length > 1 ) {
		throw 'only one file';
	}
} );

External CSS

  1. https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css

External JavaScript

  1. https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js