viclafouch / mui-file-input

A file input designed for the React library MUI

Hi there 👋

Website • Twitter • Linkedin

I'm a frontend developer and technical writer based in France. I love teaching web development and all kinds of other things online and I'm ready for discussions and making new projects, write blogs on Dev.to etc.

• 💼 Currently working at Frichti
  
• 🔖 Discover my Curriculum Vitae
  
• ✍🏻 I wrote dev articles on dev.to
  
• 📫 Contact me @TrustedSheriff

My skills

My song of the moment

My last 3 DEV articles

• 👑 Create a secure Chat Application with React Hooks, Firebase and Seald 🔐
• 🍿 Publish your own ESLint / Prettier config for React Projects on NPM 📦
• 🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

mui-file-input's Issues

Error [ERR_REQUIRE_ESM]: require() of ES Module

Describe the bug
Using the component causes the following error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /myapp/node_modules/mui-file-input/node_modules/pretty-bytes/index.js from /myapp/node_modules/mui-file-input/dist/mui-file-input.umd.js not supported.

Instead change the require of index.js in /myapp/node_modules/mui-file-input/dist/mui-file-input.umd.js to a dynamic import() which is available in all CommonJS modules.

To Reproduce
Install the package
import MuiFileInput
Use the MuiFileInput in a page/component

Desktop (please complete the following information):

• Mac OS 13.3.1 (a)
• Chrome
• Version 113.0.5672.126

Additional context
Changing the require in dist to import() fixed it.

"Select, clear, select the same file" won't work on v4.0.2

(First of all, thanks for your fabulous work. I really enjoy it.)

As stated in the title, select a file, clear the file and then select the same file is not working. I.e. MuiFileInput does not show any thing.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://viclafouch.github.io/mui-file-input/docs/playground/
2. Click "Edit in CodeSandbox"
3. Click "package.json" on the left pane.
4. Change "mui-file-input" version to "4.0.2"
5. Test MuiFileInput with the above sequence: select a file, clear the file, and select the same file again.

Expected behavior
Should show the file just like MuiFileInput v3.0.0.

Desktop (please complete the following information):

• OS: macOS Ventura
• Browser: Chrome
• Version:119.0.6045.159 (Official Build) (x86_64)

Keep up the good work! Hope this get fixed soon. :-)

Code example in API reference is outdated

In the code example, it's still displaying closeButtonProps - should be clearIconButtonProps.

https://viclafouch.github.io/mui-file-input/docs/api-reference/#cleariconbuttonprops

Pass InputAdornment props to startAdornment

I am using the component and want the start icon to be clickable and also open the file picker window like input does

I found that passing disablePointerEvents={true} to InputAdornment component should help
https://mui.com/material-ui/api/input-adornment/#input-adornment-prop-disablePointerEvents

But I can't do it because it's hardcoded in lib:

mui-file-input/src/index.tsx

