m-inan / react-upload-gallery Goto Github PK
View Code? Open in Web Editor NEWReact for Upload Image Gallery. Sorted by drag & drop and Customizable
License: MIT License
React for Upload Image Gallery. Sorted by drag & drop and Customizable
License: MIT License
I used react-upload-gallery with React 16 and it worked totally fine, but now as I'm using it with React 17. It just return blank page
scheduler.development.js:171 Uncaught Error: Minified React error #188; visit https://reactjs.org/docs/error-decoder.html?invariant=188 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at t.findDOMNode (index.js:9)
at n.value (index.js:22)
at n.value (index.js:22)
at commitLifeCycles (react-dom.development.js:20663)
at commitLayoutEffects (react-dom.development.js:23426)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at commitRootImpl (react-dom.development.js:23151)
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at commitRoot (react-dom.development.js:22990)
at performSyncWorkOnRoot (react-dom.development.js:22329)
at react-dom.development.js:11327
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at workLoop (scheduler.development.js:417)
at flushWork (scheduler.development.js:390)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
This error is what I'm getting in my console.
remove don't have response
[{source: 'image url', name: '...'}].
I've tried to make the sorting work but it does nothing.
Am I doing this wrong?
sorting={{updateBeforeSortStart: (foo) => {console.log(foo, 'Fawaka')}, axis: 'y'}}
It would be nice if you add logic to upload to a firebase firestore or amazon AWS s3
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?
Hello i need to support all files types. And i dont want to type all the format (insposible), any solutions ? :)
Thank you so much <3
Sometimes I get this error when I try to upload 20 Images (40 MB)
I use it like this:
import React from 'react';
import RUG from 'react-upload-gallery';
<RUG
action={`${apiPath}upload`}
headers={{ Authorization: `Bearer ${token}` }}
source={(response: any) => response.source} // response image source
onDeleted={onDeleted}
/>
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-upload-gallery": "^0.4.0"
I love this component! It works really well. The only question I have: is there a way to adjust the height of the default header and remove the default icon? I tried it using the className property and adjusting the rug-handler and rug-handler-icon classes, but I'm unable to make it work. This is not an issue, I know, but wasn't sure where to put it elsewhere.
Thanks a lot!
When I delete a photo and then upload it again, it won't upload.
Maybe if the name === null the name isn't rendered at all?
Hello, i have issue. I need for you to implement rerender RUG state, after initialState change. I need to add images from outside to RUG.
Thank you for reply :)
Hello @m-inan
First, I want to thank you for such a great component. It is very flexible and easy to use.
This issue is due the impossibility to use the sorting callback onSortEnd, as it explicitly overriden in the line referenced below:
react-upload-gallery/src/DragArea.js
Line 19 in e21bdeb
I think that this can be solved by doing something like:
onSortEnd={(params, e) => { setSort(arrayMove(images, params.oldIndex, params.newIndex)); props.onSortEnd(params, e); }}
What do you think?
Thanks and looking forward for an answer.
Ivan.-
Hehyo, is internationalization or setting own language strings possible?
I would like to change the Select Images to Upload
to my own language.
Thanks in advance.
I my functional component I am setting InitialState via state variable that is fetched from API call and passed in from Redux, I am getting "A state mutation was detected between dispatches but I haven't mutated state" error.
Hi,
I m trying to indicate to my users witch file(s) break the rules to uploade, then i can add the name of this file in the message error
exemple : "[file name], [file name] errorMesage" !
For the rest your component work so well thanks so mutch !
Hi, I've noticed that in the new release '0.1.1' when I select multiple files on dialog in the gallery just show the last, in the previous version '0.1.0' this feature work normally
thankyou
Hello @m-inan, I'm wondering if it is possible to use this component for images and videos too. Is there any way? If not, do you think is a nice feature to add?
Thanks!
I want to know to invoke sorting manually.
A case I would need this would be, supposedly I change the order of uploaded images by dragging it around and then decide that the order of the images I have is not what I want, and then want to reset the sorting according to name of the files or such, so I want to reset the changes in ordering I have done, so I want it to be in sorted form as it was when I uploaded it or sorted according to file name. I create a button to sort but I don't know what to do.
I want the same for manually starting uploading for all images at the same time.
Help please.
Cannot send cookies header because XMLHttpRequest doesn't send the cookies by default. So it will be great if you set xhr.withCredentials = true;
or extract property that will set it.
When using it with typescript it complains about the missing types. Any chance to add @types/react-upload-gallery or a .d.ts declaration file?
Thanks and keep up the good work!
Seems like this component's state is not meant to be controlled from the outside. I haven't found a good way to sync its state from a parent state. Passing state to initialState
seems to work for the first render only.
I'm using Django Rest API for image upload/delete or any modification. The problem is that I need extra fields such as ID for the database object created for the uploaded image to be accessible from onDeleted
to be able to delete it using the backend API.
I would also like it if I'm able to save additional fields inside state image data.
after uploading the image or images, the cards don't show them, they're blank and don't show the actual images. what could cause that?
this is my code:
<>
<RUG
action='http://localhost/API/uploadFile.php'// upload route
source={response => response.source} // response image source
rules={{ size: 5210, limit: 5 }}
onWarning={(type, rules) => {
switch (type) {
case 'accept':
setState({
...state,
msg: `Only ${rules.accept.join(', ')}`
})
break;
case 'size':
setState({
...state,
msg: 'File size is over 5MB!'
})
break;
case 'limit':
setState({
...state,
msg: 'Only 5 files at a time!'
})
break;
default:
}
}}
/>
<h1>{state.msg}</h1>
</>
I have tried to set action={null}
, or leaving it empty, but to no avail.
Is this possible to achieve this?
Hi!
Is it possible to add a custom header to the request that downloads images from the API? My server requires a bearer token for every image request. I have no idea myself.
E:
headers
prop is effective only for upload request.
I don't know how to inject own http client, or provide images in other ways.
Hi, thanks for this library
It would be helpful to include in the docs that the customRequest function has to return an abort method, had to look at the source to find the issue why my code was not working, thanks!
I tried this demo, but it seems not to support react 18, and the codePens demo is using react 16.3.
How do I remove an image manually through code. For example... I am right now running "onConfirmDelete" function... in that function, I send the images in the parent component... remove the current Image by checking some conditions in the parent component State...
Now the image is being removed in the parent component state... which is then given to RUG component as initialState.... but it is surely not removing the image from RUG as I can not find anything in the documentation to update the images array manually rather than RUG removing the image itself.
How can I provide the updated images array to the RUG component just like initialState ?
Parent Component State = {
imageGallery: [ list of images here....]
}
RUG component state = {
initialState: [...this.props.imageGallery]
}
// The RUG Component
<RUG
rules={{
limit: 10,
}}
accept={['jpg', 'jpeg', 'png']}
autoUpload={false}
sorting={{ lockAxis: 'x' }}
initialState={this.state.initialState}
onChange={this.onImageChange}
onConfirmDelete={this.onConfirmDelete}
/>
// Functions in RUG Component
onImageChange = (image) => {
// I call the addImages function in the parent component and pass all the images list to it...
// so that it can change the state of the parent component and add the images there whenever
// any images have been added
this.props.addImages(image, "imageGallery");
}
onConfirmDelete = (currentImage, images) => {
// I want to check some conditions before I delete any image... so I call a function in the parent component....
this.props.removeImage(currentImage, images, "imageGallery");
// In that function... If the conditions are met...
// I delete the currentImage from that component's state (the parent component's state)...
// Which is being deleted properly.
// But I can not update the image gallery in this RUG component, after I delete the image in the parent component's state
// Because changes in the parent component state... which is connected to RUG as initialState... will not run onImageChange function
}
Let me know how can I update the images list from outside the RUG component...
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.