Can't upload blob to node js backend

Question

Dynamically creating a blob from the computer's microphone. The blob is created without issue. I have tried to upload it to the backend and the files object is consistently empty

I have tried various forms of jquery ajax, vanilla javascript and fetch. On the backend I have tried to work with express-fileupload,multer and busboy.

//frontend function that creates the upload

    upload.addEventListener("click", function(event){
                  var xhr = new XMLHttpRequest();
                  xhr.onload = function(e) {
                      if (this.readyState === 4) {
                          console.log("Server returned: ", e.target.responseText);
                      }
                  };
                  console.log('blob is:',blob,' filename is:', filename);
                  let form = new FormData();
                  form.append('file-1', blob);

                  jQuery.ajax({
                      url: '/api/askjnj',
                      data: form,
                      cache: false,
                      contentType: false,
                      processData: false,
                      method: 'POST',
                      type: 'POST', // For jQuery < 1.9
                      success: function(data){
                          alert(data);
                      }
                  });

              })


//backend route code
const express       = require('express')
const router        = express.Router()
const db            = require('../database/publicdata')
const bodyParser    = require('body-parser')
const fileUpload    = require('express-fileupload')

router.use(bodyParser.json())
router.use(
  bodyParser.urlencoded({
    extended: false,
  })
)
router.use(fileUpload);

router.post('/askjnj',async(req,res)=>{
  console.log('request files:',req.files);
  console.log('req.body:', req.body);
  res.send("ok");
})

module.exports = router

I expected the console to log a filename in the console log but instead I get null. Console log of blob on the client side shows the file was created.

update reworked the ajax call to test with the following

              let obj =
                    'o' +
                    '\nv -0.500000 -0.500000 0.500000' +
                    '\nv 0.500000 -0.500000 0.500000' +
                    '\nv -0.500000 0.500000 0.500000' +
                    '\nvt 0.000000 0.000000' +
                    '\nvt 1.000000 0.000000' +
                    '\nvt 0.000000 1.000000' +
                    '\nvn 0.000000 0.000000 1.000000' +
                    '\nf 1/1/1 2/2/1 3/3/1';
                  blob = new Blob([obj]);
              console.log(blob);
              let formData = new FormData();
              formData.append("files[]",blob, "test.wav");
              formData.append("test","test");
              $.ajax({
                  url:'/api/askjnj',
                  type: 'POST',
                  data: formData,
                  success: function (data) {
                    console.log(data);
                  },
                  error: function(err){
                    processAjaxErrors(err);
                  },
                  cache: false,
                  contentType: false,
                  processData: false
              });

I am getting the test key in the req.body but req.files remains empty.

tuhin47 · Accepted Answer · 2019-07-26T17:54:22.543

I am able to write a workable code. Hope that it works for you also

HTML(EJS):

myview.ejs

<html>

<head>
  <title>File upload Node.</title>
</head>

<body>
  <button id='new-item'>BUTTON</button>

</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>

<script>
  function postItem() {
    let obj =
      'o' +
      '\nv -0.500000 -0.500000 0.500000' +
      '\nv 0.500000 -0.500000 0.500000' +
      '\nv -0.500000 0.500000 0.500000' +
      '\nvt 0.000000 0.000000' +
      '\nvt 1.000000 0.000000' +
      '\nvt 0.000000 1.000000' +
      '\nvn 0.000000 0.000000 1.000000' +
      '\nf 1/1/1 2/2/1 3/3/1';
    blob = new Blob([obj]);
    console.log(blob);
    let formData = new FormData();
    formData.append("files[]", blob, "test.wav");
    formData.append("test", "test");
    $.ajax({
      url: '/api/askjnj',
      type: 'POST',
      data: formData,
      success: function(data) {
        console.log(data);
      },
      error: function(err) {
        console.log(err);
      },
      cache: false,
      contentType: false,
      processData: false
    });
  } //postItem()

  $('#new-item').on('click', function() {
    postItem();
  });
</script>

</html>

Router:

myroutes.js

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

//var router = express.Router();
const multer = require('multer');
const upload = multer();
app.set('view engine', 'ejs');

app.get('/', function (req, res) {
    console.log('marhaba');
    res.render('myview', {});
});



app.post('/api/askjnj', upload.any(), (req, res) => {
    console.log('Here');
    console.log('Files: ', req.files);
    res.send('ok');
});
app.listen(3000, function () {
    console.log("Working on port 3000");
});

command : node myview.js

trying this now. Thank you for the insight – sixstring Jul 29 '19 at 23:57 — sixstring, Jul 29 '19 at 23:57

score 0 · Answer 2 · answered Jul 25 '19 at 14:33

0

Check this out: How can javascript upload a blob?. It seems like they are trying to do the same type of thing as you.

tl;dr use FormatData() to package the blobs as the correct data type.

answered Jul 25 '19 at 14:33

KolCrooks

514
1
5
12

Thanks for that. I have a few more things to try. I didn't catch that one when I was searching. i'll upvote you as soon as I get it working. – sixstring Jul 25 '19 at 17:42

Can't upload blob to node js backend

2 Answers2