Expressjs to upload an image using multer saves an image in a weird format

Question

I am trying to build an API which will take in image so used multer for that purpose, I am getting a success for uploading an image but it saves in some weird format not the actual format I tried to save. I ll post the related code here.

in app.js

const multer = require('multer');
app.use(function(req, res, next) { //allow cross origin requests
    res.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");
    res.header("Access-Control-Allow-Origin", "http://localhost:3001");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Credentials", true);
    next();
});


app.use(express.static('../client'));
app.use(bodyParser.json());

app.use(multer({dest:'./angular-src/src/assets/'}).single('file'));

app.use(express.static(path.join(__dirname,'public')));

In the API File

const express = require('express');
const router = express.Router();
const multer = require('multer');
const storage = multer.diskStorage({ //multers disk storage settings
    filename: function (req, file, cb) {
        cb(null, file.originalname);
    }
});

const upload = multer({
    storage: storage
}).single('file');



router.post('/upload',function (req,res) {
   upload(req,res,function (err) {
       if (err){
           res.json({success:false});
           return;
       }else{
           // console.log(req.files[0].originalname);
           res.json({success: true, filename: req.file});
       }
   });
});


module.exports = router;

The stored image looks like this

The second one which has alpha numeric characters in it.

Image data is something like this

{
    "_type": "Project",
    "_id": "AAAAAAFF+h6SjaM2Hec=",
    "name": "Untitled",
    "ownedElements": [
        {
            "_type": "UMLModel",
            "_id": "AAAAAAFF+qBWK6M3Z8Y=",
            "_parent": {
                "$ref": "AAAAAAFF+h6SjaM2Hec="
            },
            "name": "Model",
            "ownedElements": [
                {
                    "_type": "UMLClassDiagram",
                    "_id": "AAAAAAFF+qBtyKM79qY=",
                    "_parent": {
                        "$ref": "AAAAAAFF+qBWK6M3Z8Y="
                    },
                    "name": "Main",
                    "visible": true,
                    "defaultDiagram": true
                },

This is how I am making a call from postman

Answer 1

This issue has been solved, for those who has similar kind off issue. What worked for me was doing

app.use(multer({dest:'./angular-src/src/assets/'}).single('file')); 

in the API class itself.