Send blob data to node using fetch, multer, express

Question

Trying to send blob object to my node server. On the client side, I record some sound 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 using 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 do not return anything:

 { upl: '' } undefined 

Spent it a long time, so any help was appreciated!

Answer 1

I just managed to make the minimum configuration of your previous example and it worked 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> 

console.log(myBlob); Blob {size: 23, type: "text/plain"} is printed on the interface. The backend prints:

 {} { 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 } 

Perhaps try also with hard-coded Blob, as in this example, for debugging purposes.