Not able to upload a file on button click in react with mui

Question

The link has a Live example: https://stackblitz.com/edit/ashok-reddy?file=myform.tsx,package.json,file.tsx

When user click on select file button to up load the file ,button was not opening to upload the file
2.When user drag and drop the file was able to uploading the file
3.Therefore issue was here button was not opening to upload the file

Current behavior:

When user click on select file button to up load the file ,button was not opening to upload the file
below screenshot shows when user click on select file button*

When user drag and drop the file was able to uploading the file 👍
below screenshot shows when user drag and drop the file was able to uploading the file.

Expected behavior:

When user click on select file button to up load the file ,it should able to open to upload the file successfully .

const mission = async (formdata: any) => {
    const encontersHttpService = new EncontersHttpService();
    return await encontersHttpService.post<any, unknown>(URL, formdata, {}, true).then(response => response).catch(error => console.log(error.message))
}

export const OnSubmit = () => {
    return useMutation<any, Error, any>({
        mutationKey: [ISSION],
        mutationFn: (formdata: any) => mission(formdata)
    })
}
 const { mutateAsync, isPending} = OnSubmit();
 mutateAsync(formData, {
                    onSuccess: (data) => {
                        if (!isPending) {
                            
                        }
                    },
                    onError: (error) => {
                        console.log(error.message)

                    },
                })

When user click on select file button to up load the file ,it should able to open to upload the file successfully .

Answer 1

I am not sure why you are passing 3 refs to <TextField /> component at your fileupload.tsx file as when clicking on Select File button you run fileInputRef.current?.click() script.

So you can change <TextField /> component's ref to receive only fileInputRef instead.

<TextField
  type="file"
  onChange={handleFileChange}
  style={{ display: 'none' }}
  inputRef={fileInputRef} // Changed this line
/>

If you want to open file dialog when clicking on <Paper /> component as well add onClick event.

<Paper
  elevation={isDragging ? 6 : 1}
  sx={{ ...styles }}
  onDragOver={handleDragOver}
  onDragEnter={handleDragEnter}
  onDragLeave={handleDragLeave}
  onDrop={handleDrop}
  onClick={() => fileInputRef.current?.click()} // added this line
>
  {children}
</Paper>

If you implement opening the dialog when clicking on <Paper /> make sure you have a div wrapper around your <Box /> component which will preserve not opening the dialog when clicking on already selected file area.

{selectedFile && (
  <div onClick={(e) => e.stopPropagation()}>
    <Box>{children}</Box>
  </div>
)}