* FileUploadInput: add design doc

* FileUploadInput: add file type validation for DnD
* FileUploadInput: update unit tests
* FileUploader: add formatted file size display
* FileUploader: add CustomValidator example

Author: msssk

src/examples/src/config.tsx

@@ -65,6 +65,7 @@ import LabelledFileUploadInput from './widgets/file-upload-input/Labelled';
 import MultipleFileUploadInput from './widgets/file-upload-input/Multiple';
 import NoDropFileUploadInput from './widgets/file-upload-input/NoDrop';
 import BasicFileUploader from './widgets/file-uploader/Basic';
+import CustomValidatorFileUploader from './widgets/file-uploader/CustomValidator';
 import DisabledFileUploader from './widgets/file-uploader/Disabled';
 import MultipleFileUploader from './widgets/file-uploader/Multiple';
 import ValidatedFileUploader from './widgets/file-uploader/Validated';
@@ -763,6 +764,11 @@ export const config = {
 					title: 'Validated FileUploader',
 					filename: 'Validated',
 					module: ValidatedFileUploader
+				},
+				{
+					title: 'FileUploader with custom validator',
+					filename: 'CustomValidator',
+					module: CustomValidatorFileUploader
 				}
 			]
 		},

src/examples/src/widgets/file-uploader/CustomValidator.tsx

@@ -0,0 +1,28 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import FileUploader from '@dojo/widgets/file-uploader';
+import Example from '../../Example';
+
+const factory = create();
+
+export default factory(function CustomValidator() {
+	function validateName(file: File) {
+		if (file.name === 'validfile.txt') {
+			return { valid: true };
+		} else {
+			return {
+				message: 'File name must be "validfile.txt"',
+				valid: false
+			};
+		}
+	}
+
+	return (
+		<Example>
+			<FileUploader customValidator={validateName}>
+				{{
+					label: 'Upload a file named "validfile.txt"'
+				}}
+			</FileUploader>
+		</Example>
+	);
+});

src/examples/src/widgets/file-uploader/Validated.tsx

