简体   繁体   中英

Upload images to uploads folder _ JavaScript

Users will be able to either send a text post(input type="text") or image post(input type="file"). But they won't be sending both

Here's my form (in Jade):

form#addPost(action="/uploads", method="post", placeholder='Add your ideas here...')
            input#postinput(type="text", name="contents" placeholder="Add your ideas here...")
            div.privacy(class="onoffswitch", id='privacytog')
                input(type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked)
                label(class="onoffswitch-label" for="myonoffswitch")
                    span(class="onoffswitch-inner")
                    span(class="onoffswitch-switch")
            <div style="height:0px;overflow:hidden">
            <input type="file" id="fileInput"  name="fileInput" accept="image/*">
            </div>
            input#submit1(type="submit", value="Post")

And Here's my app.js(server-side code)

var util = require("util");
var fs = require("fs");
var bodyParser = require('body-parser');
var multer = require("multer");

app.use(multer({
    dest: "./public/uploads/"
}));

app.post("/uploads", function(req, res) {
    var data = req.body;
    var id = req.user._id;
    var username = req.user.username;
    var date = Date();
    var onOff = false;
    if (req.body.onoffswitch) {
      onOff = true;
    }


    //Images upload to uploads folder
    if (req.files) {

      console.log(util.inspect(req.files));
      if (req.files.fileInput.size === 0) {
                  return next(new Error("Hey, first would you select a file?"));
      }
      fs.exists(req.files.fileInput.path, function(exists) {
        if(exists) {
          res.end("Got your file!");
        } else {
          res.end("Well, there is no magic for those who don’t believe in it!");
        }
    });
  }



    User.findById(id, function(err, user) {
      if (err) return handleErr(err);

      var uid = shortid.generate();

      newPost = {
        //If sending down an Image use data.fileInput not contents
        contents: [data.contents || '/img/'+data.fileInput],
        _id: uid,
        privacy: onOff,
        username: req.user.username,
        date: date,
        rating: Number(0),
        uwv: []
      };

      user.posts.push(newPost);

      user.save(function(err, user){
        if(err) return handleErr(err);
        if(newPost.privacy === 'false'){
          for (var i = 0; i < user.followers.length; i++) {
            User.findOne({username:user.followers[i]}, function(err, follower){
              follower.discover.push(newPost)
              follower.save();
            });
          }
        }
      });
    });

}

Images are being uploaded and saved to uploads folder. However when posting just a text post(only filling in input type="text") it keeps throwing back the error: Cannot read property 'size' of undefined

Typically browsers will not send the file field if there is no file selected, so there is no way for the backend to know that there was such a field.

Instead just check for the existence of the file field: if (!req.files.fileInput) . You may also want to check that the file is not empty: if (!req.files.fileInput || !req.files.fileInput.size)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM