Mobx React Form File Upload

Skill: mobx-react-form-file-upload

Mission

Guide the user through implementing file upload fields in mobx-react-form, including standard file inputs and drag-and-drop zones.

Use this skill when the user needs to:

• Create file upload fields (single or multiple)
• Implement drag-and-drop upload zones
• Access selected/dropped files via field.files
• Validate file types and sizes
• Preview uploaded files (e.g., images)
• Handle file drops with the onDrop hook

Field Setup

Basic file field

const fields = {
  myFileUpload: {
    type: 'file',
    hooks: {
      onDrop: field => console.log('Files dropped:', field.files),
    },
  },
};

The type: 'file' tells the form to store FileList objects instead of strings.

Multiple file field

const fields = {
  documents: {
    type: 'file',
    hooks: {
      onDrop: field => {
        console.log('Files:', field.files);
      },
    },
  },
};

The multiple HTML attribute is set on the `` element.

Standard File Input

const FileInput = observer(({ field }) => (
  
    
    {field.files && (
      {field.files.length} file(s) selected
    )}
  
));

Drag-and-Drop Zone

const DropZone = observer(({ field }) => (
   e.preventDefault()}
    onDrop={(e) => {
      e.preventDefault();
      field.hooks.onDrop(field, e);
    }}
    className="drop-zone"
  >
    
    Drop files here
    or click to browse
    
  
));

Field Properties for File Fields

field.files

Returns the current FileList (or array of dropped files):

// After drop or selection
const files = Array.from(field.files || []);
files.forEach(file => {
  console.log(file.name, file.size, file.type);
});

field.value

For file fields, field.value is typically a reference to the file object or null.

onDrop Hook

const fields = {
  avatar: {
    type: 'file',
    hooks: {
      onDrop(field, e) {
        const files = Array.from(field.files || []);
        files.forEach(file => {
          console.log('Dropped:', file.name);
        });
      },
    },
  },
};

File Preview with FileReader

const fields = {
  avatar: {
    type: 'file',
    hooks: {
      onDrop(field) {
        const file = field.files?.[0];
        if (file && file.type.startsWith('image/')) {
          const reader = new FileReader();
          reader.onload = (e) => {
            field.set('extra', {
              previewUrl: e.target.result,
              fileName: file.name,
              fileSize: file.size,
            });
          };
          reader.readAsDataURL(file);
        }
      },
    },
  },
};

In the component:

const FilePreview = observer(({ field }) => (
  
    
    {field.extra?.previewUrl && (
      
    )}
  
));

Validation with File Fields

Required file

const fields = {
  avatar: {
    type: 'file',
    label: 'Profile Picture',
    rules: 'required',
  },
};

Custom validation (on change/drop)

const fields = {
  avatar: {
    type: 'file',
    label: 'Profile Picture',
    hooks: {
      onChange(field) {
        const file = field.files?.[0];
        if (!file) return;

        // Check file type
        if (!file.type.startsWith('image/')) {
          field.invalidate('Only image files are allowed');
          return;
        }

        // Check file size (5MB max)
        if (file.size > 5 * 1024 * 1024) {
          field.invalidate('File must be less than 5MB');
          return;
        }

        // Clear error if valid
        field.resetValidation();
      },
    },
  },
};

Custom validation on drop

const fields = {
  documents: {
    type: 'file',
    hooks: {
      onDrop(field) {
        const files = Array.from(field.files || []);
        const maxSize = 10 * 1024 * 1024; // 10MB
        const invalid = files.some(f => f.size > maxSize);
        if (invalid) {
          field.invalidate('Each file must be under 10MB');
        }
      },
    },
  },
};

Rendering File Info

const FileList = observer(({ field }) => (
  
    {field.files && Array.from(field.files).map((file, i) => (
      
        {file.name}
        {(file.size / 1024).toFixed(1)} KB
        {file.type || 'unknown'}
      
    ))}
  
));

Combined: Click-to-Browse + Drag-and-Drop

const FileUpload = observer(({ field }) => (
  
     e.preventDefault()}
      onDrop={(e) => {
        e.preventDefault();
        field.hooks.onDrop(field, e);
      }}
    >
      
      Drop files here or click to browse
    
    
    {field.files && (
      
        {Array.from(field.files).map((file) => (
          {file.name}
        ))}
      
    )}
    {field.error && {field.error}}
  
));

Binding Drop Events Without type: 'file'

If you prefer not to set type: 'file', delegate the onChange manually:

Key Takeaways

1. type: 'file': Declares a file field — stores File objects instead of strings.
2. field.files: Access the selected/dropped file list.
3. onDrop hook: Handles drag-and-drop events declaratively.
4. Validation works: Add rules and custom validation for file type, size, count.
5. FileReader for preview: Combine with FileReader for image previews or parsing.
6. Two modes: Standard `` for click-to-browse, or custom drop zone for drag-and-drop.
7. Multiple files: Use the multiple HTML attribute on the input element.

Related Skills

• [mobx-react-form-api](../mobx-react-form-api/SKILL.md) — Core API prerequisite
• [mobx-react-form-validation](../mobx-react-form-validation/SKILL.md) — File validation
• [mobx-react-form-events](../mobx-react-form-events/SKILL.md) — Event hooks (onDrop)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: foxhound87
• Source: foxhound87/skills
• License: MIT

Install and usage instructions live in the source repository linked above.