@@ -5,7 +5,7 @@ import Example from '../../Example';
 const factory = create();
 
 export default factory(function Validated() {
-	const accept = ['image/jpeg', 'image/png'];
+	const accept = 'image/jpeg,image/png';
 	const maxSize = 50000;
 
 	return (

src/file-upload-input/design.md

@@ -6,6 +6,9 @@ dialog but you have to call its `click` method.
 
 The overlay `<div>` provides a visual indicator that a drag operation is in progress.
 
+The widget accepts children so that widgets using FileUploadInput can render file information within the bounds of
+the FileUploadInput and when the overlay is displayed it will cover the children as well.
+
 # Drag and Drop
 
 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
@@ -28,3 +31,8 @@ the cursor moves over children (even letters in text).
   - when this event fires the overlay is hidden
 - `drop`: listened for on the root since it bubbles from the overlay
   - get the files and update to indicate DnD is no longer active
+
+# Validation
+
+When the `accept` parameter is set on `<input type="file">` the dialog restricts which files can be selected. For
+Drag and Drop the validation has to be done by the widget, otherwise any file will be accepted.

src/file-upload-input/index.tsx

@@ -20,7 +20,7 @@ export interface FileUploadInputChildren {
 
 export interface FileUploadInputProperties {
 	/** The `accept` attribute of the input */
-	accept?: string | string[];
+	accept?: string;
 
 	/** If `true` file drag-n-drop is allowed. Default is `true` */
 	allowDnd?: boolean;
@@ -50,6 +50,43 @@ export interface FileUploadInputProperties {
 	widgetId?: string;
 }
 
+export function filterValidFiles(files: File[], accept: FileUploadInputProperties['accept']) {
+	if (!accept) {
+		return files;
+	}
+
+	const { extensions, types } = accept.split(',').reduce(
+		function(sum, acceptPattern) {
+			if (acceptPattern.startsWith('.')) {
+				sum.extensions.push(new RegExp(`\\${acceptPattern}$`, 'i'));
+			} else {
+				const wildcardIndex = acceptPattern.indexOf('/*');
+				if (wildcardIndex > 0) {
+					sum.types.push(
+						new RegExp(`^${acceptPattern.substr(0, wildcardIndex)}/.+`, 'i')
+					);
+				} else {
+					sum.types.push(new RegExp(acceptPattern, 'i'));
+				}
+			}
+
+			return sum;
+		},
+		{ extensions: [], types: [] } as { extensions: RegExp[]; types: RegExp[] }
+	);
+
+	const validFiles = files.filter(function(file) {
+		if (
+			extensions.some((extensionRegex) => extensionRegex.test(file.name)) ||
+			types.some((typeRegex) => typeRegex.test(file.type))
+		) {
+			return true;
+		}
+	});
+
+	return validFiles;
+}
+
 export interface ValidationInfo {
 	message?: string;
 	valid?: boolean;
@@ -85,7 +122,7 @@ export const FileUploadInput = factory(function FileUploadInput({
 	} = properties();
 	const { messages } = i18n.localize(bundle);
 	const themeCss = theme.classes(css);
-	const { content, label } = children()[0] || {};
+	const { content = null, label = null } = children()[0] || {};
 	let isDndActive = icache.getOrSet('isDndActive', false);
 
 	function onDragEnter(event: DragEvent) {
@@ -107,7 +144,11 @@ export const FileUploadInput = factory(function FileUploadInput({
 		icache.set('isDndActive', false);
 
 		if (onValue && event.dataTransfer && event.dataTransfer.files.length) {
-			onValue(Array.from(event.dataTransfer.files));
+			const fileArray = Array.from(event.dataTransfer.files);
+			const validFiles = filterValidFiles(fileArray, accept);
+			if (validFiles.length) {
+				onValue(validFiles);
+			}
 		}
 	}
 

src/file-upload-input/tests/unit/FileUploadInput.spec.tsx

@@ -2,61 +2,66 @@ import { tsx } from '@dojo/framework/core/vdom';
 import { assertion, renderer, wrap } from '@dojo/framework/testing/renderer';
 import { Button } from '../../../button';
 import { FileUploadInput } from '../../index';
+import { Label } from '../../../label';
 import { noop } from '../../../common/tests/support/test-helpers';
 
 import bundle from '../../nls/FileUploadInput';
 import * as baseCss from '../../../theme/default/base.m.css';
 import * as buttonCss from '../../../theme/default/button.m.css';
 import * as css from '../../../theme/default/file-upload-input.m.css';
 import * as fixedCss from '../../styles/file-upload-input.m.css';
+import * as labelCss from '../../../theme/default/label.m.css';
 
 const { it, describe } = intern.getInterface('bdd');
 const { messages } = bundle;
 
 describe('FileUploadInput', function() {
-	const WrappedButton = wrap(Button);
-	const WrappedDndLabel = wrap('span');
-	const WrappedOverlay = wrap('div');
+	const WrappedRoot = wrap('div');
+	const WrappedLabel = wrap('span');
+	const baseRootProperties = {
+		key: 'root',
+		classes: [null, fixedCss.root, css.root, false, false],
+		ondragenter: noop,
+		ondragover: noop,
+		ondrop: noop
+	};
 
 	const baseAssertion = assertion(function() {
 		return (
-			<div key="root" classes={[undefined, fixedCss.root, css.root, false, false]}>
-				<input
-					key="nativeInput"
-					accept={undefined}
-					aria="hidden"
-					classes={[baseCss.hidden]}
-					click={noop}
-					disabled={false}
-					multiple={false}
-					name={undefined}
-					onchange={noop}
-					required={false}
-					type="file"
-				/>
-				<WrappedButton
-					disabled={false}
-					onClick={noop}
-					theme={{
-						'@dojo/widgets/button': {
-							disabled: buttonCss.disabled,
-							label: buttonCss.label,
-							popup: buttonCss.popup,
-							pressed: buttonCss.pressed,
-							root: buttonCss.root
-						}
-					}}
-				>
-					{messages.chooseFiles}
-				</WrappedButton>
-				<WrappedDndLabel classes={[css.dndLabel]}>
-					{messages.orDropFilesHere}
-				</WrappedDndLabel>
-				<WrappedOverlay
-					key="overlay"
-					classes={[fixedCss.dndOverlay, css.dndOverlay, baseCss.hidden]}
-				/>
-			</div>
+			<WrappedRoot {...baseRootProperties}>
+				<div classes={[css.wrapper]}>
+					<input
+						key="nativeInput"
+						accept={undefined}
+						aria="hidden"
+						classes={[baseCss.hidden]}
+						click={noop}
+						disabled={false}
+						multiple={false}
+						name={undefined}
+						onchange={noop}
+						required={false}
+						type="file"
+					/>
+					<Button
+						disabled={false}
+						onClick={noop}
+						theme={{
+							'@dojo/widgets/button': {
+								disabled: buttonCss.disabled,
+								label: buttonCss.label,
+								popup: buttonCss.popup,
+								pressed: buttonCss.pressed,
+								root: buttonCss.root
+							}
+						}}
+					>
+						{messages.chooseFiles}
+					</Button>
+
+					<WrappedLabel classes={[css.dndLabel]}>{messages.orDropFilesHere}</WrappedLabel>
+				</div>
+			</WrappedRoot>
 		);
 	});
 
@@ -68,25 +73,44 @@ describe('FileUploadInput', function() {
 		r.expect(baseAssertion);
 	});
 
-	it('renders labels', function() {
-		const buttonLabel = 'Button label';
-		const dndLabel = 'Dnd label';
+	it('renders label', function() {
+		const label = 'Widget label';
 
 		const r = renderer(function() {
 			return (
 				<FileUploadInput>
 					{{
-						buttonLabel,
-						dndLabel
+						label
 					}}
 				</FileUploadInput>
 			);
 		});
 
 		r.expect(
-			baseAssertion
-				.setChildren(WrappedButton, () => [buttonLabel])
-				.setChildren(WrappedDndLabel, () => [dndLabel])
+			baseAssertion.prepend(WrappedRoot, () => [
+				<Label
+					disabled={false}
+					forId={'file-upload-input-test'}
+					hidden={false}
+					required={false}
+					theme={{
+						'@dojo/widgets/label': {
+							active: labelCss.active,
+							disabled: labelCss.disabled,
+							focused: labelCss.focused,
+							invalid: labelCss.invalid,
+							readonly: labelCss.readonly,
+							required: labelCss.required,
+							root: labelCss.root,
+							secondary: labelCss.secondary,
+							valid: labelCss.valid
+						}
+					}}
+					valid={true}
+				>
+					{label}
+				</Label>
+			])
 		);
 	});
 
@@ -95,6 +119,15 @@ describe('FileUploadInput', function() {
 			return <FileUploadInput allowDnd={false} />;
 		});
 
-		r.expect(baseAssertion.remove(WrappedDndLabel).remove(WrappedOverlay));
+		r.expect(
+			baseAssertion
+				.setProperties(WrappedRoot, {
+					...baseRootProperties,
+					ondragenter: false,
+					ondragover: false,
+					ondrop: false
+				})
+				.remove(WrappedLabel)
+		);
 	});
 });