Develop Reference

Problem uploading image to local folder with node and Multer

I'm struggling uploading an image to a local folder using Node and Multer.
The response i get it's successfully, but the image don't save in the folder.
I have already lost a week trying to fix it
And yes, i have checked the destination route, in case you wonder.
This is my frontend:
<form id="tasasImage" enctype="multipart/form-data" style="display: flex; flex-direction: column;">
<input type="file" name="photo" id="photo" class="file"> <br>
<div id="uploadImg" class="btn btn-primary">ENVIAR</div>
</form>
<script>
$("#uploadImg").click(function () {
if ($('#photo').val().length > 0) {
var formData = new FormData($('#tasasImage')[0]);
console.log([...formData])
$.ajax({
url: "",
data: formData,
type: "POST",
processData: false,
contentType: false,
success: function(r){
console.log('Uploaded successfully');
$("#photo").val('');
},
error: function (e) {
console.log("some error", e);
}
});
}
</script>
And the backend:
var storageTasas = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, config.urlBase+'public/images/tasas');
},
filename: function(req, file, callback) {
var name = now+'-'+file.originalname;
callback(null, name);
}
})
var uploadTasas = multer({ storage: storageTasas }).single('photo');
const tasasUploadImage = (req, res) => {
uploadTasas(req, res, (err) => {
if (err) { console.error(err); }
else {console.log('Ssuccessfully Uploaded') };
})
res.send({'file': now});
}
router.post('/admin/aliados/tasas/:id', adminController.tasasUploadImage);

The url you are passing empty in the JQuery / Client script, it should be url : /admin/aliados/tasas/1234
The form data should be like this
var formData = new FormData($('#tasasImage'));
simple multipart file upload with express.js and multer with ajax

how to upload image to mongodb using node js and express

I'm making a web app that allows users to upload and search for a recipe. A user can upload a recipe by filling a form and press a button to perform a POST request. I managed to save the recipe object, but I can't assign an image to it. I tried to use Multer, but I get "underfined" when I do log(req.file). I followed YouTube tutorials which only had app.js and index.ejs and it works, so I don't know if it's my Ajax code causing the issue??!!.
I have main.handlebars and main.css, and I have a folder called uploads but still always get undefined in the terminal, below is part of my code:
THANKS!!
upload.handlebars:
<label for="Userphrase">Recipe Name:</label>
<input type = "text" name = "recipeName" id = "recipeName"><br>
<label>Upload an image:</label>
<div class="container">
<input name="myImage" type="file"<br>
</div>
.
.
.
<script type = "text/javascript" src = "/public/palindrome.js"></script>
Ajax, only the request is here since i do error checking before that:
$("form").submit(function(e){
$.ajax({
type: "POST",
url: "/upload",
data: obj,
success: function(data){
alert("recipe added successfully!");
},
dataType: "json"
});
}
index.js:
at the top i have:
const storage = multer.diskStorage({
destination: './public/uploads/',
filename: function(req, file, cb){
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
const upload = multer ({
storage: storage
}).single('myImage');
then inside the POST route i have:
router.post('/upload',(req,res)=>{
upload(req, res, (err) => {
if(err){
res.render('index',{
msg: err
});
}else{
console.log(req.file);
res.send('test');
}
});

You have to send image in form data like
var formData = new FormData();
formData.append('imageName', imageFile);
on node side user same name('imageName') for multer it will get image from it
for more to multer check
https://www.npmjs.com/package/multer

For simplicity's sake, just use HTML form with enctype set to multipart/form-data on the client side. On the server side, say you're using Node.js, the uploaded files can be found in the request provided you're using the multer middleware to parse the form data. That's it.

You need to append that file to formData and then send it to server
Javascript:
var formData = new FormData();
jQuery.each(jQuery('#fileUpload')[0].files, function (i, file) {
formData.append('file', file);
});
$.ajax({
type: 'POST',
url: //To your route eg: /saveImage,
data: formData,
contentType: false,
processData: false,
success: function (result) {
if (result.status != 0) {
console.log(result.message)
return;
}
console.log(result.message)
}
});
Now at your route use multer
Node
var multer = require('multer')
var path = require("path");
// Check for extension of image
const getExtension = file =>{
if (file.mimetype == "image/jpeg")
ext = ".jpeg"
else
ext =".png"
return ext;
}
//initialize multer
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, path.join(__dirname, '../public/images'))
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + getExtension(file))
}
})
var upload = multer({storage:storage})
router.post('/saveImage', upload.single('file'), (req, res, next)=>{
if (req.file && req.file.mimetype != 'image/jpeg' && req.file.mimetype != 'image/png')
return res.json({
status:1,
message:"Please Choose JPG or PNG images"
})
if(req.file){
let iamge = "/images/" + req.file.filename
res.json({
status:0,
message:"Successfully saved",
path : image
})
}
})

node js multer file upload not working. req.file and req.files always undefined

I am trying to upload a file to my server, but req.file and req.files is always undefined on my POST REST endpoint.
The content I'm trying to upload is a ".dat" file, and I am expecting a json response.
Here's my code:
Server side:
var express = require('express');
var multer = require('multer')
var upload = multer({ dest: 'uploads/' })
var app = express()
app.post('/creoUpload', upload.single('uploadFileField'), function(req, res, next) {
console.log("req.file = ",JSON.stringify(req.file)); //is undefined
console.log("req.files = ",JSON.stringify(req.files)); //also undefined
});
Client Side:
<form id="creoUploadForm" action="/creoUpload" enctype="multipart/form-data" method="post">
<input type='file' name='uploadFileField'><br><br>
<input type='submit' value='Upload'/>
</form>
JS:
$( "#creoUploadForm" ).submit(function( event ) {
event.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: '/creoUpload',
type: 'POST',
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
console.log("RETURN DATA IS: ",returndata);
},
error: function (err) {
console.log("ERROR: ",err);
}
});
});
I keep playing around with the fields but it's not working.. anyone see what I'm doing wrong here?
I'm following the example from https://www.npmjs.com/package/multer
Versions:
Express Version: 4.12.0
Node Version: 6.5.0
JQuery: 1.12.1
Thank you!

