JakeHartnell / react-images-upload

React input file component with images preview
https://jakehartnell.github.io/react-images-upload/
MIT License
348 stars 155 forks source link

Allow one Image select #59

Open osamakhanedu opened 6 years ago

osamakhanedu commented 6 years ago

how can config component so it allow only selection of single image currently can select multiple images

ivnnv commented 5 years ago

you can use prop singleImage={true}. It is there, but not showing in the documentation at the moment.

osamakhanedu commented 5 years ago

i am setting singleImage={true} but its not working it is selecting more then one images and showing there preview. i only want to show preview of one image

xizzat commented 5 years ago

@osamakhanedu me too

nerdsquirrel commented 5 years ago

using singleImage={true} is restricting from selecting multiple images at a time. But still multiple images can be selected by one at a time.

dmitrijBerg commented 5 years ago

Maybe someone who worked with the Component might figure out how to implement a behaviour that only allows for a single Image to be added at a time (Just like singleImage={true} already does.) and whenever another is selected it removes the Image that's already there, only to replace it with the new one. Since this seems more like the intended way adding a singe Image would work, I propose to make this new behaviour work with the singleImage prop.

juusaw commented 5 years ago

A quick solution would be to disable the button when there's an image.

Adding the following to the <button /> element should do the trick

disabled={this.props.singleImage && this.state.files[0]}
vsshaposhnikov commented 5 years ago

@juusaw Where are you see the button ? Or you change the the source component code ?

juusaw commented 5 years ago

That's internal to the library, yes. So an update to the library would be required.

vsshaposhnikov commented 5 years ago

For fix this issue need to add if (this.props.singleImage) { dataURLs = []; files = []; } in onDropFile() method inside component.

amitbravo commented 5 years ago

none of them suggestion working, @juusaw button is not disabling at all , even when I use disabled={true} @vsshaposhnikov if I paste this code in onDropfile() under compiled.js or index.js in the react-native-images-upload , it does not pick a single image.

taylorgannon commented 5 years ago

So far my best quick fix is to add display: 'none' to the buttonStyles prop if there are 1 or more images. This way the button does not appear.

RobertStuff commented 4 years ago

@taylorstyers Have you add the style directly on source code? or on your style css?

RobertStuff commented 4 years ago

@taylorstyers buttonStyles only works on hard coded style. but when I put a function It doesn't work.. buttonStyles={{display: function()}} doesn't work buttonStyles={{display: 'none'}} working