<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

<input type="file" multiple>

<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
	
	FilePond.registerPlugin(
		FilePondPluginImageCrop,
		FilePondPluginImagePreview,
		FilePondPluginImageResize,
		FilePondPluginImageTransform
	);

	const inputElement = document.querySelector('input[type="file"]');
	const pond = FilePond.create(inputElement, {
		imageCropAspectRatio: 1,
		imageResizeTargetWidth: 256,
		imageResizeMode: 'contain',
		imageTransformVariants: {
			thumb_medium_: transforms => {
				transforms.resize.size.width = 512;
				transforms.crop.aspectRatio = .5;
				return transforms;
			},
			thumb_small_: transforms => {
				transforms.resize.size.width = 64;
				return transforms;
			}
		},
		onaddfile: (err, fileItem) => {
			console.log(err, fileItem.getMetadata('resize'));
		},
		onpreparefile: (fileItem, outputFiles) => {
			outputFiles.forEach(output => {
				const img = new Image();
				img.src = URL.createObjectURL(output.file);
				document.body.appendChild(img);
			})
		}
	});
</script>
.filepond--root {
	max-width:20em;
}

body {
	padding: 2em;
}

img {
	margin: 1em 2em 0 0;
	border-radius: .25em;
	box-shadow: 0 .125em .5em rgba(0,0,0,.25);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.