no support for existing (uploaded) images

[andrewlorenz]

Great component, and love the way its entirely removed from UI concerns. But I'm struggling to use it in the context of having previously uploaded images that are now stored away - i.e. not dataURLs any longer but .png or .jpg on disk for web-serving.

I've tried passing in an array of existing images to "defaultValue", but of course it doesn't understand my array - I suspect it expects an array of dataURLs. I am passing an array of objects, one field of which is the relative URL for the file (another being the size, another being the date of upload, etc).

not sure what the solution would be, but I imagine if "defaultValue" could support a list of fully qualified urls, plus some kind of unique reference field (id) for indexing to replace/delete, this would be a start?

[vutoan266]

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

[vutoan266]

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.

[andrewlorenz]

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

[vutoan266]

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

[andrewlorenz]

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);
    }
  };

[vutoan266]

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)

[vutoan266]

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