Add FilePicker component

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

@@ -17,7 +17,9 @@ 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 { SvgIconProps } from '@mui/material/SvgIcon';
 
 const iconMap = new Map<string, React.ComponentType<SvgIconProps>>([
@@ -35,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/toolpad/propertyControls/file.tsx

@@ -0,0 +1,31 @@
+import { Typography } from '@mui/material';
+import * as React from 'react';
+import type { EditorProps } from '../../types';
+
+function FilePropEditor({ value = [] }: EditorProps<any[]>) {
+ const files = Array.from(value);
+ const hasSelectedFiles = files?.length > 0;
+
+ if (!hasSelectedFiles) {
+ return (
+ <Typography variant="body2" noWrap>
+ No files chosen
+ </Typography>
+ );
+ }
+
+ return (
+ <div style={{ width: '100%' }}>
+ <Typography variant="body2" paragraph sx={{ mb: 1, fontWeight: 700 }}>
+ Files:
+ </Typography>
+ {files.map(({ name }) => (
+ <Typography variant="body2" noWrap key={name} sx={{ mb: 0.5 }}>
+ {name}
+ </Typography>
+ ))}
+ </div>
+ );
+}
+
+export default FilePropEditor;

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

@@ -11,6 +11,7 @@ import SelectOptions from './SelectOptions';
 import HorizontalAlign from './HorizontalAlign';
 import VerticalAlign from './VerticalAlign';
 import RowIdFieldSelect from './RowIdFieldSelect';
+import file from './file';
 import { EditorProps } from '../../types';
 
 const propTypeControls: {
@@ -28,6 +29,7 @@ const propTypeControls: {
  RowIdFieldSelect,
  HorizontalAlign,
  VerticalAlign,
+ file,
 };
 
 function getDefaultControlForType(propType: PropValueType): React.FC<EditorProps<any>> | null {
@@ -44,6 +46,8 @@ function getDefaultControlForType(propType: PropValueType): React.FC<EditorProps
  return json;
  case 'event':
  return event;
+ case 'file':
+ return file;
  default:
  return null;
  }

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,94 @@
+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}
+ />
+ );
+}
+
+export default createComponent(FilePicker, {
+ argTypes: {
+ value: {
+ typeDef: { type: 'file' },
+ onChangeProp: 'onChange',
+ },
+ label: {
+ typeDef: { type: 'string' },
+ },
+ variant: {
+ typeDef: { type: 'string', enum: ['outlined', 'filled', 'standard'] },
+ defaultValue: 'outlined',
+ },
+ size: {
+ typeDef: { type: 'string', enum: ['small', 'normal'] },
+ defaultValue: 'small',
+ },
+ multiple: {
+ typeDef: { type: 'boolean' },
+ defaultValue: true,
+ },
+ fullWidth: {
+ typeDef: { type: 'boolean' },
+ },
+ disabled: {
+ typeDef: { type: 'boolean' },
+ },
+ sx: {
+ typeDef: { type: 'object' },
+ },
+ },
+});

packages/toolpad-components/src/index.tsx

@@ -20,5 +20,7 @@ export { default as Image } from './Image.js';
 
 export { default as DatePicker } from './DatePicker.js';
 
+export { default as FilePicker } from './FilePicker.js';
+
 export { CUSTOM_COLUMN_TYPES, NUMBER_FORMAT_PRESETS, inferColumns, parseColumns } from './DataGrid';
 export type { SerializableGridColumn, SerializableGridColumns, NumberFormat } from './DataGrid';

packages/toolpad-core/src/types.ts

@@ -75,7 +75,7 @@ export type BindableAttrEntries = [string, BindableAttrValue<any>][];
 export type SlotType = 'single' | 'multiple' | 'layout';
 
 export interface ValueTypeBase {
- type: 'string' | 'boolean' | 'number' | 'object' | 'array' | 'element' | 'event';
+ type: 'string' | 'boolean' | 'number' | 'object' | 'array' | 'element' | 'event' | 'file';
 }
 
 export interface StringValueType extends ValueTypeBase {
@@ -103,6 +103,10 @@ export interface ArrayValueType extends ValueTypeBase {
  schema?: string;
 }
 
+export interface FileValueType extends ValueTypeBase {
+ type: 'file';
+}
+
 export interface ElementValueType extends ValueTypeBase {
  type: 'element';
 }
@@ -138,15 +142,17 @@ export interface ArgControlSpec {
  | 'HorizontalAlign'
  | 'VerticalAlign'
  | 'event'
- | 'RowIdFieldSelect'; // Row id field specialized select
+ | 'RowIdFieldSelect' // Row id field specialized select
+ | 'file';
 }
 
 type PrimitiveValueType =
  | StringValueType
  | NumberValueType
  | BooleanValueType
  | ObjectValueType
- | ArrayValueType;
+ | ArrayValueType
+ | FileValueType;
 
 export type PropValueType = PrimitiveValueType | ElementValueType | EventValueType;