no support for existing (uploaded) images about react-images-uploading HOT 7 CLOSED

Hi @andrewlorenz, thank for your feedback, the first of this repo :D

from react-images-uploading.

For your issue, you can pass to defaultValue array like this:
[ { dataURL: "https://domain.com/photo1.jpg" }, { dataURL: "https://domain.com/photo2.jpg" }, ... ]
The component will initial images array by adding an unique key for replace/delete function absolutely.
But a notice that you should pass your defaultValue at the mounted time of this component.

from react-images-uploading.

ah ok great thanks, I'll give that a try now - I'm actively developing my use of your component as we speak

from react-images-uploading.

@andrewlorenz yep let me know if you have any more problem. If not, I will close the issue.

from react-images-uploading.

ok so I've got defaultValue working fine - as you said, by passing in the full url for an image does indeed work. Thank you for that.
But I've now lurched to another issue in the image "lifecycle".
I am passing in my array of existing images from my database of the structure:

[
  {  
    _id     : ""5e9da8684f9f570f04e02651",
    dataURL : "/my-images-location/sample-image.png",
    name    : "sample-image.png",
    size    : 8061,
    type    : "image/png",
    _dateUploaded : "2020-04-20T13:06:17.115Z",
  }
]

And this gets rendered fine by your component. But when I add another image to my array, and your onChange fires, I lose all my additional fields and just get back something like this:

[
  { file: undefined, dataURL: "/my-images-location/sample-image.png" },
  { file: File { name, lastModified, lastModifiedDate, webkitRelativePath, size, type }
]

So now I've lost both my additional data, and any means of correlating it back to what I passed in.
I think a really neat solution might be if your component supported say an "original" key in the defaultValue object array, which it passes back when onChange fires ? A user of your component then has the option to populate that with an object containing their own data for their images.

Assuming that this "original" object also appeared in the imageList child render prop array, it means that extra user data also becomes nicely available for the image rendering, for example to support features such as image like counts, sequencing, display of other data such as size or date uploaded, etc.
regards

[edit]: after reviewing your code I can see you actually spread the incoming items anyway - so as long as they don't clash with (key, onUpdate, onRemove), they will be available for render. But you restrict the onChange to file and dataURL - I've done this in copy code (JS not TS) to fix it for me:

  const onStandardizeDataChange = (list) => {
    if (onChange) {
      const sData = list.map(({ key, onUpdate, onRemove, ...restOfItem }) => ({ ... restOfItem }));
      onChange(sData);
    }
  };

from react-images-uploading.

I have caught your issue, what you need is keeping all key you passed into defaultValue, right?
I saw your code solution is good in this case, and we should also change a little bit code at initial useState imageList.
I would be very grateful if you could make a pull request (don't mind about TS, I will update it if needed)

from react-images-uploading.

Hi @andrewlorenz, check this commit for your origin key expectation.
Upgrade to 2.1.1
Hope you have good job.

from react-images-uploading.