rouftom / react-mui-fileuploader

🗃️ React mui fileuploader is a react component based on @mui v5 that allows you to upload files with an awesome ui component

• 👋 Hi, I’m @rouftom
• 👀 I’m interested in mobile, web technologies and blockchain
• 🌱 I’m currently learning Blockchain and DLT
• 💞️ I’m looking to collaborate on cool projects
• 📫 How to reach me: [email protected] or [email protected]

react-mui-fileuploader's Issues

Exception Occurred While Loading Files Not Supported by the Browser

When loading a file the browser cannot parse, e.g., load a HEIC file on windows chrome.

The following line will raise an exception TypeError: Cannot read properties of undefined (reading 'toLowerCase'), because the file.type is empty.
https://github.com/rouftom/react-mui-fileuploader/blob/main/src/FileUpload.tsx#L196C12-L196C12

Error generating source map

After updating to the latest version I started getting the following errors when building the project:

WARNING in ./node_modules/react-mui-fileuploader/dist/index.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'MY_PATH\ClientApp\node_modules\react-mui-fileuploader\src\FileAttachment.tsx' file: Error: ENOENT: no such file or directory, open 'MY_PATH\ClientApp\node_modules\react-mui-fileuploader\src\FileAttachment.tsx'

WARNING in ./node_modules/react-mui-fileuploader/dist/index.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'MY_PATH\ClientApp\node_modules\react-mui-fileuploader\src\FileUpload.tsx' file: Error: ENOENT: no such file or directory, open 'MY_PATH\ClientApp\node_modules\react-mui-fileuploader\src\FileUpload.tsx'

Not sure what is the cause, but src isn't included in the release, so it likely would either need to be included or somehow the source map building should be excluded

Img placeholder

Hi, I am creating this issue because I would like to know if it would be possible to have a ''props'' that disables the placeholader image?

I would like to have no background image and make sure that the elements are centered (text, button ...) in desktop mode because it is there in mobile mode (from 600)

thanks to you !

Allow msg Filetype

Hey,

is it possible to allow .msg Files (Saved from Outlook?) or generally own file extensions?

Thank you

The default files in the react-mui-fileuploader component do not update when a new file is selected or remove files

When a user selects a new file using the file input, the default files displayed by the react-mui-fileuploader component should update to reflect the selected file.

Clear Files after upload

I assume it is just me not seeing something but how would I clear the files after they have been uploaded. I am assuming something to do with the context.

x file joined msg cant be personalized/translated

Hi, there is a text that cant be personalized. is the text that show how many files has been loaded. In my case i need that for translation aplication.
Thanks for all

TypeError (0 , $csb___mui_system.unstable_prepareCssVars) is not a function

the codesandbox isn't working

Text is broken

Hi! Thanks for adding the placeholder image removal

But there is a little problem with the text under the size '600'.

I put a small image to illustrate that will surely be more telling!

thanks to you

Add ability to disable drag and drop

Drag and drop is causing an error that doesn't happen with regular file select.

context.removeFile does not work, internal indices are different to context.files indices

Hi,
there seems to be a problem regards removing files with the context. The list of files in the onFilesChange Handler and the context.files is sorted in alphabetical order of the filenames. So when I remove the file with index 0, the file has in the original file list of the component index 1. I use getBase64={false}. And there are no types for the context, it is typed as object.

maxUploadFiles fails

Great component!
In this case:
<FileUpload id="file" title="" multiFile={false} maxFileSize={10} allowedExtensions={["docx", "pdf", "doc"]} errorSizeMessage={"Size must be then 10Mb"} maxUploadFiles={1} showPlaceholderImage={false} onFilesChange={handleFilesChange} onContextReady={(context) => {}} />
It should accept only one file, but it takes everyone I select or drag in.
Here a picture:

Best regards.

Invalid hook call. Hooks can only be called inside of the body of a function component

hello, i try this component, but invalid hook call show up. can you help me?

• React 18.1.0
• mui/material 5.8.1

this is my entire code

import { Box, Card, CardContent, Typography } from "@mui/material"
import { useEffect } from "react"
import { useParams } from "react-router-dom"
import FileUpload from "react-mui-fileuploader"

const UploadPage = () => {
    const { type } = useParams()
    useEffect(() => {
        console.log(type)
    }, [type])

    const handleFileUploadError = (error) => {
        // Do something...
    }

    const handleFilesChange = (files) => {
        // Do something...
    }

    return (
        <>
            <Typography variant="h5">
                Upload Page
            </Typography>
            <Box marginY={1}>
                <Card>
                    <CardContent>
                        <FileUpload
                            multiFile={true}
                            disabled={false}
                            title="My awesome file uploader"
                            header="[Drag to drop]"
                            leftLabel="or"
                            rightLabel="to select files"
                            buttonLabel="click here"
                            buttonRemoveLabel="Remove all"
                            maxFileSize={10}
                            maxUploadFiles={0}
                            maxFilesContainerHeight={357}
                            errorSizeMessage={'fill it or move it to use the default error message'}
                            allowedExtensions={['jpg', 'jpeg']}
                            onFilesChange={handleFilesChange}
                            onError={handleFileUploadError}
                            imageSrc={'path/to/custom/image'}
                            bannerProps={{ elevation: 0, variant: "outlined" }}
                            containerProps={{ elevation: 0, variant: "outlined" }}
                        />
                    </CardContent>
                </Card>
            </Box>
        </>

    )
}

