I'm trying to upload a file in node js using multipart where I get Cannot POST error? I'm totally new to node js. So can you help me what I'm doing wrong
My Code?
HTML
<form id = "uploadForm"
enctype = "multipart/form-data"
action = "/api/uploadfile"
method = "post">
<input type="file" name="fileUpload"/>
<input type="submit" value="Upload File" name="submit">
</form>
Server.js
var express = require('express');
var app = express();
var multer = require('multer');
app.use(express.static(__dirname));
app.get('/', function(request, response){
response.sendFile("./index.html");
});
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, './uploads');
},
filename: function (req, file, callback) {
callback(null, file.fieldname + '-' + Date.now());
}
});
var upload = multer({ storage : storage}).single('fileUpload');
app.post('/api/uploadfile',function(req,res){
upload(req,res,function(err) {
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded");
});
});
app.listen(8080);
console.log("App listening on port 8080");
Error message as follows :
Error uploading file
i tried your code,its working here.The reason may be,
1)you missed out the closing of form tag
<html>
<form id = "uploadForm"
enctype = "multipart/form-data"
action = "/api/uploadfile"
method = "post"
>
<input type="file" name="fileupload" />
<input type="submit" value="Upload file" name="submit">
</form>
</html>
2)make sure that you have a folder named -> uploads
Related
I'm trying to upload a file from webpage to my backend but nothing happends. There is what i did:
Here's the form from the html file:
<form action="/api/bulk" method="POST" enctype="multipart/form-data">
<div style="width: 200px">
<input
type="file"
id="user_group_logo"
class="custom-file-input"
accept=".xlsx, .xls, .csv"
name="file"
/>
<label id="user_group_label" for="user_group_logo">
<i class="fas fa-upload"></i> Choose a file...
</label>
<button class="btn btn-primary" type="submit">Upload</button>
<div class="text-center"></div>
<div class="text-center mt-2"></div>
</div>
</form>
here's the routing:
router.route('/api/bulk').post(modelController.postBulk);
and here's the controller method that should upload the file to /uploads folder
var multer = require('multer');
const storage = multer.diskStorage({
destination: './uploads',
});
const upload = multer({
storage: storage,
});
exports.postBulk = async (req, res) => {
try {
console.log('test');
upload(req, res, (err) => {
if (err) {
console.log('error');
} else {
console.log(req.file);
res.send('test-req.file');
}
});
} catch (err) {
res.status(404).json({
status: 'fail',
message: err.message,
attention: 'Cannot verify the CSV file. Call support!',
});
}
};
I don't get either a message in the console, so the method is not "accessed" somehow (I should get a "test" when I try to upload the file at least).
Any ideas, please?
Try this
const express = require('express');
const router = express.Router();
const multer = require('multer');
const storage = multer.diskStorage({
destination: './uploads',
});
const upload = multer({
storage: storage,
});
const postBulk = async (req, res) => {
try {
console.log(req.file);
req.status(200).json({})
} catch (err) {
res.status(404).json({
status: 'fail',
message: err.message,
attention: 'Cannot verify the CSV file. Call support!',
});
}
};
router.post(`/api/bulk`, upload.single('file'), postBulk);
try this
router.route('/api/bulk').post(upload.single('file'),modelController.postBulk);
upload is your constant holding multer configuration
.single is for your single file upload and .array is for multiple file upload.
please check req.file inside your controller to get the file uploaded via form
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!
I am trying to receive a video file and save it in the uploads folder with the right extensions using node, express, and multer. I know my video is getting passed to the server correctly but it isn't saving how I would like it. This is my backend code.
var express = require("express");
var bodyParser = require("body-parser");
var multer = require("multer");
var app = express();
var path = require('path');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// this is cors this allows my angular app to call this node backend even though they are both on local host
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// here I am calling multer to get the filename of the file I am serving up specifying what folder I want it to go in
var storage = multer.diskStorage({
destination: function (request, file, callback){
callback(null, './uploads');
},
filename: function(request, file, callback){
console.log(file);
callback(null, file.originalname)
}
});
var upload = multer({storage: storage});
// this app.post calls the post method this is where I will upload the file
app.post('/upload', function (request, response) {
upload(request, response, function(err) {
if(err) {
console.log('Error Occured');
return;
}
console.log(request.file);
response.end('Your file Uploaded');
console.log('Video Uploaded');
})
});
// my app is listening on localhost port 8080 for the post to be called
var server = app.listen(8080, function () {
console.log('Listening on port ' + server.address().port)
});
this is my error
c:\toolbox\pos-estate-data\oneops\ScoSopBackend>node app.js
Listening on port 8080
TypeError: upload is not a function
at c:\toolbox\pos-estate-data\oneops\ScoSopBackend\app.js:29:6
at Layer.handle [as handle_request] (c:\toolbox\pos-estate-data\oneops\ScoSo
pBackend\node_modules\express\lib\router\layer.js:95:5)
at next (c:\toolbox\pos-estate-data\oneops\ScoSopBackend\node_modules\expres
s\lib\router\route.js:131:13)
client side code
upLoad() {
let strSopName : string = (<HTMLInputElement>document.getElementById("sopName")).value;
if(strSopName == "" || strSopName == null || strSopName == "Error you must enter a sop name"){
strSopName = "Error you must enter a sop name"
return;
}
this.makeFileRequest("http://localhost:8080/upload", [], this.filesToUpload).then((result) => {
console.log(result);
}, (error) => {
console.error(error);
});
}
makeFileRequest(url: string, params: Array<string>, files: Array<File>){
return new Promise((resolve, reject) => {
var formData: any = new FormData();
var xhr = new XMLHttpRequest();
for(var i = 0; i < files.length; i++){
formData.append("uploads[]", files[i], files[i].name);
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
if(xhr.status == 200){
resolve(JSON.parse(xhr.response));
}else {
reject(xhr.response);
}
}
}
xhr.open("POST", url, true);
xhr.send(formData);
})
}
html
<br>
<input type="file" (change)="fileChangeEvent($event)" name="videofile" placeholder="upload file..." class="form-control" id="Video" accept="video/mp4, video/x-m4v, video/*" required>
<br>
You aren't properly initialising multer's upload middleware. That's why experiencing type error.
In your case, you want to upload single file, try the following initialisation and replace 'file' with input name related to file in form
e.g.,
You have input tag of type="file" with name="videoFile" in form in your html
<form method="post" action="/upload" enctype="multipart/form-data">
<input type="file" name="videoFile"><br>
<input type="submit" value="Submit">
</form>
Then, you can initialise multer to pull file
var upload = multer({storage: storage}).single('videoFile');
Please note that it is name of input tag that receives file, not filename itself.
EDIT
As discussed in comments, you are uploading multiple files.
Try
var upload = multer({storage: storage}).array('uploads');
Hope it helps you.
I have a CMS for a food automation system and I'm going to add a part for upload pictures for foods:
<form method="post" enctype="multipart/form-data" action="/upload">
<td><input class="styleFormForAddProducts foodpicForAddFood" type="file" name="file"></td>
<td><input class="styleFormForAddProducts submitForAddFood" type="submit" value="Submit" ></td>
</form>
I wrote this code for making a POST request in Express.js:
app.post('/upload', function (req, res) {
var tempPath = req.files.file.path,
targetPath = path.resolve('./uploads/image.png');
if (path.extname(req.files.file.name).toLowerCase() === '.png') {
fs.rename(tempPath, targetPath, function(err) {
if (err)
throw err;
console.log("Upload completed!");
});
} else {
fs.unlink(tempPath, function () {
if (err)
throw err;
console.error("Only .png files are allowed!");
});
}
});
However when I define this app.use, I get an error:
Middleware: app.use(express.bodyParser({uploadDir:'/img'}));
Error: Error: Most middleware (like bodyParser) is no longer bundled with Express and must be installed separately. Please see https://github.com/senchalabs/connect#middleware.
When I define a middleware like this :
app.use(bodyParser({uploadDir:'/img/'}));
I don't have any errors but my code doesn't work correctly .
This solution worked for me :
multer = require('multer'),
upload = multer({ dest: 'views/img' });
app.post('/upload',upload.single('file'), function (req, res) {
});
And my form HTML form :
<form method="post" enctype="multipart/form-data" action="/upload">
<input class="styleFormForAddProducts foodpicForAddFood" type="file" name="file">
<input class="styleFormForAddProducts submitForAddFood" type="submit" value="Submit" >
</form>
I want to upload img using node.js , i am using express and multiparty , my code looks like
html
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/img">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
js
var express = require("express");
var app=express();
var http=require("http").Server(app);
app.get("/",function(req,res){
res.end("hello")
});
app.get("/upload",function(req,res){
res.sendFile(__dirname + "/form.html")
})
app.post("/img",function(req,res){
var multiparty = require("multiparty");
var form = new multiparty.Form();
form.parse(req,function(err,fields,files){
var img = files.images[0];
console.log(img)
})
})
http.listen(3000,function(){
console.log("listening on 3000")
})
When i upload something , it throws error
Cannot read property images of undefined
Being new to back end i have no idea why its happening , the directory img exists in folder where html and js are located.
Add enctype to form:
<form method="post" action="/img" enctype="multipart/form-data">
PS: For upload image, I suggest you use formidable, somelike this.
you can use multer for uploading files, see the code below, For front end:
<html>
<head>
<title>FileUpload</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form id = "uploadForm"
enctype = "multipart/form-data"
action = "http://localhost:3000/api/photo"
method = "post"
>
<input type="file" name="userPhoto" multiple />
<input type="submit" value="Upload Image" name="submit" id="btnUpload">
<span id="spnStatus" />
</form>
<script>
$(document).ready(function(){
$('#btnUpload').click(function(){
$('#spnStatus').empty().text("File is Uploading");
$(this).ajaxSubmit({
error : function(xhr){
status('Error : '+xhr.status);
}
success : function(response){
$('#spnStatus').empty().text(xhr);
}
});
});
});
</script>
</body>
</html>
NodeJS :
var express = require("express");
var multer = require("multer");
var bodyParser = require("body-parser");
var app = express();
app.use(bodyParser.json());
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, './uploads');
},
filename: function (req, file, callback) {
callback(null, file.fieldname + '-' + Date.now());
}
});
var upload = multer({ storage : storage }).array('userPhoto',1);
app.get('/',function(req,res){
res.sendFile(__dirname + "/fileUpload.html");
});
app.post('/api/photo',function(req,res){
upload(req,res,function(err) {
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded");
});
});
app.listen(3000,function(){
console.log("Working on port 3000");
});
and you can upload multiple files at same time if you want, for example increase the userPhoto to 5 var upload = multer({ storage : storage }).array('userPhoto',5);