feat: file upload

src/examples/src/config.tsx

@@ -284,6 +284,17 @@ import InitialStateTree from './widgets/tree/InitialState';
 import PopupConfirmation from './widgets/popup-confirmation/Basic';
 import PopupConfirmationUnderlay from './widgets/popup-confirmation/Underlay';
 import ClickableCard from './widgets/card/ClickableCard';
+import BasicFileUploadInput from './widgets/file-upload-input/Basic';
+import DisabledFileUploadInput from './widgets/file-upload-input/Disabled';
+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 ControlledFileUploader from './widgets/file-uploader/Controlled';
+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';
 
 import * as dojoDarkVariant from '@dojo/widgets/theme/dojo/variants/dark.m.css';
 import * as materialDarkVariant from '@dojo/widgets/theme/material/variants/dark.m.css';
@@ -810,6 +821,76 @@ export const config = {
 				}
 			}
 		},
+		'file-upload-input': {
+			filename: 'index',
+			overview: {
+				example: {
+					title: 'Basic FileUploadInput',
+					filename: 'Basic',
+					module: BasicFileUploadInput
+				}
+			},
+			examples: [
+				{
+					title: 'Disabled FileUploadInput',
+					filename: 'Disabled',
+					module: DisabledFileUploadInput
+				},
+				{
+					title: 'Multiple FileUploadInput',
+					filename: 'Multiple',
+					module: MultipleFileUploadInput,
+					description:
+						'Demonstrates using child `content` property to render information about the uploaded files that is available to the `onValue` callback.'
+				},
+				{
+					title: 'FileUploadInput with label',
+					filename: 'Labelled',
+					module: LabelledFileUploadInput
+				},
+				{
+					title: 'FileUploadInput with no DnD',
+					filename: 'NoDrop',
+					module: NoDropFileUploadInput
+				}
+			]
+		},
+		'file-uploader': {
+			filename: 'index',
+			overview: {
+				example: {
+					filename: 'Basic',
+					module: BasicFileUploader
+				}
+			},
+			examples: [
+				{
+					title: 'Disabled FileUploader',
+					filename: 'Disabled',
+					module: DisabledFileUploader
+				},
+				{
+					title: 'Multiple FileUploader',
+					filename: 'Multiple',
+					module: MultipleFileUploader
+				},
+				{
+					title: 'Validated FileUploader',
+					filename: 'Validated',
+					module: ValidatedFileUploader
+				},
+				{
+					title: 'FileUploader with custom validator',
+					filename: 'CustomValidator',
+					module: CustomValidatorFileUploader
+				},
+				{
+					title: 'Controlled FileUploader',
+					filename: 'Controlled',
+					module: ControlledFileUploader
+				}
+			]
+		},
 		'floating-action-button': {
 			overview: {
 				example: {

src/examples/src/widgets/file-upload-input/Basic.tsx

@@ -0,0 +1,21 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import icache from '@dojo/framework/core/middleware/icache';
+import { FileUploadInput } from '@dojo/widgets/file-upload-input';
+import Example from '../../Example';
+
+const factory = create({ icache });
+
+export default factory(function Basic({ middleware: { icache } }) {
+	const selectedFiles: File[] = icache.getOrSet('selectedFiles', []);
+
+	function onValue(files: File[]) {
+		icache.set('selectedFiles', files);
+	}
+
+	return (
+		<Example>
+			<FileUploadInput onValue={onValue} />
+			<div>Selected file: {selectedFiles.length ? selectedFiles[0].name : 'none'}</div>
+		</Example>
+	);
+});

src/examples/src/widgets/file-upload-input/Disabled.tsx

@@ -0,0 +1,17 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import { FileUploadInput } from '@dojo/widgets/file-upload-input';
+import Example from '../../Example';
+
+const factory = create();
+
+export default factory(function Disabled() {
+	function onValue() {
+		// do something with files
+	}
+
+	return (
+		<Example>
+			<FileUploadInput disabled onValue={onValue} />
+		</Example>
+	);
+});

src/examples/src/widgets/file-upload-input/Labelled.tsx

@@ -0,0 +1,25 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import icache from '@dojo/framework/core/middleware/icache';
+import { FileUploadInput } from '@dojo/widgets/file-upload-input';
+import Example from '../../Example';
+
+const factory = create({ icache });
+
+export default factory(function Labelled({ middleware: { icache } }) {
+	const selectedFiles: File[] = icache.getOrSet('selectedFiles', []);
+
+	function onValue(files: File[]) {
+		icache.set('selectedFiles', files);
+	}
+
+	return (
+		<Example>
+			<FileUploadInput accept="image/*" onValue={onValue}>
+				{{
+					label: 'Upload a profile image'
+				}}
+			</FileUploadInput>
+			<div>Selected file: {selectedFiles.length ? selectedFiles[0].name : 'none'}</div>
+		</Example>
+	);
+});

src/examples/src/widgets/file-upload-input/Multiple.tsx

@@ -0,0 +1,49 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import icache from '@dojo/framework/core/middleware/icache';
+import { FileUploadInput } from '@dojo/widgets/file-upload-input';
+import Example from '../../Example';
+
+import * as css from './multiple.m.css';
+
+const factory = create({ icache });
+
+export default factory(function Multiple({ middleware: { icache } }) {
+	const selectedFiles: File[] = icache.getOrSet('selectedFiles', []);
+
+	function onValue(files: File[]) {
+		icache.set('selectedFiles', files);
+	}
+
+	return (
+		<Example>
+			<FileUploadInput onValue={onValue} multiple>
+				{{
+					content: selectedFiles.length ? (
+						<table classes={[css.table]}>
+							<thead>
+								<th>Name</th>
+								<th>Modified</th>
+								<th>Type</th>
+								<th>Bytes</th>
+							</thead>
+							<tbody>
+								{selectedFiles.map(function(file) {
+									return (
+										<tr key={file.name}>
+											<td>{file.name}</td>
+											<td>{new Date(file.lastModified).toLocaleString()}</td>
+											<td>{file.type}</td>
+											<td>{String(file.size)}</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					) : (
+						''
+					)
+				}}
+			</FileUploadInput>
+		</Example>
+	);
+});

src/examples/src/widgets/file-upload-input/NoDrop.tsx

@@ -0,0 +1,21 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import icache from '@dojo/framework/core/middleware/icache';
+import { FileUploadInput } from '@dojo/widgets/file-upload-input';
+import Example from '../../Example';
+
+const factory = create({ icache });
+
+export default factory(function NoDrop({ middleware: { icache } }) {
+	const selectedFiles: File[] = icache.getOrSet('selectedFiles', []);
+
+	function onValue(files: File[]) {
+		icache.set('selectedFiles', files);
+	}
+
+	return (
+		<Example>
+			<FileUploadInput allowDnd={false} onValue={onValue} />
+			<div>Selected file: {selectedFiles.length ? selectedFiles[0].name : 'none'}</div>
+		</Example>
+	);
+});

src/examples/src/widgets/file-upload-input/multiple.m.css

@@ -0,0 +1,3 @@
+.table {
+	width: 100%;
+}

src/examples/src/widgets/file-upload-input/multiple.m.css.d.ts

@@ -0,0 +1 @@
+export const table: string;

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

@@ -0,0 +1,17 @@
+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 Basic() {
+	function onValue() {
+		// do something with files
+	}
+
+	return (
+		<Example>
+			<FileUploader onValue={onValue} />
+		</Example>
+	);
+});

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

@@ -0,0 +1,46 @@
+import { create, tsx } from '@dojo/framework/core/vdom';
+import icache from '@dojo/framework/core/middleware/icache';
+import FileUploader, { FileWithValidation } from '@dojo/widgets/file-uploader';
+import Example from '../../Example';
+
+const factory = create({ icache });
+
+export default factory(function Controlled({ middleware: { icache } }) {
+	function validateFiles(files: FileWithValidation[]) {
+		return files.map(function(file) {
+			// Files bigger than 100KB are marked invalid
+			const valid = file.size <= 100 * 1024;
+			file.valid = valid;
+			// Each file can include a message for the valid state as well as invalid
+			file.message = valid ? 'File is valid' : 'File is too big';
+
+			return file;
+		});
+	}
+
+	// onValue receives any files selected from the file dialog or
+	// dragged and dropped from the OS
+	function onValue(files: File[]) {
+		// Validation and manipulation of the selected files is done
+		// entirely external to the FileUploader widget.
+		// This line both validates the files and truncates the total count to 4.
+		const validatedFiles = validateFiles(files).slice(0, 4);
+
+		icache.set('files', validatedFiles);
+	}
+
+	// If FileUploader receives a value for `files` then it will only render that.
+	// If it receives a falsy value then it will render whatever files the user selects.
+	// To ensure no files are rendered pass an empty array.
+	const files = icache.getOrSet('files', []);
+
+	return (
+		<Example>
+			<FileUploader files={files} multiple onValue={onValue}>
+				{{
+					label: 'Controlled FileUploader'
+				}}
+			</FileUploader>
+		</Example>
+	);
+});

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

@@ -0,0 +1,32 @@
+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 onValue() {
+		// do something with files
+	}
+
+	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} onValue={onValue}>
+				{{
+					label: 'Upload a file named "validfile.txt"'
+				}}
+			</FileUploader>
+		</Example>
+	);
+});

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

@@ -0,0 +1,17 @@
+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 Disabled() {
+	function onValue() {
+		// do something with files
+	}
+
+	return (
+		<Example>
+			<FileUploader disabled onValue={onValue} />
+		</Example>
+	);
+});

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

@@ -0,0 +1,17 @@
+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 Multiple() {
+	function onValue() {
+		// do something with files
+	}
+
+	return (
+		<Example>
+			<FileUploader multiple onValue={onValue} />
+		</Example>
+	);
+});

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

@@ -0,0 +1,20 @@
+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 Validated() {
+	const accept = 'image/jpeg,image/png';
+	const maxSize = 50000;
+
+	function onValue() {
+		// do something with files
+	}
+
+	return (
+		<Example>
+			<FileUploader multiple accept={accept} maxSize={maxSize} onValue={onValue} />
+		</Example>
+	);
+});