如何检查文件输入以了解node.js中是否为空

Question

I'm trying to check whether the user has actually chosen a file before pressing on upload or not, if so then check if the file is bigger than 4 MB. If the user has pressed on upload without choosing a file then a message should be sent telling them to go back and choose a file. But this code doesn't seem to work.

 <div id="postUpload-wrapper"> <form id="uploadpost-form" action="/uploadpost" enctype="multipart/form-data" method="POST"> <input type="text" id="postname" placeholder="Title" name="postname"> <br> <input id="fileupload" type="file" name="image"> <br> <input type="submit" id "uploadpost-btn" value="Upload" name="uploadpost"> </form> </div> 

//UPLOAD A POST

router.post('/uploadpost', upload.single('image'), function(req, res){
var errors = "";

if(req.body.postname === ""){
    errors += "Write a title";
    res.send(errors);
    return false;
}

//problem here
if(req.file.size === 0){
    errors += "You need to choose a file";
    res.send(errors);
    return false;
}else{
    if(req.file.size > 4000000){
        errors += "Files can only be up to 4 MB in size";
        res.send(errors);
        return false;
    }
}

Answer 1

I believe you should check this on the client side before allowing the file to be uploaded.

if(document.getElementById("uploadpost-btn").value != "") {
   // you have a file
}

You can later check on the server-side. If req.body has any data then there was a file uploaded.

Answer 2

Try setting input type="submit" element property disabled to "true" , use onchange event of input type="file" element to check if user selected file at FileList object , set type="submit" element to disabled="true" , disabled="false" if file.size greater than 4000000 bytes . If file not selected , file size over 4000000 bytes submit button set to disabled

 var input = document.getElementById("fileupload"); input.onchange = function() { var file = this.files, submit = this.nextElementSibling.nextElementSibling; if (file.length > 0) { if (file[0].size >= 4000000) { submit.disabled = true; alert("file size limit") } else { submit.disabled = false; console.log(this.files) } } } 

 <div id="postUpload-wrapper"> <form id="uploadpost-form" action="/uploadpost" enctype="multipart/form-data" method="POST"> <input type="text" id="postname" placeholder="Title" name="postname"> <br> <input id="fileupload" type="file" name="image"> <br> <input type="submit" id="uploadpost-btn" value="Upload" name="uploadpost" disabled="true"> </form> </div>