Question

17

Send blob data to node using fetch, multer, express

rated 0 times [ 18] [ 1] / answers: 1 / hits: 43258 / 8 Years ago, sat, september 24, 2016, 12:00:00

Trying to send a blob object to my node server. On the client side I'm recording some audio using MediaRecorder and then I want to send the file to my server for processing.

      saveButton.onclick = function(e, audio) {

        var blobData = localStorage.getItem('recording');

        console.log(blobData);



        var fd = new FormData();

        fd.append('upl', blobData, 'blobby.raw');



        fetch('/api/test',

          {

            method: 'post',

            body: fd

          })

        .then(function(response) {

          console.log('done');

          return response;

        })

        .catch(function(err){ 

          console.log(err);

        });



      }

This is my express route, which uses multer:

  var upload = multer({ dest: __dirname + '/../public/uploads/' });

  var type = upload.single('upl');

  app.post('/api/test', type, function (req, res) {

    console.log(req.body);

    console.log(req.file);

    // do stuff with file

  });

But my logs return nothing:

{ upl: '' }

undefined

Been spending a long time on this so any help appreciated!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

roberts

Add To Favorites

Follow

Total Points: 212

Total Questions: 101

Total Answers: 101

Location: Philippines

Member since Thu, Apr 14, 2022

2 Years ago

answered 8 Years ago kurtisl · Accepted Answer

I was just able to run a minimum configuration of your above example and it worked fine for me.

Server:

var express = require('express');

var multer  = require('multer');

var app = express();



app.use(express.static('public')); // for serving the HTML file



var upload = multer({ dest: __dirname + '/public/uploads/' });

var type = upload.single('upl');



app.post('/api/test', type, function (req, res) {

   console.log(req.body);

   console.log(req.file);

   // do stuff with file

});



app.listen(3000);

HTML file in public:

<script>

var myBlob = new Blob([This is my blob content], {type : text/plain});

console.log(myBlob);



// here unnecessary - just for testing if it can be read from local storage

localStorage.myfile = myBlob;



var fd = new FormData();

fd.append('upl', localStorage.myfile, 'blobby.txt');



fetch('/api/test',

{

    method: 'post',

    body: fd

}); 

</script>

The console.log(myBlob); on the frontend is printing Blob {size: 23, type: text/plain}. The backend is printing:

{}

{ fieldname: 'upl',

  originalname: 'blobby.txt',

  encoding: '7bit',

  mimetype: 'text/plain',

  destination: '/var/www/test/public/uploads/',

  filename: 'dc56f94d7ae90853021ab7d2931ad636',

  path: '/var/www/test/public/uploads/dc56f94d7ae90853021ab7d2931ad636',

  size: 23 }

Maybe also try it with a hard-coded Blob like in this example for debugging purposes.