Hello all, I have to build an app that stores list of students, every student should have name, date of birth hobby and photo, all this should be stored in database. I picked MERN because im most familiar with and i don’t know how to handle with images, how to store them in mongoDB and update if needed. I managed to do create update and delete student but without photo, i don’t know how to handle image to store them in mongoDB and update if needed. Images will be small so GridFS is not a good idea in my opinion. Please for any help.
Probably not a good idea to store the images in the DB directly, you can use a host like cloudinary to store the images and access the links to the images via their API in Node. They give you API access just for this purpose
2 Likes
For personal or curriculum project apps, I’ve typically stored the images in Dropbox and the image URLs in the database. It’s slow, but not terribly so.
cloudinary Nodejs SDK, is decent and gives you a bunch of free images you can store, and also gives you uploading capabilities from with in your app
Hello guys I have problem with my app I have build it without redux and after I create student or edit student i need to refresh app to display new data on the list.
Edit student component
import React, { Component } from 'react'
import axios from 'axios'
export default class EditStudent extends Component {
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: '',
dob: '',
hobby: ''
}
}
componentDidMount() {
axios.get('http://localhost:5000/api/students/' + this.props.match.params.id)
.then(response => {
this.setState({
firstName: response.data.firstName,
lastName: response.data.lastName,
dob: response.data.dob,
hobby: response.data.hobby
});
console.log(response)
})
.catch(function (error) {
console.log(error);
})
}
onChangeFirstName = e => {
this.setState({
firstName: e.target.value
});
}
onChangeLastName = e => {
this.setState({
lastName: e.target.value
});
}
onChangeDateOfBirth = e => {
this.setState({
dob: e.target.value
});
}
onChangeHobby = e => {
this.setState({
hobby: e.target.value
});
}
onSubmit = (e) => {
e.preventDefault();
let updatedStudent = {
firstName: this.state.firstName,
lastName: this.state.lastName,
dob: this.state.dob,
hobby: this.state.hobby
};
axios.put('http://localhost:5000/api/students/' + this.props.match.params.id, updatedStudent)
.then(res => console.log(res.data));
this.props.history.push('/');
}
render() {
return (
<div style={{ marginTop: 10 }}>
<h3 align="center">Update Business</h3>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<div className="row">
<div className="col">
<label htmlFor="lastName">First Name: </label>
<input
type="text"
className="form-control"
name="firstName"
id="firstName"
value={this.state.firstName}
onChange={this.onChangeFirstName}
/>
</div>
<div className="col">
<label htmlFor="lastName">Last Name: </label>
<input
type="text"
className="form-control"
name="lastName"
id="lastName"
value={this.state.lastName}
onChange={this.onChangeLastName}
/>
</div>
</div>
</div>
<div className="form-group">
<label htmlFor="dob">Date of birth: </label>
<input
className="form-control"
type="text"
name="dob"
id="dob"
value={this.state.dob}
onChange={this.onChangeDateOfBirth}
/>
</div>
<div className="form-group">
<label htmlFor="hobby">Hobby: </label>
<textarea
className="form-control"
type="text"
name="hobby"
id="hobby"
value={this.state.hobby}
onChange={this.onChangeHobby}
/>
</div>
<div className="form-group">
<label htmlFor="photo">Photo: </label>
<input
className="form-control-file"
type="file"
name="photo"
id="photo"
onChange={this.fileSelectedHandler}
/>
</div>
<input type="submit"
value="Update Business"
className="btn btn-primary" />
</form>
</div>
)
}
}
list component
import React, { Component } from 'react'
import TableRow from '../TableRow/TableRow'
import axios from 'axios'
export default class StudentList extends Component {
constructor(props) {
super(props);
this.state = {
students: []
};
}
componentDidMount() {
axios.get('http://localhost:5000/api/students/')
.then(response => {
this.setState({ students: response.data });
console.log(response);
})
.catch(function (error) {
console.log(error);
})
}
tabRow() {
return this.state.students.map(function (data, i) {
return <TableRow student={data} key={i} />;
});
}
render() {
return (
<div>
<h3 align="center">List of Students</h3>
<table className="table table-striped" style={{ marginTop: 20 }}>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th>Hobby</th>
<th>Photo</th>
<th colSpan="2">Action</th>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
)
}
}