export default UploadPage

Bug on `allowedExtensions` when `"yaml"` extension being configured.

It was possible to limit by configuring acceptedType to be ".json, .yaml"l

However, if configured allowedExtensions to be ["json", "yaml"], but bug occured when selecting yaml file.

Style overriding

Hi,
Even though the component looks pretty cool out of box, it would be nice to have more styling options.

I guess one could use MUI themes to tweak it, etc. but maybe it would be useful to simply add css classes to elements so it's easy to restyle them? Having reasonable class names and id's also helps with some automations.

If that's something that you'd see helpful, I guess I could add those. Even a step further would be to let user define those classes.

Using legacy @mui/styles

Hi, when using the component with react 18 I get an error about version incompatibility:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   at resolveDispatcher (react.development.js:1476:1)
   at useState (react.development.js:1507:1)
   at FileUpload (FileUpload.jsx:95:1)
   at renderWithHooks (react-dom.development.js:16305:1)
   at mountIndeterminateComponent (react-dom.development.js:20074:1)
   at beginWork (react-dom.development.js:21587:1)
   at beginWork$1 (react-dom.development.js:27426:1)
   at performUnitOfWork (react-dom.development.js:26557:1)
   at workLoopSync (react-dom.development.js:26466:1)
   at renderRootSync (react-dom.development.js:26434:1)

It looks like it's due to @mui/styles 5.11.2 pulling the old version of react:

and therefore creating incompatibility, at the same time, in MUI docs: https://mui.com/system/styles/basics/ they are clear that this is a legacy and discontinued package:

⚠️ @mui/styles is the legacy styling solution for MUI. It depends on JSS as a styling solution, which is not used in the @mui/material anymore, deprecated in v5. If you don't want to have both Emotion & JSS in your bundle, please refer to the @mui/system documentation which is the recommended alternative.

⚠️ @mui/styles is not compatible with React.StrictMode or React 18.

Do you have a plan to migrate to upgrade the dependencies as indicated by MUI? Otherwise I'm afraid the component won't be usable anymore in the future.

[Issue] Check the render method of `FileAttachment`.

<FileUpload multiFile={true} onFilesChange={handleFilesChange} onContextReady={context => {}} />

	function handleFilesChange(files) {
            //no-op
	}

Upon uploading any document I am presented immediantly with this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `FileAttachment`.

It was working previously but as of today this is the error we are getting without any code changes.
I recreated this in a blank react environment and am experience this exact issue so it is not something custom to our application

Dependencies

		"react-mui-fileuploader": "^0.5.2",
		"react": "^18.2.0",

Bug: React 18 import with error

Server Error
Uncaught SyntaxError: Cannot use import statement outside a module
at <unknown> (file:///app/node_modules/react-mui-fileuploader/dist/index.esm.js:1)
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
---------------------------------------------------
package.json
    "react-mui-fileuploader": "^0.3.0",

import in archive
import FileUpload from 'react-mui-fileuploader';

can you help me with the error?

allowedExtensions fails

Hi guy,
when allowedExtensions is assigned, the check of file's extensions fails.

<FileUpload id="file" title="" multiFile={false} maxFileSize={10} allowedExtensions={["docx", "pdf", "doc"]} errorSizeMessage={ "max 10Mb" } maxUploadFiles={1} showPlaceholderImage={false} onFilesChange={handleFilesChange} onContextReady={(context) => {}} />
If select a .docx file, this appen:

Best regards.

A few missing features?

Hello @rouftom,

This is a great tool. It really fits my needs. Thanks a lot for publishing it.

I'd like to suggest a few features.
Maybe they are already there and I just missed them.

I'd love to be able to:

• get the direct path for the file (along with their base64 content)
• remove the image altogether
• have more control on the look and feel of the component:
  set a different background color
  force a max width
  etc...
• being able to clear the list of files programmatically
  I use your component in conjunction to an upload button.
  I'd like to be able to mark each file as uploaded when the upload succeeds, or even remove it altogether.

That said, thanks again for this great tool

How to pass 'image/*' to allowedExtensions?

It is as simple as the title suggests ,
I have the following code but it does not seem to work
<Grid item xs={12}> <Stack spacing={1} sx={{ paddingX: '20px' }}> <InputLabel>Thumbnail</InputLabel> <FileUpload title="Thumbnail for the main Experience" allowedExtensions={'image/*'} onFilesChange={fileChangeHandler} /> </Stack> </Grid>

and this

<Grid item xs={12}> <Stack spacing={1} sx={{ paddingX: '20px' }}> <InputLabel>Thumbnail</InputLabel> <FileUpload title="Thumbnail for the main Experience" allowedExtensions={['image/*']} onFilesChange={fileChangeHandler} /> </Stack> </Grid>