search

KarimMokhtar / react-drag-drop-files

Light and simple Reactjs drag and drop files library to use with very flexible options to change, so you put whatever the design you want for your drop-area. Users can drag and drop or even select the file anywhere in the window.
MIT License
248 stars 91 forks source link

Possible to disable click to select? #95

Open MakakWasTaken opened 1 year ago

MakakWasTaken commented 1 year ago

I have recently started using this project, but I ran into a feature limitation.

I was wondering if it is possible to make the FileUploader only be drag and drop? I am using it to overlay a table, so it would be preferred if it does not open the select file dialog when clicking a cell.

chriswardo commented 1 year ago

+1 for this. That would be great if possible. Thanks!

ArtemKurtiakWork commented 1 year ago

+1

ghost commented 1 year ago

+1

nnavascues commented 1 year ago

+1

I believe a possible workaround is setting it as disabled, and then adjusting the ui styles if wanted; that way I achieved the 'only-drag-and-drop' behavior. Maybe it helps you @MakakWasTaken

Nealsoni00 commented 1 year ago

@nnavascues do you have an example of how you wrote the desired behavior? I'm writing it now and publishing an example for others would be amazing!

nnavascues commented 1 year ago

@Nealsoni00 Sure! I have something made in Styled Components like this, hope it helps :)

<Container> <FileUploader disabled {...otherProps} /> </Container>

export const Container = styled.div {... other styles} label { // Overrides styles of the disabled drag&drop component width: 100%; border: none !important; background: none !important;

> div {
  border: 1px solid ${(props) => props.theme.secondary.c300};
  background: transparent !important;
  color: transparent !important;
}

} ;

That way I managed to "hide" the disabled styles of the FileUploader