Hello all, I have been following and have finished the tutorial for the Full Stack React & Firebase Tutorial - Build a social media app that I have found on Youtube.
It has honestly taught me so much to the fact that I have carried building on top of it.
I have now created it that when user uploads their profile image it creates a firebase sub folder which is there unique identifier.
I have now run in to a issue with the issue being I am trying for when a user post something(in tutorial called screams) that they can post an image as well as text. I have been trying to think of way to implement this to the back end already on top of what was built.
Below is the cold I have for when a user wants to post something
exports.postOnePost = (req, res) => {
if (req.body.body.trim() === '') {
return res.status(400).json({body: 'body must not be empty'})
}
if (req.body.riddimName.trim() === '') {
return res.status(400).json({imageName: ' image name must not be empty'})
}
const newPost = {
// this is where you would add the post of an instrumental.
body: req.body.body,
imageName: req.body.imageName,
userHandle: req.user.handle,
userImage: req.user.imageUrl,
postedAt: new Date().toISOString(),
likeCount: 0,
commentCount: 0
};
// where data will be added within firestore
db
.collection('posts')
.add(newPost)
// if created successfully will display
.then((doc) => {
const resPost = newPost;
resPost.postId = doc.id;
res.json(resPost);
})
// if an error occured will change the response to 500 (server error)
// will also output the error in teh web console
.catch(err => {
res.status(500)
.json({error: 'something went wrong'});
console.error(err);
})
}
Here is the code for when a user uploads a display picture
exports.uploadImage = (req, res) => {
const BusBoy = require('busboy');
const path = require('path');
const os = require('os');
const fs = require('fs');
const busboy = new BusBoy({headers: req.headers})
let imageFileName;
let imageToBeUploaded = {};
busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
if(mimetype !== 'image/jpeg' && mimetype !== 'image/jpg' && mimetype !== 'image/png'){
return res.status(400).json({error: 'Wrong file type submitted'})
}
const imageExtension = filename.split('.')[filename.split('.').length - 1];
imageFileName = `${Math.round(Math.random()*10000000000)}.${imageExtension}`;
const filepath = path.join(os.tmpdir(), imageFileName);
imageToBeUploaded = {filepath, mimetype};
file.pipe(fs.createWriteStream(filepath));
});
busboy.on('finish', () => {
admin.storage().bucket(firebaseConfig.storageBucket).upload(imageToBeUploaded.filepath, {
destination: `${req.user.handle}/${imageFileName}`,
resumable: false,
metadata: {
metadata: {
contentType: imageToBeUploaded.mimetype
}
}
})
.then(() => {
//const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${firebaseConfig.storageBucket}/o/${imageFileName}?alt=media`;
const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${firebaseConfig.storageBucket}/o/${req.user.handle}%2F${imageFileName}?alt=media`
return db.doc(`/users/${req.user.handle}`).update({imageUrl});
})
.then(() => {
res.json({ message: ' Image uploaded successfully'});
})
.catch(err => {
console.error(err);
return res.status(500).json({ error: err.code});
});
});
busboy.end(req.rawBody);
}
I have been trying to merge them together but have had no luck
If you would be able to help me that would be great tank you
