Cloudinary audio file upload - React , Node & Express

cloudinary.js

// server
// config/cloudinary.js

const cloudinary = require('cloudinary');

cloudinary.config({
  cloud_name: 'xxxx',
  api_key: 'xxxx',
  api_secret: 'xxxx'
});



module.exports = cloudinary

track-service.js

// client
// src/lib/track-service.js


import axios from "axios";

class Track {
  constructor() {
    this.track = axios.create({
      baseURL: "http://localhost:5000/track",
      withCredentials: true
    });
  }

  
  getUrl(file) {
    return this.track
      .post("/upload/url", file, { "Content-Type": "multipart/form-data" })
      .then(({ data }) => data ); // response.data
  }
}

const trackService = new Track();
// `trackService` is the object with the above axios request methods

export default trackService;

track.js

// server
// routes/track.js

const multer  = require('multer') //use multer to upload blob data
const upload = multer(); // setup the multer
const cloudinaryConfig = require('./../config/cloudinary');
const fs = require('fs'); //use the file system to save the files on the server


// POST track/upload/url.   -  Upload mp3 files to the clodudinary.
router.post('/upload/url', upload.single('file'), (req, res, next) => {
  // upload.single('file') is the multer setup which reads the incoming "mulipart/form-data"
  // parses it and adds it to the req.file with all the information and the Buffer (req.file.buffer).

  // absolute path where to save the temporary file. Includes the file name and extension
  // In order for the below writeFileSync operation to work properly, create additional directory named uploads
  // in the routes directory, as '/routes/uploads'
  let uploadLocation = __dirname + '/uploads/' + req.file.originalname;

  // write the BLOB to the server as a file
  fs.writeFileSync(uploadLocation, Buffer.from(new Uint8Array(req.file.buffer)) );

  cloudinaryConfig.v2.uploader.upload(
    uploadLocation, 
    { resource_type: "video", folder: `audiofiles/`, overwrite: true },
    (error, result) => {
      if (error) res.status(500).json(error);
      else {
        // Delete the temporary file from the server
        fs.unlink(uploadLocation, (deleteErr) => {
          if (deleteErr) res.status(500).send(deleteErr);
          
          console.log('temp file was deleted');
          res.status(200).json({fileUrl: result.secure_url});
        });
        
      }
    }
  );  
});



module.exports = router;

Upload.js

// client
// src/components/Upload.js


import React, { Component } from "react";
import trackService from "../lib/track-service";

class Upload extends Component {
  state = {
    file: null,
    url: undefined
  };

// File input handler //
///////////////////////
  fileOnChange = event => {
    const file = event.target.files[0];
    const fd = new FormData();
    fd.append("file", file);
    trackService.getUrl(fd).then(fileUrl => {
      this.setState({ url: fileUrl });
    });
  };

  render() {
    return (
      <div>
        <h1>Upload Track</h1>

        <form onSubmit={this.handleFormSubmit} encType="multipart/form-data">
          <label>File</label>
          <input type="file" name="url" onChange={this.fileOnChange} />
        </form>
      </div>
    );
  }
}

export default Upload;

Thank you it worked for me..