# Uploading recorded audio to web server (node.js, express)

**URL:** <https://discourse.processing.org/t/uploading-recorded-audio-to-web-server-node-js-express/4569>\
**Category:** Libraries\
**Created:** [October 17, 2018, 4:28pm UTC](https://discourse.processing.org/t/uploading-recorded-audio-to-web-server-node-js-express/4569 "2018-10-17T16:28:17Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![bmoren](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bmoren/32/68_2.png) [@bmoren](https://discourse.processing.org/u/bmoren)\
**Post date:** [October 19, 2018, 2:05am UTC](https://discourse.processing.org/t/uploading-recorded-audio-to-web-server-node-js-express/4569/4 "2018-10-19T02:05:09Z")

</div>

you’ll need a few thing to make this happen – of course [node.js](https://nodejs.org/en/) and [express.js](http://expressjs.com/), but also you’ll need to [require the filesystem via node ‘fs’](https://nodejs.org/api/fs.html#fs_file_system) and get the [multer npm package](https://github.com/expressjs/multer) to handle the blob.

You’ll need [p5.sound @ v0.3.9](https://github.com/processing/p5.js-sound/releases) or greater for the getBlob() function on the client side & p5.dom for this example.

good luck!

# server side code:

```javascript
const express = require('express'); //make express available
const app = express(); //invoke express
const multer = require('multer') //use multer to upload blob data
const upload = multer(); // set multer to be the upload variable (just like express, see above ( include it, then use it/set it up))
const fs = require('fs'); //use the file system so we can save files

app.post('/upload', upload.single('soundBlob'), function (req, res, next) {
  // console.log(req.file); // see what got uploaded

  let uploadLocation = __dirname + '/public/uploads/' + req.file.originalname // where to save the file to. make sure the incoming name has a .wav extension

  fs.writeFileSync(uploadLocation, Buffer.from(new Uint8Array(req.file.buffer))); // write the blob to the server as a file
  res.sendStatus(200); //send back that everything went ok

})

//serve out any static files in our public HTML folder
app.use(express.static('public'))

//makes the app listen for requests on port 3000
app.listen(3000, function(){
  console.log("app listening on port 3000!")
})

```

# client side code:

```javascript
let button;
let mic;
let soundRec;
let soundFile;

function setup() {
  mic = new p5.AudioIn();
  mic.start();
  soundRec = new p5.SoundRecorder();
  soundRec.setInput(mic)
  soundFile = new p5.SoundFile();

  button = createDiv("");
  button.position(100,100);
  button.size(100,100);
  button.style('background-color', 'grey');

  button.mouseClicked((mouseEvent)=>{
    console.log("recording....");
    soundRec.record(soundFile); // set up the soundfile to record and start recording

    let recordingTimer = setTimeout(()=>{ // setup a timeout for the recording, after the time below expires, do the tings inside the {}

      soundRec.stop(); // stop recording
      let soundBlob = soundFile.getBlob(); //get the recorded soundFile's blob & store it in a variable

      let formdata = new FormData() ; //create a from to of data to upload to the server
      formdata.append('soundBlob', soundBlob, 'myfiletosave.wav') ; // append the sound blob and the name of the file. third argument will show up on the server as req.file.originalname

          // Now we can send the blob to a server...
      var serverUrl = '/upload'; //we've made a POST endpoint on the server at /upload
      //build a HTTP POST request
      var httpRequestOptions = {
        method: 'POST',
        body: formdata , // with our form data packaged above
        headers: new Headers({
          'enctype': 'multipart/form-data' // the enctype is important to work with multer on the server
        })
      };
      // console.log(httpRequestOptions);
      // use p5 to make the POST request at our URL and with our options
      httpDo(
        serverUrl,
        httpRequestOptions,
        (successStatusCode)=>{ //if we were successful...
          console.log("uploaded recording successfully: " + successStatusCode)
        },
        (error)=>{console.error(error);}
      )
      console.log('recording stopped');

    },1000) //record for one second

  }) // close mouseClicked handler

} //close setup()

```

---

_[View the full topic](https://discourse.processing.org/t/uploading-recorded-audio-to-web-server-node-js-express/4569)._