Send blob data to node using fetch, multer, express

Question

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!

Part of multer var upload = multer({ dest: __dirname + '/../public/uploads/' }); var type = upload.single('upl'); — darkace
– darkace, Commented Sep 24, 2016 at 15:33
Do you get anything if you try to send just a regular string instead of blobData, and what does the console.log(blobData) tell you. — adeneo
– adeneo, Commented Sep 24, 2016 at 15:37
What Content-Type header does the browser send if you view the fetch network request from your browser's web dev tools? — mscdex
– mscdex, Commented Sep 24, 2016 at 15:38
blobData is an object Blob {size: 6937, type: "audio/wav"} size : 6937 type : "audio/wav" __proto__ : Blob — darkace
– darkace, Commented Sep 24, 2016 at 15:40

Michael Troger · Accepted Answer · 2016-09-24 17:29:08Z

32

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.

edited Sep 24, 2016 at 17:29

answered Sep 24, 2016 at 15:47

Michael Troger

3,5272 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Al2x Over a year ago

I tried with hard-code huge blobe and it worked like a charm! thanks

Shashank Bhatt Over a year ago

i am trying the same code with canvas.toBlob and passing blob as parameter to callback but i am not getting anything on server

Cesar Morillas · Accepted Answer · 2022-11-11 00:14:05Z

1

You don't need to use multer. Just use express.raw() inside app.post()

var express = require('express');
var app = express();

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

app.post('/api/test', express.raw({type: "*/*"}), function (req, res) {
   console.log(req.body);
   // do stuff with file
});

app.listen(3000);

answered Nov 11, 2022 at 0:14

Cesar Morillas

97710 silver badges13 bronze badges

Collectives™ on Stack Overflow

Send blob data to node using fetch, multer, express

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related