You are using multer as a middleware, So before entering into your function and printing it has uploaded images to storage and removes record from req.files.
There are two ways you can access req.files.
Use multer as a function stated by finw3.
Another solution is:
//CODE STARTS
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '/filepath')
},
filename: function (req, file, cb) {
let filename = 'filenametogive';
req.body.file = filename
cb(null, filename)
}
})
var upload = multer({ storage: storage })
//CODE ENDS
Now you can access files in req.body.file

I have the same issue, if you check the documentation on the Error Handling section there is another kind of implementation, that's the one that works for me. The code will be something like this:
var express = require('express');
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });
var app = express();
app.post('/creoUpload', function(req, res, next) {
upload(req, res, function (err) {
if (err) {
// An error occurred when uploading
console.log('Err: ', err);
return;
} else {
console.log('req.file: ', JSON.stringify(req.file));
console.log('req.files: ', JSON.stringify(req.files));
return;
}
})
});

Don't set contentType to false, as POST method requires contentType = 'w-xxx-form-urlencoded', which is the JQ default.

If the req.file and req.files are undefined, then the problem is that multer did not receive the uploaded file and this issue seems related to jQuery.
Uploading a FormData with jQuery 'v1.12.1' is not supported and it won't send anything at all.
I will recommend to try with fetch Api or change the version of your jQuery to 3.3.1.
I already tested the code and I have successfully upload a file to my server when I change my jQuery version from v1.12.1 to v3.3.1.

Uploading an image in express just hangs

html:
<form method='post' action='upload_bg' enctype="multipart/form-data">
<input type='file' name='fileUploaded'>
<input type='submit'>
My index.js
app.route('/upload_bg')
.post(function (req, res) {
var fstream;
req.busboy.on('file', function (fieldname, file, filename) {
console.log(filename);
fstream = fs.createWriteStream(__dirname + '/imgs/' + "latest_upload.jpg");
file.pipe(fstream);
fstream.on('close', function () {
res.redirect('back');
});
});
});
My variables:
var express = require('express');
var busboy = require('connect-busboy');
var path = require('path');
var fs = require('fs-extra');
So the user clicks the button, selects an image, and selects submit. This hit's my route upload_bg. I've had it working before, and I changed a few things around but I'm unable to understand why it isn't working. I look in the network tab and the request is just pending indefinitely.

