Comments (7)
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.
Related Issues (20)
- NextJS Demo Link is broken HOT 1
- Add support for non image files HOT 1
- how do i add multiple images that i already have the path to the component? HOT 1
- Not ordered by selected images on windows OS
- Access File Name
- react-images-uploading does not work when open link on Facebook browser of Line broser
- Using with react-hook-form HOT 3
- Feature request: Return resolution in errors object
- Images are not getting pushed to state HOT 1
- Is there a way to compress the uploaded images ?
- Performance issue in MacOs HOT 1
- Inside a <Form> onClick={onImageUpload} doesn't work HOT 1
- Submit is triggered when clicking on buttom to upload image... drag and drop does not trigger the submission HOT 2
- Usage as per Javascript example causes error HOT 2
- How can I add unit test to drop image?
- How do I add a loader when selecting images from local ?
- Performance issue in Iphone
- Compressing the Size of Base64 String data_url
- Add unique id to images
- Empty dataUrl String after upload
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-images-uploading.