Better behaviour for Preview when used for single images
max-carroll opened this issue · 8 comments
When you want to have an upload for a single image I think it should behave a bit differently
For instance, the image should expand to fill the entirety of the drop zone rather than appear as a small square.
Small squares definitely makes sense if you have multiple images to add, however in the scenario of uploading a single image then the image looks a little lonely and the component seems a little incomplete.
Would like to suggest that we extend to perhaps have a singleImagePreview: boolean prop or something that we can set that gets it to behave in such a way.
I need to this for my site, I'm wondering whether you guys would like this feature too then perhaps I can work on this source code, otherwise if no one is on board I can always fork it and do it for myself
just thinking if we did implement this then it may make sense to have a single prop for how we want to display the preview so we could have a prop like
previewType : string - and it could be either ['insideDropzone','outSideDropzone,'singleImagePreview']
I havent tested this I was just trying to think how logically this might be achieved, will be interested to hear your thoughts on this
or on the other hand maybe we dont need to pass in any particular props at all because this is probably always desired when the filesLimit is one
Hi @max-carroll ,
Thanks for your feedback and sorry for the late answer.
just thinking if we did implement this then it may make sense to have a single prop for how we want to display the preview so we could have a prop like
previewType : string - and it could be either ['insideDropzone','outSideDropzone,'singleImagePreview']
I like this idea and I was thinking about something like that for v3.0 and also to deprecate the current props using the warning lib (which would require a bit of setup).
Regarding the main issue If I'd have to choose I'd go for this one
on the other hand maybe we dont need to pass in any particular props at all because this is probably always desired when the filesLimit is one
Let me know if you thing you can try to put together a PR with this changes or need more help.
Also I'd like to review a bit the style of the preview to better match Material Design specs so any suggestion about how to re-design this is greatly appreciated.
Thank you @panz3r , I will do some code changes and see what you guys think. Should I checkout a new branch v3.x from v2.x then and we can just keep merging the changes in? or shall I just work in a branch off v2.x now?
Awesome Ill see If I can checkout the Material Design spec and read some articles about drop zones
Hi @max-carroll ,
Should I checkout a new branch v3.x from v2.x then and we can just keep merging the changes in? or shall I just work in a branch off v2.x now?
You can start a new branch from master (which is v3.x at the moment), back-porting to branch v2.x should be easy enough after the changes will be merged 😉 .
Awesome Ill see If I can checkout the Material Design spec and read some articles about drop zones
You can start by looking at the official Material Design specs here and see the already available components from Material-UI here.
Thanks again for your feedback and support, looking forward to your PR.
Can you assist me? my File Limit is 1 but the image alignment is offbeat and the delete icon is far from the image
const baseStyle = {
padding: '20px',
borderWidth: 2,
borderRadius: 2,
borderColor: '#eeeeee',
borderStyle: 'dashed',
backgroundColor: '#fafafa',
color: '#bdbdbd',
outline: 'none',
transition: 'border .24s ease-in-out'
};
<DropzoneArea className={classes.baseStyle} acceptedFiles={['image/*', 'application/pdf']} filesLimit={1} maxFileSize={100000} dropzoneText='Drag and drop an image file here or click'
onChange={this.handleChange.bind(this)} showPreviewsInDropzone={true} fullWidth={false} previewGridProps={{ container: { spacing: 0} }} showAlerts={true} />
look at the top of this page, there's a code tab 😊