m-inan / react-upload-gallery Goto Github PK

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"

When I drop a file the DragArea put the file first in the list,

but I want to put the new file last in the list.

There is any config to make that possible?
Thankyou

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?

https://github.com/TPMinan/react-upload-gallery/blob/a9134b93630b32378ad5079e3d6dc77bceb94f71/src/view/Card.js#L44

Hello,
I am facing an issue in displaying the uploaded images. Following is the code and output I am getting.
const initialState = [ { source: imgsrc[0], }, { source: "http://abc/uploads/2020/09/sandwich-upper-2-3-1.png", } ];
Output I am getting:

** imgsrc[0] is not null.**

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:

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 !

How can I upload image one by one without lost image

im following custom request example .How to hide input field ?

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.