I am new at react and I am creating an upload images functionality using this: https://github.com/JakeHartnell/react-images-upload as a guide.
however i am having issues with the set state, it adds the file even if i removed it from the upload
As you can see in the screenshot, i have added two photos, removed one and added one again. when i checked the state. it has 6 files in the array. how do i fix this one?
this is my onchange function:
onDrop = picture => {
this.setState({
artistGallery: this.state.artistGallery.concat(picture),
});
};
i am calling it here:
<ImageUploader
withIcon={true}
buttonText='Choose images'
onChange={this.onDrop}
imgExtension={['.jpg', '.gif', '.png', '.gif']}
maxFileSize={5242880}
withPreview={true}
/>
Your 'onDrop' function is getting called on 'add' as well as on 'remove' action. And you are concatinating the image files entries in onDrop thats why images entries are duplicated on each call.
In your case assuming 'picture' is the array of images, Change your onDrop function to this:
onDrop = picture => {
this.setState({
artistGallery: picture
});
};
Please note: I have tried this using the link you have provided in your question with react-images-upload.
Hope it helps!
P.S. I have raised a pull request on the source you have used.
Related
I have a pdf that should download when user clicks on a button.
The content for the pdf gets set:
const [instance, updateInstance] = usePDF({
document: (
<PDFDocument projectsData={projectsData} projectId={projectId} />
),
});
When projectsData is updated I call updateInstance. But the content of the PDF still reflects the original projectsData, and not the updated.
I have tried calling updateInstance in a useeffect when projectsData is updated as well.
I'm not 100% sure, since you haven't provided more code, however my working code doesn't use parentheses/brackets after the document parameter. So my approach using your code would look like this:
const [instance, updateInstance] = usePDF({
document: <PDFDocument projectsData={projectsData} projectId={projectId} />
});
Hope this helps
I know there are some similar topics but none seems to be in the same direction of what I'm trying to do, thus a new thread.
I have a component that displays a list of keys, each with a checkbox attached to the string. In addition, I have a button that supposedly calls an API with all keys selected and delete these keys.
Several things I'm trying to achieve:
checking a check box enables the delete button
click the delete button should send a POST to API, the list should then reload
Since the list is reloaded, all checkbox should be unselected, thus the delete button is once again disabled
there's another button outside of this function that checks for the length of the list as well, which I don't know how to associate with this list if I fetch the list in the component.
I'm facing the problem which I don't know how to make the button and the checkboxes associate to each other. I tried using state with a checked state, which is a boolean, but that's only one boolean and cannot record several keys. I think using an array would work? Then again I'm not sure how to properly append or remove the key checked.
my code looks like
class AppList extends Component {
constructor() {
super();
this.state = {
checked: [],
apps: []
};
this.handleChecked = this.handleChecked.bind(this);
}
componentDidMount() {
fetch("some_url", {
method: 'post',
body: JSON.stringify({"user": "some_email"}),
headers: {'Content-Type': ' application/json'}
})
.then(res => res.json())
.then(
(result) => {
this.setState({apps: JSON.parse(result)});
},
(error) => {
console.log("error", error);
}
);
}
handleDeleteKey = (event) => {
// fetch(I'll worry about this later)
this.setState({checked: false});
console.log("delete!!!!");
}
handleChecked () {
this.setState({checked: !this.state.checked});
}
render () {
const apps = this.state.apps.map((app) =>
<div>
<input type="checkbox" onChange={this.handleChecked} />
{` ${app}`}
</div>
);
return (
<div>
<h4>Client Key List:</h4>
{this.state.apps.length > 0 ? <ul>{apps}</ul> : <p>No Key</p>}
{this.state.apps.length > 0 ? <button className="api-instruction-button" onClick={this.handleDeleteKey}>Delete Selected Key(s)</button> : null}
</div>
);
}
}
export default AppList;
I feel like my design is completely wrong but I don't know how to fix it. It seems like there are so many states to be passed around and nothing is the outermost, almost a cyclic dependency.
Anyone had any experience dealing with this problem? It seems like it's a common user action but I can't figure it out.
EDIT: after digging it a bit more, it seems like I need to call componentDidMount outside of the AppList. It should be in the component that uses AppList, let's call it MainApp.
MainApp calls componentDidMount which is the same as the one in AppList. The one in AppList gets removed, and the keys are passed to AppList as props.
I have trouble handling the clicking event. It seems like the component is always updating, so if I want to append the clicked key to the array, it wouldn't work. The same call will be made again and again.
Since there's another button in MainApp that requires the list of keys, I can't just pass the call into AppList. However, updating in AppList should update the MainApp as well. How does it work? I'm so confused
EDIT2:
https://codesandbox.io/s/7w2w11477j
This recreation should contain all functions I have so far, but I can't get them to work together.
Again my task is simply:
I have a list of strings, each with a checkbox
checking the checkbox selects the specific string
There's a button that I can click to delete these entries in my db by calling an API
Is refreshing the MainApp needed in this case? Otherwise I need to delete the strings in frontend so they don't display after the delete button is pressed
Here's what I believe you were going for: https://codesandbox.io/s/w23wv002yw
The only problem that made yours not work properly was you were just getting a little jumbled with where to put everything.
Contents:
The MainApp.js will only contain the apps and a method for deleting them in the backend. Other than those two methods, nothing else really concerns the MainApp.js file.
The AppList.js will contain all the methods that update its own checked state, the delete button itself, and a method to clear the checked state on delete.
Processes:
First, MainApp.js will load and remount with a backend api pull and populate its apps state. Once it's finished that, it will pass it on to AppList.js. From there, AppList.js will render that list as a multi-select field onscreen. The user can then select or deselect any of the options. As an option is selected, its index is pushed to the checked state and organized in ascending order.
(ordering the array isn't that necessary, but I figured it would help if you wanted to retool it sometime down the road)
When one or more option is selected, a delete button will appear. When the user clicks the delete button, AppList.js will call the delete function passed to it from MainApp.js, then it will clear the current checked state.
I want to upload multiples images then display them in browser. I wrote this code mentioned by this link.
I got the name of images displayed in place of images:
Image1.png
Image2.png
How can I fix that and if someone knows another npm module which upload and display images as a gallery I will be grateful if mentioned it to me.
Adding the property withPreview to the <ImageUploader /> gives you a preview of all "uploaded" images.
const UploadImage = props => {
const { onDrop } = props;
return (
<ImageUploader
withIcon
buttonText="Upload Image"
onChange={onDrop}
imgExtension={[".jpg", ".gif", ".png", ".gif"]}
maxFileSize={5242880}
withPreview
/>
);
};
You can see this change implemented here.
This library looks like it can achieve what you want right out the box. See the documentation for the library for more details.
Has anybody ever used this awesome react components processing server side data?
The solution given here is excellent if you don't need to manually update the data.
I would need to refresh the data not only when changing page/pageSize/sorting/filtering, but also after some intervalled time, to see if data got changed.
Also I have an extension of the table that allows the user to do a full text search on all columns so I would need to update the data when the user changes the content of the custom search box too.
I had the same problem as yours and I started looking for asynchronous tests with ReactJs and I found this article that was very useful. The key part was to use "update" method on the Enzyme component, like below:
const items = ['die Straße', 'die Adresse', 'die Nationalität'];
jest.useFakeTimers();
describe('<DelayedList />', () => {
test('it renders the items with delay', () => {
const component = shallow(
<DelayedList items={items} />
);
jest.runAllTimers();
component.update(); // <--- force re-render of the component
expect(component.state().currentIndex).toEqual(items.length);
expect(component).toMatchSnapshot();
});
For more information, see this medium article.
I'm trying to create a gallery using react-dropzone. I am successfully adding images but instead of creating an array, as I thought I was doing by following their github, it is simply loading an image and replacing it with the new one when I drag another image. The expected result is to add the image next to the one I already dragged in it.
I am specifying an empty array called files: [], that I imagine will collect the images.
The dropzone element in my class looks like this:
let dropzoneRef;
<Dropzone
ref={
(node) => {
dropzoneRef = node;
}
}
onDrop={this.onDrop.bind(this)}>
<p>Drop files here.</p>
</Dropzone>
<RaisedButton
label="Upload File"
primary={false}
className="primary-button"
onClick={() => { dropzoneRef.open(); }}
/>
<ul>
{
this.state.files.map(f =>
<li key={f.preview}>
<img className="dropped-image" src={f.preview} alt=""/>
</li>,
)
}
</ul>
I added the working code to a WebpackBin for you to inspect
Their github docs are here
This is my goal screen. I haven't worked out the second part which is clicking on any single thumbnail added and showing it in full size. So don't worry about that part. I just need to be able to collect a list and add as many as I want. Here is a screenshot of the expected result. (I apologize for the kindergarten writing)
Thank you in advance
All you need to do is update your onDrop function as follows
onDrop(uploadedFile) {
this.setState({
files: this.state.files.concat(uploadedFile),
});
}
This is because you want to add the new file to this.state.files array.
See this updated WebpackBin.