Add FilePicker component

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog/ComponentCatalogItem.tsx

@@ -17,6 +17,7 @@ import DateRangeIcon from '@mui/icons-material/DateRange';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import DashboardCustomizeSharpIcon from '@mui/icons-material/DashboardCustomizeSharp';
 import AddIcon from '@mui/icons-material/Add';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
 import NotesIcon from '@mui/icons-material/Notes';
 import AutoAwesomeMosaicIcon from '@mui/icons-material/AutoAwesomeMosaic';
 import { SvgIconProps } from '@mui/material/SvgIcon';
@@ -36,6 +37,7 @@ const iconMap = new Map<string, React.ComponentType<SvgIconProps>>([
  ['Switch', ToggleOnIcon],
  ['Radio', RadioButtonCheckedIcon],
  ['DatePicker', DateRangeIcon],
+ ['FilePicker', UploadFileIcon],
  ['Checkbox', CheckBoxIcon],
  ['CodeComponent', DashboardCustomizeSharpIcon],
  ['CreateNew', AddIcon],

packages/toolpad-app/src/toolpadComponents/index.tsx

@@ -33,6 +33,7 @@ const INTERNAL_COMPONENTS = new Map<string, ToolpadComponentDefinition>([
  ['DataGrid', { displayName: 'Data grid', builtIn: 'DataGrid' }],
  ['TextField', { displayName: 'Text field', builtIn: 'TextField' }],
  ['DatePicker', { displayName: 'Date picker', builtIn: 'DatePicker' }],
+ ['FilePicker', { displayName: 'File picker', builtIn: 'FilePicker' }],
  ['Text', { displayName: 'Text', builtIn: 'Text' }],
  ['Select', { displayName: 'Select', builtIn: 'Select' }],
  ['Paper', { displayName: 'Paper', builtIn: 'Paper' }],

packages/toolpad-components/src/FilePicker.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { TextField as MuiTextField, TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import { createComponent } from '@mui/toolpad-core';
+
+interface FullFile {
+ name: string;
+ type: string;
+ size: number;
+ base64: null | string;
+}
+
+export type Props = MuiTextFieldProps & {
+ multiple: boolean;
+ onChange: (files: FullFile[]) => void;
+};
+
+const readFile = async (file: Blob): Promise<string> => {
+ return new Promise((resolve, reject) => {
+ const readerBase64 = new FileReader();
+
+ readerBase64.onload = (event) => {
+ if (!event.target) {
+ reject();
+ return;
+ }
+
+ resolve(event.target.result as string);
+ };
+
+ readerBase64.readAsDataURL(file);
+ });
+};
+
+function FilePicker({ multiple, onChange, ...props }: Props) {
+ const handleChange = async (changeEvent: React.ChangeEvent<HTMLInputElement>) => {
+ const filesPromises = Array.from(changeEvent.target.files || []).map(async (file) => {
+ const fullFile: FullFile = {
+ name: file.name,
+ type: file.type,
+ size: file.size,
+ base64: await readFile(file),
+ };
+
+ return fullFile;
+ });
+
+ const files = await Promise.all(filesPromises);
+
+ onChange(files);
+ };
+
+ return (
+ <MuiTextField
+ {...props}
+ type="file"
+ value={undefined}
+ inputProps={{ multiple }}
+ onChange={handleChange}
+ InputLabelProps={{ shrink: true }}
+ />
+ );
+}
+
+export default createComponent(FilePicker, {
+ helperText: 'File picker component.\nIt allows users to take select and read files.',
+ argTypes: {
+ value: {
+ typeDef: { type: 'object' },
+ visible: false,
+ onChangeProp: 'onChange',
+ },
+ label: {
+ helperText: 'A label that describes the content of the FilePicker. e.g. "Profile Image".',
+ typeDef: { type: 'string' },
+ },
+ multiple: {
+ helperText: 'Whether the FilePicker should accept multiple files.',
+ typeDef: { type: 'boolean' },
+ defaultValue: true,
+ },
+ disabled: {
+ helperText: 'Whether the FilePicker is disabled.',
+ typeDef: { type: 'boolean' },
+ },
+ sx: {
+ typeDef: { type: 'object' },
+ },
+ },
+});

packages/toolpad-components/src/index.tsx

@@ -20,6 +20,8 @@ export { default as Image } from './Image.js';
 
 export { default as DatePicker } from './DatePicker.js';
 
+export { default as FilePicker } from './FilePicker.js';
+
 export { default as Tabs } from './Tabs.js';
 
 export { default as Container } from './Container.js';

test/integration/file-picker/dom.json

@@ -0,0 +1,132 @@
+{
+ "root": "6j034xh",
+ "nodes": {
+ "0d23u7b": {
+ "id": "0d23u7b",
+ "name": "pageRow2",
+ "type": "element",
+ "props": {},
+ "layout": {},
+ "parentId": "6k134xi",
+ "attributes": {
+ "component": {
+ "type": "const",
+ "value": "PageRow"
+ }
+ },
+ "parentProp": "children",
+ "parentIndex": "a2"
+ },
+ "5z83u5r": {
+ "id": "5z83u5r",
+ "name": "text1",
+ "type": "element",
+ "props": {
+ "value": {
+ "type": "jsExpression",
+ "value": "filePicker.value && filePicker.value[0].base64 ? \"Uploaded\" : \"Empty\"\n"
+ }
+ },
+ "layout": {},
+ "parentId": "0d23u7b",
+ "attributes": {
+ "component": {
+ "type": "const",
+ "value": "Text"
+ }
+ },
+ "parentProp": "children",
+ "parentIndex": "a1"
+ },
+ "6j034xh": {
+ "id": "6j034xh",
+ "name": "Application",
+ "type": "app",
+ "parentId": null,
+ "attributes": {},
+ "parentProp": null,
+ "parentIndex": null
+ },
+ "6k134xi": {
+ "id": "6k134xi",
+ "name": "page1",
+ "type": "page",
+ "parentId": "6j034xh",
+ "attributes": {
+ "title": {
+ "type": "const",
+ "value": "Page 1"
+ },
+ "module": {
+ "type": "const",
+ "value": "// All properties of this object will be available on the global scope in bindings\nexport const globalScope = {\n value: 3,\n};\n"
+ }
+ },
+ "parentProp": "pages",
+ "parentIndex": "a0"
+ },
+ "9e23ub5": {
+ "id": "9e23ub5",
+ "name": "pageRow",
+ "type": "element",
+ "props": {},
+ "layout": {},
+ "parentId": "6k134xi",
+ "attributes": {
+ "component": {
+ "type": "const",
+ "value": "PageRow"
+ }
+ },
+ "parentProp": "children",
+ "parentIndex": "a1V"
+ },
+ "f403uuw": {
+ "id": "f403uuw",
+ "name": "filePicker",
+ "type": "element",
+ "props": {
+ "label": {
+ "type": "const",
+ "value": "File pick"
+ },
+ "variant": {
+ "type": "const",
+ "value": "filled"
+ }
+ },
+ "layout": {},
+ "parentId": "9e23ub5",
+ "attributes": {
+ "component": {
+ "type": "const",
+ "value": "FilePicker"
+ }
+ },
+ "parentProp": "children",
+ "parentIndex": "a0"
+ },
+ "qc03u5d": {
+ "id": "qc03u5d",
+ "name": "text",
+ "type": "element",
+ "props": {
+ "value": {
+ "type": "jsExpression",
+ "value": "filePicker.value && filePicker.value[0].name\n"
+ }
+ },
+ "layout": {},
+ "parentId": "0d23u7b",
+ "attributes": {
+ "component": {
+ "type": "const",
+ "value": "Text"
+ }
+ },
+ "parentProp": "children",
+ "parentIndex": "a0"
+ }
+ },
+ "version": 5
+}

test/integration/file-picker/index.spec.ts

@@ -0,0 +1,30 @@
+import * as path from 'path';
+import { ToolpadEditor } from '../../models/ToolpadEditor';
+import { test, expect } from '../../playwright/test';
+import { readJsonFile } from '../../utils/fs';
+import generateId from '../../utils/generateId';
+
+test('File picker component', async ({ page, browserName, api }) => {
+ const dom = await readJsonFile(path.resolve(__dirname, './dom.json'));
+ const testFilePath = path.resolve(__dirname, './test.txt');
+
+ const app = await api.mutation.createApp(`App ${generateId()}`, {
+ from: { kind: 'dom', dom },
+ });
+
+ await page.pause();
+
+ const editorModel = new ToolpadEditor(page, browserName);
+ editorModel.goto(app.id);
+
+ await editorModel.waitForOverlay();
+
+ const filePicker = editorModel.pageRoot.locator('label');
+
+ await expect(filePicker).toBeVisible();
+
+ await filePicker.setInputFiles(testFilePath);
+
+ await expect(editorModel.pageRoot.getByText('test.txt')).toBeVisible();
+ await expect(editorModel.pageRoot.getByText('Uploaded')).toBeVisible();
+});

test/integration/file-picker/test.txt

@@ -0,0 +1 @@
+works