TypeError: Cannot read property 'byteLength' of undefined with nodejs

user_7235823 0
Viewed 2176

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);  
});

enter image description here

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>
firebase node.js
1 Answers

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
     });
   });
});
user_30681900
Related