DropzoneJS and Croppie integration

dropzonejs-and-croppie-integration.markdown

DropzoneJS and Croppie integration

An integration of DropzoneJS and Croppie

https://medium.com/@rikschennink/integrating-dropzone-with-javascript-image-cropper-optimise-image-upload-e22b12ac0d8a

A Pen by Rik Schennink on CodePen.

License.

index.html

<div class="dropzone" id="myDropzone"></div>

script.js

Dropzone.options.myDropzone = {
	url: '/post',
	transformFile: function(file, done) {

		var myDropZone = this;

		// Create the image editor overlay
		var editor = document.createElement('div');
		editor.style.position = 'fixed';
		editor.style.left = 0;
		editor.style.right = 0;
		editor.style.top = 0;
		editor.style.bottom = 0;
		editor.style.zIndex = 9999;
		editor.style.backgroundColor = '#000';
		document.body.appendChild(editor);

		// Create the confirm button
		var confirm = document.createElement('button');
		confirm.style.position = 'absolute';
		confirm.style.left = '10px';
		confirm.style.top = '10px';
		confirm.style.zIndex = 9999;
		confirm.textContent = 'Confirm';
		confirm.addEventListener('click', function() {

			// Get the output file data from Croppie
			croppie.result({
				type:'blob',
				size: {
					width: 256,
					height: 256
				}
			}).then(function(blob) {

				// Update the image thumbnail with the new image data
				myDropZone.createThumbnail(
					blob,
					myDropZone.options.thumbnailWidth,
					myDropZone.options.thumbnailHeight,
					myDropZone.options.thumbnailMethod,
					false, 
					function(dataURL) {

						// Update the Dropzone file thumbnail
						myDropZone.emit('thumbnail', file, dataURL);

						// Return modified file to dropzone
						done(blob);
					}
				);

			});

			// Remove the editor from view
			editor.parentNode.removeChild(editor);

		});
		editor.appendChild(confirm);

		// Create the croppie editor
		var croppie = new Croppie(editor, {
			enableResize: true
		});

		// Load the image to Croppie
		croppie.bind({
			url: URL.createObjectURL(file)
		});

	}
};

scripts

<script src="https://unpkg.com/dropzone"></script>
<script src="https://unpkg.com/croppie"></script>

style.scss

html {
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	font-size: 1em;
}

body {
	padding: 2em;
}

.dropzone {
	min-height: 0
}

styles

<link href="https://unpkg.com/dropzone/dist/dropzone.css" rel="stylesheet" />
<link href="https://unpkg.com/croppie/croppie.css" rel="stylesheet" />