MERN stack binary image is just a black square - mongodb

Question

I'm building a full-stack app with a MERN stack (mongo db, Express, React and Node.js)
I'm currently able to cave my image to the mongo db as a binary file.
The the mongo shell database output is
"img" : BinData(0,"QzpcZmFrZXBhdGhcc2FtcGxlLnBuZw=="),
so I would assume that the upload is fine.
When it comes to converting it back to an image on the front end I am using
src={`data:image/png;`+btoa(`${Buffer.from(img.data).toString('base64')}`)}
which gives me a string that looks like this...
data:image/png;UXpwY1ptRnJaWEJoZEdoY2MyRnRjR3hsTG5CdVp3PT0=
However, on the front-end it shows a broken image icon and when I go to this link it just shows
a teeny tiny black square.
I have tried a lot of combinations of concatenating the string but can't seem to get it to display.
Thanks in advance !

Answer 1

Ok, so after many differnet strategies I managed to combine a few bit of code here and there plus some improvisation to build this...
ImageUpload.js
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
class ImageUpload extends React.Component {
constructor(props) {
super(props);
this.state = {
image: {
name: "",
img: ""
},
submitted: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const { name, value } = event.target;
const { image } = this.state;
this.setState({
image: {
...image,
[name]: value,
}
});
}
onSelectChange = (e) => {
const values = [...e.target.selectedOptions].map(opt => opt.value);
this.props.onChange(values);
};
handleSubmit(event) {
event.preventDefault();
console.log(this.state);
this.setState({ submitted: true });
const { image } = this.state;
if (image.name) {
this.props.register(image);
}
}
_onChange = (e) => {
const file = this.refs.uploadImg.files[0]
const reader = new FileReader();
reader.onloadend = () => {
this.setState({
image: {
img: reader.result
}
})
}
if (file) {
reader.readAsDataURL(file);
this.setState({
image: {
img: reader.result
}
})
}
else {
this.setState({
image: {
img: ""
}
})
}
}
render() {
const { registering } = this.props;
const { image, submitted } = this.state;
console.log(this.handleChange);
render() {
const { registering } = this.props;
const { image, submitted } = this.state;
console.log(this.handleChange);
return (
<div className="col-md-9 col-md-offset-3">
<form name="form" onSubmit={this.handleSubmit}>
<div className={'form-group' + (submitted && !image.img ? ' has-error' : '')}>
<label htmlFor="img">Image</label>
<input
ref="uploadImg"
type="file"
name="selectedFile"
onChange={this._onChange}>
{/* value={toString(window.form.elements[0].nextElementSibling.src)}> */}
</input>
<img src={this.state.image.img} />
{submitted && !image.img &&
<div className="help-block">Image is required</div>
}
</div>
<div className="form-group">
<button className="btn btn-primary">Register Building</button>
{registering && }
<Link to="/home" className="btn btn-link">Cancel</Link>
</div>
</form>
</div>
The mongoose Schema is just a simple string:
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
Apartment = require('../apartments/apartment.model')
const schema = new Schema(
name: { type: String },
img: { type: String }
}
);
schema.set('toJSON', { virtuals: true });
module.exports = mongoose.model('image', schema);
Hope it helps anyone else. Also if anyone wouldn't mind explaining the potential flaws in uploading extrememly looong strings for images (and any solutions to this) that'd be a big help too. Would there be a way to enter this as a Buffer base64 and convert it? would the db read it this way ?
Thanks !