0

I have a form in which i have one user input field where user type his name and one type="file" which need to be uploaded on server .I am able to upload file on server but I want to fetch request parameter on server (user enter name) .I used body-parser to get value (req.body) , but getting undefined

HTML

<form id="fileUploadForm">
    <input type="file" name="file" id="fileId"/>
    <input type="submit" value="Upload" name="submit" class="submit">
    username <input type="text" placeholder="enter first name"  name="username" />
</form>

JS client

$('.submit').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            if ($('#fileId').val().length === 0) {
                alert('please insert file')
            } else {
                var form = $('#fileUploadForm')[0];

                // Create an FormData object
                var data = new FormData(form);
                $.ajax({
                    url: 'http://localhost:3000/upload',
                    type: 'POST',
                    data: data,
                    cache: false,
                    enctype: 'multipart/form-data',
                    dataType: 'json',
                    processData: false, // Don't process the files
                    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
                    success: function (data, textStatus, jqXHR) {
                        if (typeof data.error === 'undefined') {
                            // Success so call function to process the form
                        }
                        else {
                            // Handle errors here
                            console.log('ERRORS: ' + data.error);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        // Handle errors here
                        console.log('ERRORS: ' + textStatus);
                        // STOP LOADING SPINNER
                    }
                });
            }
        })

my file is uploaded successfully on server , but I am confused on these two lines

  var form = $('#fileUploadForm')[0];
    // Create an FormData object
  var data = new FormData(form);

what is in data ? from my point of view data contain username value and file data which need to be uploaded

server code

how to fetch username and file data value on server .I already user bodypaser plugin , but req.body is undefined

here is my code

var express = require('express');
var multer = require('multer');
var bodyParser = require('body-parser');
var cors = require('cors');
var app = express();
var PORT = process.env.PORT || 3000;

// use of body parser
app.use(bodyParser.urlencoded({
    extended: true
}));

app.use(bodyParser.json());
app.use(cors());

var storage = multer.diskStorage({ //multers disk storage settings
    destination: function (req, file, cb) {
        cb(null, './uploads/')
    },
    filename: function (req, file, cb) {
        var datetimestamp = Date.now();
        cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length - 1])
    }
});
var upload = multer({ //multer settings
    storage: storage
}).single('file');


app.post('/upload', function (req, res) {
    console.log(req.body)
    console.log(req)
    upload(req, res, function (err) {
        if (err) {
            res.json({error_code: 1, err_desc: err});
            return;
        }
        res.json({error_code: 0, err_desc: null});
    });
});


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

how to get form field values on server which is passed from client ?

user944513
  • 12,247
  • 49
  • 168
  • 318

1 Answers1

0

Add one more key in formdata.

var data = new FormData();
var files = $("#fileId").get(0).files;
data.append("fileUploadForm", files[0]);
data.append("Username",$('[name="username"]').val());

Use reference Link

Manish Vadher
  • 1,524
  • 15
  • 14