Lines 148 to 151 in f07cc45

	InputProps={{
	startAdornment: (
	<InputAdornment position="start">{startAdornment}</InputAdornment>
	),

placeholder don't show

<MuiFileInput
  placeholder="Insert a file"
  value={addState.file}
/>

the placeholder is not shown
I looked in the inspector, it is not in the DOM either

Cannot use import statement outside a module

Hi,

An error occurs in the development environment :

This error occurs after reloading the page.
This error does not occur in version 3.0.0 and I haven't checked if the error occurs in version 3.0.1

"mui-file-input": "^3.0.2",
"next": "^13.4.19",
"react": "18.2.0",

EDIT : after reinstalling the "mui-file-input": "3.0.0" package, I get the same error

Event Listener for Clear

How can we assign an event when the little (x) clear button is pressed to clear the file input?

I suppose we can just useEffect and react when file input changes, but it would be nice to have a cleaner way like
<MuiFileInput onClear={ () => {} } />

File type accept

Parameter to change the number of character before trunking of file name.

Hi,

I have a problem with the file name displayed in the control. It's limited to a certain fixed number of characters. In my case, I expand the control with the "fullWidth" parameter. The border and the size part are correctly expanded along the form but the file name still trunked with about 18 characters "filename_...xyz.uvw" (leaving much of the control empty).

I found in the code that this text is trunked at 20. Is it possible to change this fixed value to a parameter? Then we can choose it in the view (with a default value of 20).

I think, it's not the best solution because of font behavior (non monospaced typefaces) but a easy to implement solution.

Regards,

Vincent

Drag and drop

Is your feature request related to a problem? Please describe.
Drag and drop is a more-or-less common feature of file input fields.

Describe the solution you'd like
A simple react-dropzone impl might be good. Else, if people think it might increase bundle size, a few official examples in the documentation would help.

Describe alternatives you've considered
A custom component which already does 60-70% of what mui-file-input does.

Cannot change the placeholder font color

Describe the bug
The default shade of grey used for placeholder text on the MuiFileInput component does not meet the W3C minimum contrast requirement. I tried changing the color of the placeholder text using the sx property, but it does not seem to work. I can easily change the font size using this method, but the color stays the same.

Code used to change font size (this works):

<MuiFileInput
    multiple
    placeholder="Click here and select file(s)"
    value={selectedFiles}
    onChange={handleChange}
    hideSizeText
    sx={{
        '& .MuiFileInput-placeholder': {
            fontSize: 20
        },
    }}
/>

Code used to change font color (this does NOT work):

<MuiFileInput
    multiple
    placeholder="Click here and select file(s)"
    value={selectedFiles}
    onChange={handleChange}
    hideSizeText
    sx={{
        '& .MuiFileInput-placeholder': {
            color: 'black'
        },
    }}
/>

Expected behavior
I should be able to change the color of the placeholder text using sx

Package not recognized if I install through pnpm

I installed the package through pnpm and the component is not being recognized. Even if I add import manually import { MuiFileInput } from 'mui-file-input'

Cannot be build in the new version of [email protected]

 ⨯ C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\node_modules\mui-file-input\dist\mui-file-inp
ut.es.js:1
import { jsxs as f, jsx as o } from "react/jsx-runtime";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:74:18)
    at wrapSafe (node:internal/modules/cjs/loader:1141:20)
    at Module._compile (node:internal/modules/cjs/loader:1182:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at mod.require (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\node_modules\next\dist\serve
r\require-hook.js:64:28)
    at require (node:internal/modules/cjs/helpers:103:18)
    at mui-file-input (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\.next\server\pages\client
\files.js:4169:18)
    at __webpack_require__ (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\.next\server\webpack
-runtime.js:33:43)
    at eval (webpack-internal:///./components/CreateAttachmentModal.tsx:43:73)
    at __webpack_require__.a (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///./components/CreateAttachmentModal.tsx:1:21)
    at __webpack_require__.a (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///./components/CreateAttachmentModal.tsx:1:21)
    at ./components/CreateAttachmentModal.tsx (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\.next\server\pages\client\files.js:2355:1) {
    at ./components/CreateAttachmentModal.tsx (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\.next\server\pages\client\files.js:2355:1) {
    at ./components/CreateAttachmentModal.tsx (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\.next\server\pages\client\files.js:2355:1) {
    at ./components/CreateAttachmentModal.tsx (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\.next\server\pages\client\files.js:2355:1) {
    at ./components/CreateAttachmentModal.tsx (C:\Users\wacanam\ReactJS\projects\HIMS.Processing-FrontEnd\.
next\server\pages\client\files.js:2355:1) {
  page: '/client/files'
}
}

support accept props

Implement `accept`

Is your feature request related to a problem? Please describe.
I would like to filter the types of files the user can upload, e.g. accept=".txt,text/plain"

Describe the solution you'd like
Pass the accept prop to the file input

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

Describe alternatives you've considered
N/A

Additional context
N/A

Placeholder not rendered

The placeholder text is not showing when rendered unless a file is chose and then removed.

To Reproduce
Steps to reproduce the behavior:

1. Use MuiFileInput with a placeholder prop
2. Load the page
3. Only the clip icon is showing

Usage (with react-hook-form):

<Controller
   control={ control }
   name="profilePicture"
   render={ ({ field, fieldState }) => (
       <MuiFileInput
           label="Profile Picture"
           placeholder="Choose an image"
           { ...field }
           helperText={ fieldState.error ? "File is invalid" : "" }
           error={ !!fieldState.error }
           inputProps={{ accept: ".png, .jpg, .png, .jpeg" }}
           fullWidth
       />
   )}
/>

Expected behavior
I would expect the placeholder text to be showing at all times if no file is choose.

Screenshots

Desktop:

• OS: Windows 11
• Browser: Chrome
• Version: 116.0.5845.96

Warnings about pseudo classes in console

Describe the bug
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type". It appears when I try to add files.

To Reproduce
Steps to reproduce the behavior:

1. Click on the file field
2. Add a file
3. In a browser console you can see a warning "The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"

Desktop (please complete the following information):

• OS: Mac OS 13.4.1
• Browser Chrome
• 115.0.5790.170 (Official Build) (arm64)

How to use multiple file upload with TypeScript and ReactHookForm?

How to use multiple file uploads with TypeScript and ReactHookForm?

The CodeSandbox on the react-hook-form page doesn't work
https://codesandbox.io/s/react-hook-form-with-mui-file-input-llrkce?fontsize=14&hidenavigation=1&theme=dark

SSR errors

Describe the bug

This React component can't be server side rendered for 2 reasons I've discovered so far:

1. The use of the File global that is present in browsers but not (yet) in Node.js, without guarding with typeof File:

   mui-file-input/src/shared/helpers/file.ts

   Line 8 in d94b191

   return value instanceof File

   This causes a React SSR error like this:

   ReferenceError: File is not defined

2. The input element ID is random, and differs between the server and client renders:

   mui-file-input/src/components/Input/Input.tsx

   Lines 15 to 17 in d94b191

   	const [id] = React.useState<string>(() => {
   	return generateUuid()
   	})

   This causes a React post-SSR hydration error like this:

   next-dev.js?3515:20 Warning: Prop id did not match. Server: "_iosez6rge" Client: "_ah0owq8nl"

To Reproduce

Import and use the React component MuiFileInput in a Next.js page, and attempt to load that page in a web browser.

Expected behavior

The page server side renders without React rendering and post-SSR hydration errors.

Screenshots

N/A.

Desktop (please complete the following information):

N/A.

Smartphone (please complete the following information):

N/A.

Additional context

N/A.

support accept props

Allow CloseButton title and aria-label props customization

Is your feature request related to a problem? Please describe.
I use the mui-file-input in an app that supports different languages, but i can't change the language of the close button component.

Describe the solution you'd like
Add props for the title and aria label

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

React Hook Form "Function components cannot be given refs"

Describe the bug
When using MUI File Input with React Hook Form, this stack trace is in the console:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? at V (https://llrkce.csb.app/node_modules/mui-file-input/dist/mui-file-input.umd.js:23:603) at exports.Controller (https://llrkce.csb.app/node_modules/react-hook-form/dist/index.cjs.js:1:21871) at form at App (https://llrkce.csb.app/src/index.js:18:34)

To Reproduce
Steps to reproduce the behavior:
Load codesandbox of react hook form example.
https://codesandbox.io/s/react-hook-form-with-mui-file-input-llrkce?fontsize=14&hidenavigation=1&theme=dark

Desktop (please complete the following information):
Windows, Chrome

App crashing when installing the component

Describe the bug
When I install the component on my app it stops working.

To Reproduce
Steps to reproduce the behavior:

1. run npm install mui-file-input
2. run npm run dev to start your application
3. you will see a wite screen and if you open the browser dev-tools you will see the error shown on the screen shot below.

Expected behavior
It should not crash my application.

Screenshots

https://stackoverflow.com/questions/74542488/react-material-ui-createtheme-default-is-not-a-function

Desktop (please complete the following information):

• OS: IOS
• Browser chrome
• Version MUI version: 5.14.1

Additional context
I've searched the error on the internet thinking it was my problem but if I uninstall the component it stops crashing. Maybe this stack overflow issue might help: https://stackoverflow.com/questions/74542488/react-material-ui-createtheme-default-is-not-a-function

Version 3.0.2 fails to build with nextjs

Describe the bug
next build fails with the following error:

info  - Collecting page data ./Users/timecklund/git/portal/node_modules/mui-file-input/dist/mui-file-input.es.js:1
import { jsxs as f, jsx as o } from "react/jsx-runtime";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at 70637 (/Users/timecklund/git/portal/.next/server/pages/parents-dashboard/child-info.js:3340:18)
    at __webpack_require__ (/Users/timecklund/git/portal/.next/server/webpack-runtime.js:25:42)

transpilePackages: ['mui-file-input'], did not help

To Reproduce
Steps to reproduce the behavior:
npm run build to build the nextjs application

Desktop (please complete the following information):

• OS: OS X

Additional context
The problem exists in 3.0.1 and 3.0.2, downgrading to version 3.0.0 fixes the problem

I got error while using it in next js

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Install using

// with npm
npm install mui-file-input

// with yarn
yarn add mui-file-input

2. Use typescript in your project
3. Just use sample code provided here : https://www.npmjs.com/package/mui-file-input
4. Use Next JS latest version
5. You will see the following error
   Failed to compile
   ./node_modules/@mui/material/node_modules/react-is/index.js
   Module build failed: Error: ENOENT: no such file or directory, open '/workspaces/AlumTecRedesign/node_modules/@mui/material/node_modules/react-is/index.js'

Expected behavior
It must work as a normal file picker but it dosent work in next js

Screenshots
Here is the screenshot of the error

Desktop (please complete the following information):

• OS: MAC OS(Mac Book Pro)
• Browser : Chrome
• Version : 116.0.5845.140 (Official Build) (x86_64)

Smartphone (please complete the following information):

• Device: N/A
• OS: N/A
• Browser N/A
• Version N/A

Additional context
Using next js latest version and using typescript and tailwind css also but dont know the reason for error

Name each file for multiple files

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
right now I just see x files when multiple files are uploaded I want the names of each files so the user can pick and choose which files to remove from the list

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Yup Validation

First of all thank you so much for this package I love the look and feel!

I am not sure if this is the right place for it but I was wondering if you had any examples of working with Yup validation when using React Hook Form? I am having trouble getting that to work vs the fieldState validation.

Thank you!

Warning: Prop `id` did not match. Server: ":R15aljt6jdacq:" Client: ":R4lamfkqdl9j9:"

Hello,

when i try to render the component using the "use client" directive, the console throws below warning.

Warning: Prop id did not match. Server: ":R15aljt6jdacq:" Client: ":R4lamfkqdl9j9:"

i am using Next JS 13.4.11 & MUI-file-input package 2.0.6

React hook form bug if MuiFileInput is required

Describe the bug
Within a react hook form if the MuiFileInput is required the validation does not work

To Reproduce
Steps to reproduce the behavior:
<Controller rules={{ required: true }} control={control} name={"consumptionFile"} render={({ field }) => ( <MuiFileInput required {...field} /> )} />

The form can't be submitted even when a file was set.

Screenshots

Filter file type is not working

Describe the bug
I only want to upload ".jpg, .jpeg, .png, .pdf"

But it is not filter. Is there a way?. I can't find it in document.

<Controller
          control={control}
          name="certificateOfIncorporation"
          render={({ field, fieldState }) => (
            <MuiFileInput
              className="mt-32"
              {...field}
              label="Certificate of incorporation"
              placeholder="Certificate of incorporation"
              id="certificateOfIncorporation"
              error={fieldState.invalid}
              helperText={fieldState.invalid ? "File is invalid" : ""}
              variant="outlined"
              fullWidth
              accept=".jpg, .jpeg, .png, .pdf" // add this line
            />
          )}
        />

[DOC] - Typescript example is missing File[]

On typescript section, the type of useState and handleChange newValue param is missing File[];

import React from 'react'
import { MuiFileInput } from 'mui-file-input'

const MyComponent = () => {
  const [value, setValue] = React.useState<File | null>(null)

  const handleChange = (newValue: File | null) => {
    setValue(newValue)
  }

  return (
    <MuiFileInput
      value={value}
      onChange={handleChange}
      hideSizeText
    />
  )
}

I got the error: Type '(newValue: File | null) => void' is not assignable to type '(value: File | File[] | null) => void'.

The correct type is: File | File[] | null

Doc Page

Unresponsive component width when `fullWidth` is `true`

Describe the bug

When fullWidth prop is set (or if this component is placed inside flexbox or grid layout), the inner element (<label>) doesn't follow the parent width and creates an empty space. This empty space will be seen after the user inserts the file.

2023-03-10-05-41-54.mp4

To Reproduce

Steps to reproduce the behavior:
Import and use the React component MuiFileInput with fullWidth is set, or put the MuiFileInput inside flexbox or grid layout.

Expected behavior

The width of inner element will responsive to the parent elements, like this third input that named "Fixed FullWidth Input" (see picture below).

Additional context

The file name also need improvement.

Possible solution

I think by adding CSS width: 100% rule into the Label styling can solve the width issue.

But I don't know for the file name. Maybe using CSS text-overflow rule instead of truncate the text?

Do Mui Icon Optional

I used another Icon library to my project. But this library is mandatory Mui Icons. I don't want use Mui Icon library only for that and also wouldn't miss this Awesome FileInput Library

`./node_modules/mui-file-input/dist/mui-file-input.es.js:4:0
Module not found: Can't resolve '@mui/icons-material/AttachFile'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/sections/candidates/candidate/edit/docs/upload-dialog.js
./src/sections/candidates/candidate/account-documents.js
./src/sections/candidates/candidate/candidate-view.js`

Required Issue - Form Doesn't submit

Form doesn't submit after file select if is it required

Screen.Recording.2023-11-15.at.12.07.46.AM.mov

<form onSubmit={(event) => { event.preventDefault(); console.log(value); }} > <MuiFileInput required placeholder="Insert a file" value={value} onChange={handleChange} /> <button type="submit">Click</button> </form>

Icons are not displayed

Describe the bug
Input doesn't show any icons. When I upload a file, it is hard to clear the input because the delete icon is missing.

To Reproduce
Steps to reproduce the behavior:

1. Go to codesandbox
2. See missing icons before / after upload file.

Missing Support for "accept" Attribute/Prop

Requesting Support for "accept" Attribute/Prop in mui-file-input
Hi there,

I hope this message finds you well. First of all, I wanted to express my appreciation for the mui-file-input package. It has been incredibly useful in my Next.js project for handling file uploads.

However, while working with the package, I noticed that there is currently no support for the "accept" attribute/prop, which is commonly used to specify the file formats or types that are allowed to be selected by the user.

In my application, it is crucial to restrict the file selection to specific formats (e.g., image/jpeg, application/pdf, etc.). Without the ability to set the "accept" attribute/prop, I am unable to enforce this restriction.

I would greatly appreciate it if you could consider adding support for the "accept" attribute/prop in the mui-file-input package. This enhancement would enable developers to customize the acceptable file formats and provide a more seamless and controlled file selection experience for users.

Thank you for your attention to this matter, and I look forward to hearing your thoughts on implementing this feature. If there's any additional information or assistance I can provide, please let me know.

Best regards,
Noor Ul Amin
noor-ul-amin0

File accept type setting

Thank you for this module.

I think File input have to get functions for setting file acceptable type
But I didn't find this functions

Thank you

`pretty-bytes` dependency shouldn't be bundled

Describe the bug

This package has a pretty-bytes dependency, but it's incorrectly bundled into the published files of this module. This is an anti-pattern for a bunch of reasons, but the main one is that if the same dependency is used anywhere else in your app the code is duplicated in an app bundle or for the runtime to process, instead of being a shared dependency.

To Reproduce

Look at the published module and notice the pretty-bytes isn't imported, but it's source code has been included directly in the module:

https://unpkg.com/browse/[email protected]/dist/mui-file-input.es.js

Expected behavior

Dependencies of published packages should be imported and never bundled.

Screenshots

N/A.

Desktop (please complete the following information):

N/A.

Smartphone (please complete the following information):

N/A.

Additional context

N/A.

Limiting File Types

Describe the bug
Trying to limit the file type to a CSV, but props passed are not assigned to the input field.

To Reproduce
<MuiFileInput inputProps={{ accept: '.csv' }} />

Expected behavior
Should only allow to select files with .csv extensions. Instead it alloows to choose any file you want.

Desktop (please complete the following information):

• OS: MacOS , I don't think this is OS specific because inspected HTML input doesn't have accept property.
• Browser: Firefox

[object File] file issue while submitting

While using React hook form and then submitting the data getting [object File] except File. Replicate the exact same https://codesandbox.io/s/react-hook-form-with-mui-file-input-llrkce?fontsize=14&hidenavigation=1&theme=dark&file=/src/index.js
but still unable to resolve it in Typescript.