Here is my simple solution using express-fileupload module:
First intall express fileupload module using following command:
npm install express-fileupload
HTML page code:
<html>
<body>
<form ref='uploadForm'
id='uploadForm'
action='http://localhost:3000/upload_bg'
method='post'
encType="multipart/form-data">
<input type="file" name="sampleFile" />
<input type='submit' value='Upload!' />
</form>
</body>
</html>
node server code:
server.js:
var express=require('express');
var app = express();
var fileUpload = require('express-fileupload');
// default options
app.use(fileUpload());
app.post('/upload_bg', function(req, res) {
if (!req.files)
return res.status(400).send('No files were uploaded.');
// The name of the input field (i.e. "sampleFile") is used to retrieve the uploaded file
let sampleFile = req.files.sampleFile;
// Use the mv() method to place the file somewhere on your server
// Make sure 'imgs' folder is already created inside current directory otherwise it will throw error where this server.js file is placed
sampleFile.mv(__dirname + '/imgs/latest_upload.jpg', function(err) {
if (err)
return res.status(500).send(err);
res.send('File uploaded!');
});
});
app.listen(3000,function(){
console.log("App listening on port 3000")
});
Hope this will help. For complete code refer https://github.com/richardgirges/express-fileupload

I would personally re-style your code a little bit. And I would use ajax. Here is some example code:
index html:
<button class="btn btn-lg upload-btn" type="button">Upload image</button>
<input id="upload-input" type="file" name="uploads[]" multiple="multiple">
client js:
This can/should be inside of index.html
$('.upload-btn').on('click', function (){
$('#upload-input').click();
$('.progress-bar').text('0%');
$('.progress-bar').width('0%');
});
$('#upload-input').on('change', function(){
var files = $(this).get(0).files;
if (files.length > 0){
// create a FormData object which will be sent as the data payload in the
// AJAX request
var formData = new FormData();
// loop through all the selected files and add them to the formData object
for (var i = 0; i < files.length; i++) {
var file = files[i];
// add the files to formData object for the data payload
formData.append('uploads[]', file, file.name);
}
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data){
console.log('upload successful!\n' + data);
},
});
}
});
server js:
var express = require('express');
var app = express();
var path = require('path');
var formidable = require('formidable');
var fs = require('fs');
var l;
//... other code here
app.get('/upload', function(req, res){
res.sendFile(path.join(__dirname, 'index.html'));
});
app.post('/upload', function(req, res){
var form = new formidable.IncomingForm();
form.multiples = true;
form.uploadDir = path.join(__dirname, '/uploads');
form.on('file', function(field, file) {
fs.readdir('uploads/', function(err, items) {
console.log(items.length);
l = items.length
console.log(l);
fs.rename(file.path, "uploads/"+l+".jpg", function(err) {
if ( err ) console.log('ERROR: ' + err);
});
});
});
form.on('error', function(err) {
console.log('An error has occured: \n' + err);
});
form.on('end', function() {
res.end('success');
});
form.parse(req);
});
Hope this helps!

Sending data from HTML form to server

I am trying to send form data via ajax to a nodejs server.
Here's what my code looks like (EDITED):
<div id="inputid" style="width: 400px; height:400px">
<p> Please enter the respective values in each field and hit Submit </p>
<form id="sendCoordinates" action="http://localhost:8080/geodata" method="post">
MinLat: <input type="text" name="MinLat" id="minlat"><br>
MaxLat: <input type="text" name="MaxLat" id="maxlat"><br>
MinLong: <input type="text" name="MinLong" id="minlong"><br>
MinLong: <input type="text" name="MaxLong" id="maxlong"><br>
<input type="submit" value="submit" id="s1">
</form>
<script>
$(document).ready(function() {
$(sendCoordinates)
.on('success.form.fv', function(e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
formData = new FormData(),
params = $form.serializeArray();
$.each(params, function(i, val) {
formData.append(val.name, val.value);
});
console.log(formData);
$.ajax({
url: $form.attr('action'),
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(result) {
console.log(result);
}
});
});
});
</script>
My server side code looks like this :
var express = require("express");
var path = require("path");
var bodyParser = require("body-parser");
var app = express();
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
// Initialize the app.
var server = app.listen(process.env.PORT || 8080, function () {
var port = server.address().port;
console.log("App now running on port", port);
});
// for debugging purposes, just logging the request to check
// if request received
app.post("/geodata", function(req, res) {
console.log(req.body);
});
I am trying this out but I am unable to send the form successfully, and upon hitting submit, nothing happens. I am not able to log the formData on the client side, neither am I able to log the output at the endpoint on the server side.
Can someone point out what I might be doing wrong? All I get is an empty {} when I hit submit. Is my "action" tag in my form pointing to the correct url for posting to the endpoint /geodata?