Search code examples
javascripthtmlnode.jsexpressmulter

How to upload a file without the submit button?


I am trying to have my upload button upload a file to a temp directory without needing to click a submit button but i get an error stating : Cannot read properties of undefined (reading 'path').

html.js     

<style>     

input[type="file"] {
position: absolute;
z-index: -1;
top: 15px;
left: 20px;
font-size: 1px;
color: #b8b8b8;
}
.button-wrap {
    position: relative;
}

</style>
<div class="button-wrap">
     <form id="fileUploadForm" action="/fileUpload" 
          enctype="multipart/form-data" method="POST">
          <label class="button" for="upload">Upload File</label>
          <input id="upload" name="upload" type="file" 
          onchange="fileUploadForm.submit()">
     </form>
</div>
node.js 

app.post('/fileUpload', upload.single('filetoupload'), (req, res, err)=>{

var filepath = req.file.path
filename = './public/temp/' + req.file.filename
var jFile =  filename + '.json'




console.log(req, fileStorage, "filename: ",filename, "filepath: ",filepath, "jFile,",  
jFile);

res.status(204).end();
});

Solution

  • Your HTML should be:
    
    <div class="button-wrap">
             <form id="fileUploadForm" action="/fileUpload" enctype="multipart/form-data" method="POST">
                <label class="button" for="upload">Upload File</label>
                <input id="upload" name="upload" type="file" onchange="fileUploadForm.submit()">
            </form>
     </div>