Error checking and deleting old profile image

This commit is contained in:
2019-12-03 23:46:04 -05:00
parent ebca5192e0
commit 79051f2243
2 changed files with 108 additions and 103 deletions

View File

@@ -266,97 +266,34 @@ exports.getAuthenticatedUser = (req, res) => {
// Uploads a profile image // Uploads a profile image
exports.uploadProfileImage = (req, res) => { exports.uploadProfileImage = (req, res) => {
// const BusBoy = require("busboy"); const BusBoy = require("busboy");
// const path = require("path"); const path = require("path");
// const os = require("os"); const os = require("os");
// const fs = require("fs"); const fs = require("fs");
// const busboy = new BusBoy({ headers: req.headers });
// let imageFileName;
// let imageToBeUploaded = {};
// let oldImageFileName = req.userData.imageUrl.split("/o/")[1].split("?alt")[0];
// console.log(`old file: ${oldImageFileName}`);
// busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {
// if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
// return res.status(400).json({ error: "Wrong filetype submitted" });
// }
// // console.log(fieldname);
// // console.log(filename);
// // console.log(mimetype);
// const imageExtension = filename.split(".")[filename.split(".").length - 1]; // Get the image file extension
// imageFileName = `${Math.round(Math.random() * 100000000000)}.${imageExtension}`; // Get a random filename
// const filepath = path.join(os.tmpdir(), imageFileName);
// imageToBeUploaded = { filepath, mimetype };
// file.pipe(fs.createWriteStream(filepath));
// });
// busboy.on("finish", () => {
// admin.storage().bucket().upload(imageToBeUploaded.filepath, {
// resumable: false,
// metadata: {
// metadata: {
// contentType: imageToBeUploaded.mimetype
// }
// }
// })
// .then(() => {
// const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`;
// return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
// })
// .then(() => {
// if (oldImageFileName !== "no-img.png") {
// admin.storage().bucket().file(oldImageFileName).delete()
// .then(() => {
// return res.status(201).json({ message: "Image uploaded successfully1"});
// })
// .catch((err) => {
// console.log(err);
// return res.status(201).json({ message: "Image uploaded successfully2"});
// })
// // return res.status(201).json({ message: "Image uploaded successfully"});
// } else {
// return res.status(201).json({ message: "Image uploaded successfully3"});
// }
// })
// .catch((err) => {
// console.error(err);
// return res.status(500).json({ error: err.code})
// })
// });
// busboy.end(req.rawBody);
const BusBoy = require('busboy');
const path = require('path');
const os = require('os');
const fs = require('fs');
const busboy = new BusBoy({ headers: req.headers }); const busboy = new BusBoy({ headers: req.headers });
let imageToBeUploaded = {};
let imageFileName; let imageFileName;
let imageToBeUploaded = {};
let oldImageFileName = req.userData.imageUrl ? req.userData.imageUrl.split("/o/")[1].split("?alt")[0] : null;
// console.log(`old file: ${oldImageFileName}`);
busboy.on('file', (fieldname, file, filename, encoding, mimetype) => { busboy.on("file", (fieldname, file, filename, encoding, mimetype) => {
// console.log(fieldname, file, filename, encoding, mimetype);
if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') { if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
return res.status(400).json({ error: 'Wrong file type submitted' }); return res.status(400).json({ error: "Wrong filetype submitted" });
} }
// my.image.png => ['my', 'image', 'png'] // console.log(fieldname);
const imageExtension = filename.split('.')[filename.split('.').length - 1]; // console.log(filename);
// 32756238461724837.png // console.log(mimetype);
imageFileName = `${Math.round( const imageExtension = filename.split(".")[filename.split(".").length - 1]; // Get the image file extension
Math.random() * 1000000000000 imageFileName = `${Math.round(Math.random() * 100000000000)}.${imageExtension}`; // Get a random filename
).toString()}.${imageExtension}`;
const filepath = path.join(os.tmpdir(), imageFileName); const filepath = path.join(os.tmpdir(), imageFileName);
imageToBeUploaded = { filepath, mimetype }; imageToBeUploaded = { filepath, mimetype };
file.pipe(fs.createWriteStream(filepath)); file.pipe(fs.createWriteStream(filepath));
}); });
busboy.on('finish', () => { busboy.on("finish", () => {
admin // Save the file to the storage bucket
.storage() admin.storage().bucket(config.storageBucket).upload(imageToBeUploaded.filepath, {
.bucket(config.storageBucket)
.upload(imageToBeUploaded.filepath, {
resumable: false, resumable: false,
metadata: { metadata: {
metadata: { metadata: {
@@ -365,18 +302,84 @@ exports.uploadProfileImage = (req, res) => {
} }
}) })
.then(() => { .then(() => {
const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${ // Add the new URL to the user's profile
config.storageBucket const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${config.storageBucket}/o/${imageFileName}?alt=media`;
}/o/${imageFileName}?alt=media`;
return db.doc(`/users/${req.user.handle}`).update({ imageUrl }); return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
}) })
.then(() => { .then(() => {
return res.json({ message: 'image uploaded successfully' }); // Delete their old image if they have one
if (oldImageFileName !== null && oldImageFileName !== "no-img.png") {
admin.storage().bucket(config.storageBucket).file(oldImageFileName).delete()
.then(() => {
return res.status(201).json({ message: "Image uploaded successfully1"});
})
.catch((err) => {
console.log(err);
return res.status(201).json({ message: "Image uploaded successfully2"});
})
// return res.status(201).json({ message: "Image uploaded successfully"});
} else {
return res.status(201).json({ message: "Image uploaded successfully3"});
}
}) })
.catch((err) => { .catch((err) => {
console.error(err); console.error(err);
return res.status(500).json({ error: 'something went wrong' }); return res.status(500).json({ error: err.code})
}); })
}); });
busboy.end(req.rawBody); busboy.end(req.rawBody);
// const BusBoy = require('busboy');
// const path = require('path');
// const os = require('os');
// const fs = require('fs');
// const busboy = new BusBoy({ headers: req.headers });
// let imageToBeUploaded = {};
// let imageFileName;
// busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
// // console.log(fieldname, file, filename, encoding, mimetype);
// if (mimetype !== 'image/jpeg' && mimetype !== 'image/png') {
// return res.status(400).json({ error: 'Wrong file type submitted' });
// }
// // my.image.png => ['my', 'image', 'png']
// const imageExtension = filename.split('.')[filename.split('.').length - 1];
// // 32756238461724837.png
// imageFileName = `${Math.round(
// Math.random() * 1000000000000
// ).toString()}.${imageExtension}`;
// const filepath = path.join(os.tmpdir(), imageFileName);
// imageToBeUploaded = { filepath, mimetype };
// file.pipe(fs.createWriteStream(filepath));
// });
// busboy.on('finish', () => {
// admin
// .storage()
// .bucket(config.storageBucket)
// .upload(imageToBeUploaded.filepath, {
// resumable: false,
// metadata: {
// metadata: {
// contentType: imageToBeUploaded.mimetype
// }
// }
// })
// .then(() => {
// const imageUrl = `https://firebasestorage.googleapis.com/v0/b/${
// config.storageBucket
// }/o/${imageFileName}?alt=media`;
// return db.doc(`/users/${req.user.handle}`).update({ imageUrl });
// })
// .then(() => {
// return res.json({ message: 'image uploaded successfully' });
// })
// .catch((err) => {
// console.error(err);
// return res.status(500).json({ error: 'something went wrong' });
// });
// });
// busboy.end(req.rawBody);
} }

View File

@@ -168,11 +168,13 @@ export class edit extends Component {
}; };
handleImageChange = (event) => { handleImageChange = (event) => {
if (event.target.files[0]) {
const image = event.target.files[0]; const image = event.target.files[0];
const formData = new FormData(); const formData = new FormData();
formData.append('image', image, image.name); formData.append('image', image, image.name);
this.props.uploadImage(formData); this.props.uploadImage(formData);
} }
}
handleEditPicture = () => { handleEditPicture = () => {
const fileInput = document.getElementById('imageUpload'); const fileInput = document.getElementById('imageUpload');