Issue with react-upload-gallery

[ronilaly]

Hello, I'm trying to implement react-upload-gallery package but I'm having an issue.

demonstration of the issue:
https://media.giphy.com/media/96VtG3L4STuDqzE5hg/giphy.gif

my code: `import React, { useEffect, useState, Fragment } from 'react'; import RUG, { DragArea, DropArea, Card, List } from 'react-upload-gallery' import { observer } from "mobx-react-lite"; import 'react-upload-gallery/dist/style.css'

const Try = (props) => {

const [images, setImages] = useState([]);

return (
    <div>
        {console.log('images', images)}
        <RUG
            onChange={(images) => {
                setImages(images) // save current component
            }}
            action="/api/upload" // upload route
            source={response => response.source} // response image source
            axis={'xy'}
            initialState={images}
            header={({ openDialogue }) => (
                <DropArea>
                    {
                        (isDrag) => <div style={{ background: isDrag ? 'yellow' : '#fff' }}>
                            <button onClick={openDialogue}>Open</button>
                        </div>
                    }
                </DropArea>
            )}
        >
        </RUG>
    </div>
);

}

export default observer(Try);`

I did npm install to react-upload-gallery.

thank you very much, Roni

EDIT My app is in rtl direction, so I changed the direction to ltr and it worked. can I use this package to drag and drop images that I have in my page without using the uploading feature?

[m-inan]

@ronilaly Hello, I'm sorry that I answered late. I think you solved the first problem. If I didn't get it wrong, you want to use a private area instead of the upper drop area? In the example below, I use the DropArea component for children props instead of header. This way you can create a custom DropArea

https://github.com/m-inan/react-upload-gallery/blob/master/examples/Customize.js