Why I get Multer error (in express js) when i want to upload a file a second time (first time works-CodePudding

If I upload one file the code works perfectly. If I want to upload another file I get this Multer error:

code: 'LIMIT_UNEXPECTED_FILE', field: 'myFile', storageErrors: []

If I want to upload another file successfully i have to reload my webpage.

Note: I don't want to upload multiple files in the same time. I want to upload one file, compute it server side and once finished, i want to upload another file and so on.

Client Code:

Script:

let file_to_download;
let upload_button = document.getElementById('btnUpload');
let alert = document.getElementById('id_alert');
let form = document.getElementById('DownBtn');
form.style.visibility = "hidden";


let is_error = false;


const inpFile = document.getElementById('inpFile');
const xhr = new XMLHttpRequest();
const formData = new FormData();



xhr.onreadystatechange = function () {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        if (xhr.status == 200) {
            file_to_download = xhr.responseText;
        } else {
            let error = 'Error during upload. Try Again!';
            is_error = true;
            alert.innerHTML = "";
            alert.innerHTML = error;
            console.log(error);
        }
    }
    
};


upload_button.addEventListener('click', (e) => {
    alert.innerHTML = "";
    formData.append('myFile', inpFile.files[0]);
    xhr.open('post', 'upload-ppt', false);
    xhr.send(formData);
    e.preventDefault();
    if(is_error){
        form.style.visibility = 'hidden';
        is_error = false;
    }else{
        form.style.visibility = 'visible';
    }   
    document.getElementById('inpFile').value = '';
});

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Polly</title>
    <script src="convert_settings.js" charset="utf-8" defer></script>
</head>
<body>
    <form>
        <div id="UpBtn">
            <input type="file" id="inpFile">
            <button id="btnUpload">Upload file</button>
        </div>
    </form>
    <form id="DownBtn">
        <div>
            <button>Download</button>
        </div>
    </form>
    <div id="id_alert"></div>
</body>

</html>

Server side:

const express = require('express');
const multer = require('multer');
const path = require('path');
const {startApp} = require('./GUI');
let file_to_download;

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'SharedFolder/pptx/');
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now()   '-'   Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix   path.extname(file.originalname)); //Appending extension
  }
})

//TO DO
//Check if file extension is pptx or ppt

function uploadFile(req, res, next) {
  const upload = multer({storage: storage}).single('myFile');
  
  //single('myFile');

  upload(req, res, function (err) {
      if (err instanceof multer.MulterError) {
          // A Multer error occurred when uploading.
          console.log('Multer error occured:');
          console.log(err);
      } else if (err) {
          // An unknown error occurred when uploading.
          console.log('Unknown error occured');
      }
      // Everything went fine. 
      next()
  })
}


const app = express();

const bodyParser = require('body-parser');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({extended: true}));
 
app.post('/upload-ppt', uploadFile, startPolly, (req,res) => {
  //console.log(req.file.filename);
  if(req.file == null){
    res.sendStatus(400);
  }else{
    res.send(req.file.filename); 
  }
  }
);

app.post('/download',(req,res) =>{
  file_to_download = './downloads/'   req.body.dwnFile;
  res.download(file_to_download);
});


async function startPolly(req, res, next){
  if(req.file != null){
    if(req.file.filename != null){
      await startApp(req.file.filename);
    }
  }
  next();
};

//start app 
const port = 3000;

app.listen(port, () => 
  console.log(`App is listening on port ${port}.`)
);

CodePudding user response：

on second post, you're appending the same file field and sending previous form

you need to reset the form on each file upload, so move it inside button click handler, along with the file:

const formData = new FormData();
const inpFile = document.getElementById('inpFile');
formData.append('myFile', inpFile.files[0]);