Menu
I am not able to understand why firebase is not accepting the image, the following message is appearing: TypeError: Cannot read property 'byteLength' of undefined
I tried to add the 'byteLength' value to my object(req.file) but the same error continued.
Just below is my implementation
const firebase2 = require('firebase/app');
require('firebase/storage');
router.put('/addimage', multer.single('picture'), async (req, res, next) => {
const newName = uuidv1() + "-" + req.file.originalname;
var storageRef = firebase2.storage().ref('photo/'+ newName);
storageRef.put(req.file);
});
This html example I did work. I am wanting to make a backend so I am migrating to nodejs
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
<style>
body {
display: flex;
min-height: 100vh;
width: 100%;
padding: 0;
margin: 0;
align-items: center;
justify-content: center;
flex-direction: column;
}
#uploader {
-webkit-appearance: none;
appearance: none;
width: 50%;
margin-bottom: 10%;
}
</style>
</head>
<body>
<progress value="0" max="100" id="uploader">0%</progress>
<input type="file" value="upload" id="fileButton"></input>
<script src="https://gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "xxxxx",
authDomain: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxxxx",
messagingSenderId: "xxxxxx",
appId: "xxxxxxx",
measurementId: "xxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change', function(e){
var file = e.target.files[0];
var storageRef = firebase.storage().ref('sweet_fifs/'+ file.name);
var task = storageRef.put(file);
task.on('state_changed',
function progress(snapshot) {
var percetage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percetage;
},
function error(err) {
}
)
});
</script>
</body>
510
asked Mar 03 '26 05:03
The Reference#put method expects a Blob | Uint8Array | ArrayBuffer as it's first argument. The req.file object you provide is none of these. However, we can see that there is a Buffer object available as a property of the req.file object and the same can be said of the content's type in that buffer. So all we need to do is pull out those values and pass them to Reference#put(). Also don't forget to create a response for the user and handle any errors.
router.put('/addimage', multer.single('picture'), async (req, res, next) => {
const newName = uuidv1() + "-" + req.file.originalname;
const storageRef = firebase2.storage().ref('photo/'+ newName);
storageRef.put(req.file.buffer, {
contentType: req.file.mimetype
})
.then(() => storageRef.getDownloadURL()) // after upload, obtain the download URL
.then(
(url) => {
// persisted to storage successfully and obtained download URL
res
.status(201)
.set("Content-Location", url) // use "Location" if you want to redirect to it
.json({
"message": "Upload successful"
});
},
(err) => {
// failed to save to storage
logger.error({
message: "Upload failed with error",
errorMessage: err.message,
errorStack: err.stack
});
res
.status(500)
.json({
"message": "Upload failed",
"error": err.code || "unknown"
});
}
)
.catch((err) => {
// if here, something has gone wrong while sending back the response
// likely a syntax error, or sending responses multiple times
logger.error({
message: "Unexpected rejection during /addImage",
errorMessage: err.message,
errorStack: err.stack
});
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
