I'm using angular file upload which previously did work when I used Laravel Lumen for the backend but I've moved to Node and unable to return the file contents of an upload.
FRONT END ANGULAR
$scope.upload = Upload.upload({
url: ENV.apiEndpoint + '/upload',
method: 'POST',
data: {
fname: $scope.fname
},
file: file
}).progress(function(evt) {
}).success(function(data, status, headers, config) {
});
BACK END NODE
upload/index.js
'use strict';
var express = require('express');
var controller = require('./upload.controller');
var router = express.Router();
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './my-uploads');
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now());
}
})
var upload = multer({ storage: storage });
router.post('/', upload.single('file'), controller.index);
module.exports = router;
upload/upload.controller.js
'use strict';
var _ = require('lodash');
var db = require('../../db');
var https = require('https');
var Q = require('q');
var fs = require('fs');
var multer = require('multer');
exports.index = function(req, res, next) {
console.log(req.files.file);
res.status(204).end();
};
Old Laravel Lumen Request
public function data(Request $request) {
$path_parts = pathinfo($_FILES["file"]["name"]);
$extension = $path_parts['extension'];
$contents = file_get_contents( $_FILES['file']['tmp_name'] );
return response()->json(['type'=> $extension, 'content'=> $contents]);
}
All I'm looking to do is upload a file but only return the contents of the file to the front end again I dont want the file to be stored.
Here you have an example, you have a couple of things wrong. Check it out
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/images/banks')
},
filename: function (req, file, cb) {
crypto.pseudoRandomBytes(16, function (err, raw) {
cb(null, raw.toString('hex') + path.extname(file.originalname));
});
}
});
var upload = multer({storage: storage});
router.post('/uploadImage', upload.single('file'), function (req, res, next) {
if(!req.file) {
res.status(400);
res.send({error: 'No se pudo subir el archivo'});
}
res.send({filename: req.file.filename});
});
Related
I use to upload files a multer library with feathers. I try to separate logic from code and I want put upload code not in a index.js but in my case in pdf.js in middleware directory.
Below is my works index.js:
'use strict';
const pdf = require('./pdf');
const record = require('./record');
const records = require('./records');
const handler = require('feathers-errors/handler');
const notFound = require('./not-found-handler');
const logger = require('./logger');
const uploadPdf = require('./upload-pdf');
module.exports = function() {
// Add your custom middleware here. Remember, that
// just like Express the order matters, so error
// handling middleware should go last.
const app = this;
app.use('/rekord/:id.html', record(app));
app.use('/rekordy.html', records(app));
app.use('/pdf/:id', uploadPdf.single('file'), pdf(app));
app.use(notFound());
app.use(logger(app));
app.use(handler());
};
Here is upload-pdf.js file:
var multer = require('multer')
var storagePdf = multer.diskStorage({
destination: 'public/pdf',
filename: function (req, file, cb) {
var id = req.params.id
cb(null, id+'.pdf')
}
});
module.exports = multer({
storage: storagePdf,
fileFilter: function (req, file, cb) {
if (file.mimetype !== 'application/pdf') {
return cb(null, false, new Error('I don\'t have a clue!'));
}
cb(null, true);
}
});
And pdf.js file:
'use strict';
module.exports = function(app) {
return function(req, res, next) {
if (req.file) {
return res.end('Thank you for the file');
}
return res.end('false');
next();
};
};
I would like to combine upload-pdf.js and pdf.js into one file
Not particularly Feathers specific, just as with any other Express application you can put the code into their own modules:
'use strict';
const pdf = require('./pdf');
const record = require('./record');
const records = require('./records');
const handler = require('feathers-errors/handler');
const notFound = require('./not-found-handler');
const logger = require('./logger');
module.exports = function() {
// Add your custom middleware here. Remember, that
// just like Express the order matters, so error
// handling middleware should go last.
const app = this;
app.use('/rekord/:id.html', record(app));
app.use('/rekordy.html', records(app));
app.use('/pdf/:id', pdf.upload.single('file'), pdf.process(app));
app.use(notFound());
app.use(logger(app));
app.use(handler());
};
In pdf.js:
'use strict';
var multer = require('multer')
var storagePdf = multer.diskStorage({
destination: 'public/pdf',
filename: function(req, file, cb) {
var id = req.params.id
cb(null, id + '.pdf')
}
});
exports.upload = multer({
storage: storagePdf,
fileFilter: function(req, file, cb) {
if (file.mimetype !== 'application/pdf') {
return cb(null, false, new Error('I don\'t have a clue!'));
}
cb(null, true);
}
});
exports.process = function(app) {
return function(req, res, next) {
if (req.file) {
return res.end('Thank you for the file');
}
return res.end('false');
next();
};
};
The NodeJS module system docs are quite helpful to learn how it all fits together.
I'm trying to upload multiples files with a modal that contains a form with an input.
My modal (jade template format) :
#modalAddFile.modal
form#uploadForm(enctype='multipart/form-data', action='/#{category}/addFiles', method='post')
.modal-content
.file-field.input-field
.btn
span Ajouter
input(type='file', name='songs', multiple)
.file-path-wrapper
input.file-path.validate(type='text')
.modal-footer
a#cancel.modal-action.modal-close.waves-effect.waves-red.btn-flat(href='#!') Annuler
button#addFile.modal-action.modal-close.waves-effect.waves-green.btn-flat(type='submit', name='action', href='#!') Valider
routes.js :
var express = require('express');
var router = express.Router();
//Upload file
var multer = require('multer');
var upload = multer({ dest: '../public/test/' });
//Add files
router.post('/:category/addFiles', upload.array('songs'), function (req, res, next) {
res.redirect('/');
});
module.exports = router;
I don't have any apparent error (200 success), I don't know what is wrong.
Try to use this code:
var express = require('express');
var router = express.Router();
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '../public/test/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname)
}
});
var upload = multer({ storage: storage });
//Add files
router.post('/:category/addFiles', upload.any(), function (req, res, next) {
res.redirect('/');
});
module.exports = router;
I am trying to upload images to node.js express
bodyParser need a middleware to handle the image file , or it will reply
token undefine
I use Multer as middle ware , as this said, the req.file should hole a array of information, than I can use req.file.image.path to get the file path and other information, than I can save it as a file.
Here is the problem, I upload an image from Postman, I only write console.log(req.file) it shows undefined.
If I try to write req.file.image.path to get the file path, the error is image undefined, it seems like I didn't use multer well, so the req.file didn't hold the data information, Should I create some temp folder to multer or...?
app.js
var express = require('express')
,bodyParser = require('body-parser')
,app = express()
,multer = require('multer')
,binary = require('binary')
,fs = require('fs')
,util= require('util')
,http = require('http')
,multer = require('multer')
,upload = multer({ dest: '/Node/file-upload/uploads/' });
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies.
app.use(bodyParser.json({limit: '5mb'}));
songs = require('./routes/route');
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
app.post('/upload',songs.upload);
route.js
var mongoose = require('mongoose');
var uri = "mongodb://1111:1111#ds061365.mongolab.com:61365/aweitest";
mongoose.connect(uri);
// we're connected!
var db = mongoose.connection.db;
var BSON = require('bson').BSONPure;
var binary = require('binary');
var body = require('body-parser');
var fs = require('fs');
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, '/Node/file-upload/uploads/');
},
filename: function (req, file, callback) {
callback(null, file.fieldname + '-' + Date.now());
}
});
var upload = multer({ storage : storage}).single('image');
db.on('error', console.error.bind(console, 'connection errrrrrrrror:'));
db.once('open', function() {
console.log("mongodb is connected!!");
});
exports.upload = function(req, res) {
upload(req,res,function(err) {
console.log(req.file);
fs.readFile(req.file.image.path, function (err, data){
var dirname = "/Node/file-upload/uploads/";
var newPath = dirname + req.body.filename;
fs.writeFile(newPath, data, function (err) {
if(err) {
return res.end("Error uploading file.");
}
res.end("File is uploaded");
});
});
});
};
error
TypeError: Cannot read property 'image' of undefined
at c:\Users\awei\WebstormProjects\untitled\routes\girlshanlder.js:107:28
You need to set the filename before send the image in the Postman as shown here
Cheers.
Full code for uploading images in your MySQL database and in folder too.
Just define the module and install multer and path and save it.
var multer = require('multer');
var path = require('path');
var storage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, './uploadimages')
},
filename: function(req, file, callback) {
callback(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
}
})
app.post('/imginsert',multer({
storage: storage,
fileFilter: function(req, file, callback) {
var ext = path.extname(file.originalname)
if (ext !== '.png' && ext !== '.jpg' && ext !== '.gif' && ext !== '.jpeg')
{
return callback(res.end('Only images are allowed'), null)
}
callback(null, true)
}
}).single('img'), function(req, res) {
/*img is the name that you define in the html input type="file" name="img" */
var data = {
table_column_name(your database table column field name) :req.file
};
var query = connection.query("Insert into tablename set ?" ,data,function(err, rows)
{
if (err)
throw err;
res.redirect('/blog');
});
console.log(query.sql);
console.log(req.file);
});
routes.js
module.exports=function(app, upload){
var postingsController=require('../controllers/postings.server.controller');
app.post('/postings', postingsController.savePosting);
}
controller.js
var multer=require('multer');
exports.savePosting=function(req, res, next){
// this diskstorage function is not at all executed
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads')
},
filename: function (req, file, cb) {
console.log(file);
cb(null, file.filename + '.' + 'jpg');
}
});
var upload = multer({ storage: storage });
upload.single('attachment');
res.json({ message: "success" });
}
can someone tell me which line exactly uploads file. DO i write multer diskstorage configuration in main express configuration file or can i write any where. By the way i able to see json response which is from the line
Typically the middleware is created and inserted outside of any actual route handlers. For example:
routes.js
var multer = require('multer');
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads')
},
filename: function (req, file, cb) {
console.log(file);
cb(null, file.filename + '.' + 'jpg');
}
});
var upload = multer({ storage: storage });
module.exports = function(app, upload) {
var postingsController = require('../controllers/postings.server.controller');
app.post('/postings',
upload.single('attachment'),
postingsController.savePosting);
};
controller.js
exports.savePosting = function(req, res, next) {
// Use `req.file` to access attachment
if (req.file)
res.json({ message: "success" });
else // no file uploaded
res.json({ message: "failure" });
};
Multer is a middleware, which means it is added as a parameter to your route in most cases. So what the actual syntax would be like is:
app.post ("/postings", multer ({ ... }), postingsController.savePosting);
Multer gets called inbetween the request to "/postings" and the final function to do all the file work for you. It will then provide you with all the information via
req.files["fileInputName"]
in the following middlewares (your function is a "middleware", too).
I was able to move a very simple middleware (isAuthenticated) over to an external middleware file, but I'm having a harder time with moving my multer upload over. I just learned how to move them to seperate files, so it's probably obvius.
routes/index.js
var middleware = require('../middleware/common');
var isAuthenticated = middleware.isAuthenticated;
var upload = middleware.multerSetup;
...
router.post('/updateuser',
upload,
...,
function (req, res, next) {
res.redirect('/dashboard');
}
);
--
//middleware/common.js
var multer = require('multer');
Middleware = {
//Checks whether user is logged in
isAuthenticated: function(req,res,next){
if(req.isAuthenticated()){
return next();
}
req.flash('auth',"You do not have the proper permissions to access this page");
res.redirect('/');
},
multerSetup: function(req,res,next){
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/uploads/')
},
//detects file type, then adds extension to match file type
filename: function (req, file, cb) {
var ext = "";
switch(file.mimetype){
case 'image/png':
ext = '.png';
break;
case 'image/jpeg':
ext = '.jpeg';
break;
default:
ext = '';
}
cb(null, Date.now() + ext); //Appending .jpg
}
});
var upload = multer({storage:storage, fileFilter: function (req, file, cb) {
var acceptedExt = ['.png','.jpg','.gif','.bmp'];
if (req.hasOwnProperty('file') && acceptedExt.indexOf(path.extname(file.originalname))=== -1) {
return cb(new Error('Image type not allowed: ' + path.extname(file.originalname)));
}
cb(null, true)
}});
return upload.single('upl');
}
};
module.exports = Middleware;
Error:
routes\index.js:108
upload.single('upl'),
^
TypeError: upload.single is not a function
at Object.<anonymous> (C:\Users\Tyler\WebstormProjects\volunteer\volunteerApp\routes\index.js:108:12)
You're setting up your multer middleware wrong. Your Middleware.multerSetup is a middleware function, which is then calling upload.single to set up multer (which is then never called and the request is left hanging). Move your multer upload setup outside your custom middleware and have your module export just the return function from upload.single.
Example:
Middleware = {
...
multerSetup: upload.single('upl')
...
}
Got it! Just needed to define upload in routes/index.js as a function.
var upload = middleware.multerSetup();
Brother in the separate file, declare your setup function, then your middleware and export it, and pass the "file" as a parameter in upload function and return upload.single(file):
const multer = require("multer");
function multerSetup() {
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "images");
},
filename: (req, file, cb) => {
cb(null, file.originalname);
},
});
return storage;
}
Middleware = {
upload: function (file) {
const upload = multer({ storage: multerSetup() });
return upload.single(file);
},
};
module.exports = Middleware;
In your route file write your route:
const router = require("express").Router();
const Middleware = require("../helper/uploadImages");
router.post("/", Middleware.upload("file"), (req, res) => {
res.status(200).json("file has been uploaded!");
});
module.exports = router
in index.js file just you need to import your route and use it:
const uploadImageRoute = require("./routes/uploadImages");
app.use("/api/upload", uploadImageRoute);