Merge pull request #4509 from cadriel/feature/file-thumbnails

(feat) implements image thumbnails for the File type

fields/types/Type.js

@@ -29,6 +29,7 @@ var DEFAULT_OPTION_KEYS = [
 	'collapse',
 	'dependsOn',
 	'autoCleanup',
+	'thumb',
 ];
 
 /**

fields/types/file/FileField.js

@@ -14,6 +14,7 @@ import {
 } from '../../../admin/client/App/elemental';
 import FileChangeMessage from '../../components/FileChangeMessage';
 import HiddenFileInput from '../../components/HiddenFileInput';
+import ImageThumbnail from '../../components/ImageThumbnail';
 
 let uploadInc = 1000;
 
@@ -31,6 +32,7 @@ module.exports = Field.create({
 		label: PropTypes.string,
 		note: PropTypes.string,
 		path: PropTypes.string.isRequired,
+		thumb: PropTypes.bool,
 		value: PropTypes.shape({
 			filename: PropTypes.string,
 			// TODO: these are present but not used in the UI,
@@ -73,6 +75,13 @@ module.exports = Field.create({
 			? this.state.userSelectedFile.name
 			: this.props.value.filename;
 	},
+	getFileUrl () {
+		return this.props.value && this.props.value.url;
+	},
+	isImage () {
+		const href = this.props.value ? this.props.value.url : undefined;
+		return href && href.match(/\.(jpeg|jpg|gif|png|svg)$/i) != null;
+	},
 
 	// ==============================
 	// METHODS
@@ -190,23 +199,44 @@ module.exports = Field.create({
 			return null;
 		}
 	},
+	renderImagePreview () {
+		const imageSource = this.getFileUrl();
+		return (
+			<ImageThumbnail
+				component="a"
+				href={imageSource}
+				target="__blank"
+				style={{ float: 'left', marginRight: '1em', maxWidth: '50%' }}
+			>
+				<img src={imageSource} style={{ 'max-height': 100, 'max-width': '100%' }} />
+			</ImageThumbnail>
+		);
+	},
 	renderUI () {
-		const { label, note, path } = this.props;
+		const { label, note, path, thumb } = this.props;
+		const isImage = this.isImage();
+		const hasFile = this.hasFile();
+
+		const previews = (
+			<div style={(isImage && thumb) ? { marginBottom: '1em' } : null}>
+				{isImage && thumb && this.renderImagePreview()}
+				{hasFile && this.renderFileNameAndChangeMessage()}
+			</div>
+		);
 		const buttons = (
-			<div style={this.hasFile() ? { marginTop: '1em' } : null}>
+			<div style={hasFile ? { marginTop: '1em' } : null}>
 				<Button onClick={this.triggerFileBrowser}>
-					{this.hasFile() ? 'Change' : 'Upload'} File
+					{hasFile ? 'Change' : 'Upload'} File
 				</Button>
-				{this.hasFile() && this.renderClearButton()}
+				{hasFile && this.renderClearButton()}
 			</div>
 		);
-
 		return (
 			<div data-field-name={path} data-field-type="file">
 				<FormField label={label} htmlFor={path}>
 					{this.shouldRenderField() ? (
 						<div>
-							{this.hasFile() && this.renderFileNameAndChangeMessage()}
+							{previews}
 							{buttons}
 							<HiddenFileInput
 								key={this.state.uploadFieldPath}
@@ -218,7 +248,7 @@ module.exports = Field.create({
 						</div>
 					) : (
 						<div>
-							{this.hasFile()
+							{hasFile
 								? this.renderFileNameAndChangeMessage()
 								: <FormInput noedit>no file</FormInput>}
 						</div>