I have a typical client/server application where i can send images to the server and i need that image on the client with diferent sizes.
So at the moment i am using Picasso with android to load the image, and with nodeJS i am serving the images as static files, since they are saved in the folder where the static files are.
My question is: is there a way to increase the speed sending this static files(just the images), or can i decrease the size of them using the code that i currently have for the static file?
app.use(express.static(path.join(__dirname, 'public')));
at the moment i receive the image from the client as base64 and on the server i convert it to a bitmap like this:
var bitmap = new Buffer(req.body.base64, 'base64');
and store that bitmap on the public folder that i use as a static folder, i dont store the image directly on the database since that is bad practice, i just save the path and everytime i want to retrive the image i know inside the static folder where it is.
So everytime on my client that i want to retrive a foto i just need to know what is the static path, nothing more.
For a better understanding i leave here the code for 1 of my controllers where i save the photo.
controller
sendPicture: function (req, res, next) {
var plant = null
if (req.params.id != 0) {
plant = req.params.id;
}
var bitmap = new Buffer(req.body.base64, 'base64');
var lat = req.body.lat;
var lon = req.body.lon;
var alt = req.body.alt;
var date = req.body.date;
var flowerName;
var pathId = shortid.generate();
var userId = req.userId;
if (plant != null) {
Plant.findOne({
where: { id: req.params.id }
}).then(function (plant) {
if (!plant) {
return 'not found';
}
flowerName = plant.specie;
}).then(function () {
var pathToSave = __dirname + "/../public/images/" + flowerName + "/" + pathId + req.params.id + "-" + userId + ".jpg";
var path = "images/" + flowerName + "/" + pathId + req.params.id + "-" + userId + ".jpg"
fsPath.writeFile(pathToSave, bitmap, function (err) {
if (err) {
console.log(err.stack);
return err;
}
Foto.create({
image: path,
userId: userId,
plantId: req.params.id,
lat: req.body.lat,
lon: req.body.lon,
alt: req.body.alt,
date: date,
}).then(function () {
return res.status(200).json({ message: "foto created" });
}).catch(function (err) {
console.log(err.stack);
})
});
});
}
Related
A coach in my application can upload an image for his profile, clients, programs and exercise.
After the file has been upload, the nodejs server rename it. Then the nodejs server needs to insert / update the image name on the db, according to the form that sends the image (registration, edit user, add client, edit client and so on...).
Therefore I want to send additional data / parameters to the nodejs function.
HTML:
<form name="userUpdateForm" action="/university/uploadImage" method="post" enctype="multipart/form-data" id="editUserForm">
<label>Replace Logo Image</label></br>
<input id="uploadFile" name="filetoupload" type="file">
<input type="submit">
</form>
Node:
router.post('/uploadImage', function (req,res,next) {
var newpath = "";
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
var oldpath = files.filetoupload.path;
var time = new Date();
var newImageName = time.getHours() + "-" + time.getMinutes() + "-" + time.getSeconds() + "-" + files.filetoupload.name;
newpath = './uploaded/' + newImageName;
//sendToDbImageName(newImageName);
fs.readFile(oldpath, function (err, data) {
if (err) throw err;
console.log('File read!');
// Write the file
fs.writeFile(newpath, data, function (err) {
if (err) throw err;
console.log('File uploaded and moved!');
console.log('File written!');
res.redirect(url + '?uid=' + globalUid + '#/editUser');
});
// Delete the file
fs.unlink(oldpath, function (err) {
if (err) throw err;
console.log('File deleted!');
});
});
});
});
Update:
This is how I solved that:
One function that's takes an image from different forms (coach, client, program, exercise), generate unique file name, and insert / update the database.
Don't repeat; check,
Don't go twice to the server; check,
Prevent redirect after file was upload; check.
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, __dirname + '/../uploaded')
},
filename: function (req, file, cb) {
var time = new Date();
cb(null, time.getHours() + "-" + time.getMinutes() + "-" +
time.getSeconds() + "-" + file.originalname) //Appending extension
}
})
var upload = multer({ storage: storage });
router.post('/uploadImage', upload.single('avatar'), function (req, res, next) {
var formName = req.body.formName;
switch (formName) {
case "editUser":
var sql = "UPDATE coachdirectory SET logo = '" + req.file.filename + "' WHERE uid = '" + req.body.uid + "'";
con.query(sql, function (err, result) {
if (err) throw err;
console.log(result.affectedRows + " record(s) updated");
});
res.redirect(url + '/?uid=' + req.body.uid + '#/yourClients');
break;
case "registerUser:
other business logic
break;
}
});
The best practice is using Multer package developed by ExpressJS. Server handling file upload is really difficult, so they created multer which is basically built on top of busboy. There are some edge cases you also need to handle when you do it by scratch. No need of reinventing the wheel. Better use Multer as you can pass normal formal data in multipart itself. Multer will attach those to req.body by default.
In Multer, you have the flexibility to rename the file before saving it the database itself or keep the original filename.
The code here intend to save the images uploaded in multipart/form-data (files have been successfully parsed in multiparty module) to Amazon S3, then get all the image bucket URLs and save it to imageUrl array field in the mongodb. However, the imageUrl is always empty.
I found out inside the loopwithcb function the imageUrl has correct URLs.
In the callback function afterSave, the imageUrl is empty. I think it is asynchronous problem, but still cannot figure it out. Any thought would be helpful.
//save images to S3
var i=-1;
var imageUrl =[];
function loopwithcb(afterSave){
Object.keys(files.files).forEach(function(){
i=i+1;
var myFile = files.files[i];
var fileName = Date.now()+myFile.originalFilename;
s3Client.upload({
Bucket: bucket,
Key: fileName,
ACL: 'public-read',
Body: fs.createReadStream(myFile.path)
//ContentLength: part.byteCount
}, function (err, data) {
if (err) {
//handle error
} else {
//handle upload complete
var s3url = "https://s3.amazonaws.com/" + bucket + '/' + fileName;
imageUrl.push(s3url);
console.log('imageurl:'+ imageUrl);
//delete the temp file
fs.unlink(myFile.path);
console.log('url:' + imageUrl);
}
});
});
afterSave();
}
function afterSave(){
console.log('i:'+ i);
console.log('outside print imageurl:'+ imageUrl);
Listing.create({
title : fields.ltitle,
type : 'newlist',
description : fields.lbody,
image : imageUrl
}, function (err, small) {
if (err) return handleError(err);
// saved!
console.log(small);
console.log('listingId:' + ObjectId(small._id).valueOf());
//res.json(small);
});
}
loopwithcb(afterSave); //call back
Changed some part of code, now it can print out the correct imageUrl. However, the new code will NOT upload files to AWS S3. Found this solution (async for loop in node.js) is exactly what I want.
function loopwithcb(afterSave){
Object.keys(files.files).forEach(function(){
i=i+1;
var myFile = files.files[i];
var fileName = Date.now()+myFile.originalFilename;
var saved = s3Client.upload({
Bucket: bucket,
Key: fileName,
ACL: 'public-read',
Body: fs.createReadStream(myFile.path)
//ContentLength: part.byteCount
});
if (saved.err) {
//handle error
} else {
//handle upload complete
var s3url = "https://s3.amazonaws.com/" + bucket + '/' + fileName;
imageUrl.push(s3url);
console.log('imageurl:'+ imageUrl);
//delete the temp file
fs.unlink(myFile.path);
console.log('url:' + imageUrl);
}
});
afterSave();
}
I'm certain I'm missing something obvious, but the gist of the problem is I'm receiving a PNG from a Mapbox call with the intent of writing it to the file system and serving it to the client. I've successfully relayed the call, received a response of raw data and written a file. The problem is that my file ends up truncated no matter what path I take, and I've exhausted the answers I've found skirting the subject. I've dumped the raw response to the log, and it's robust, but any file I make tends to be about a chunk's worth of unreadable data.
Here's the code I've got at present for the file making. I tried this buffer move as a last ditch after several failed and comparably fruitless iterations. Any help would be greatly appreciated.
module.exports = function(req, res, cb) {
var cartography = function() {
return https.get({
hostname: 'api.mapbox.com',
path: '/v4/mapbox.wheatpaste/' + req.body[0] + ',' + req.body[1] + ',6/750x350.png?access_token=' + process.env.MAPBOX_API
}, function(res) {
var body = '';
res.on('data', function(chunk) {
body += chunk;
});
res.on('end', function() {
var mapPath = 'map' + req.body[0] + req.body[1] + '.png';
var map = new Buffer(body, 'base64');
fs.writeFile(__dirname + '/client/images/maps/' + mapPath, map, 'base64', function(err) {
if (err) throw err;
cb(mapPath);
})
})
});
};
cartography();
};
It is possible to rewrite your code in more compact subroutine:
const fs = require('fs');
const https = require('https');
https.get(url, (response)=> { //request itself
if(response) {
let imageName = 'image.png'; // for this purpose I usually use crypto
response.pipe( //pipe response to a write stream (file)
fs.createWriteStream( //create write stream
'./public/' + imageName //create a file with name image.png
)
);
return imageName; //if public folder is set as default in app.js
} else {
return false;
}
})
You could get original name and extension from url, but it safer to generate a new name with crypto and get file extension like i said from url or with read-chunk and file-type modules.
Trying to allow users to upload image files to the Node.js server in a MEAN Stack application. I am using ng-file-upload for the client side angular directive. That seems to be working good enough. I run into an error when I pass the image to the server.
I use an API route to handle the work on the server side. The server will be responsible for saving the file to disk with node-multiparty module. It seems to hit route but when it tries to emit a close event I get the error. throw new Error('"name" and "value" are required for setHeader().'
The file I want is in my temp folder but it doesn't get saved to the target directory on my server plus I get the header error after the file should have been saved. So I need to stop the error and save the file with fs.rename() to the target image directory.
Here is the code that is breaking.
file api.js
// router to save images
router.route('/img/upload')
.post(function (req, res) {
console.log("image upload hits the router")
var options = {};
var count = 0;
var form = new multiparty.Form(options);
//save file to disk
form.on('file', function (name, file) {
var uploadDirectory = 'img/user/profile/';
var oldPath = file.path;
var newPath = uploadDirectory + file.originalFilename;
fs.rename(oldPath, newPath, function (err) {
if (err) throw err;
console.log('renamed complete');
});
});
// Close emitted after form parsed
form.on('close', function () {
console.log('Upload completed!');
res.setHeader('text/plain'); // Here is the line that gives an error.
res.end('Received ' + count + ' files');
});
// Parse req
form.parse(req);
});
So this is what I got to work for me
The actual line that gave me an error was setHeaders. It appears I needed to put the name and value as strings separated by a comma. This works perfectly for me now. I hope it saves everyone time coding.
// post
.post(function (req, res) {
var options = {};
var count = 0;
var form = new multiparty.Form(options);
form.on('error', function (err) {
console.log('Error parsing form: ' + err.stack);
});
//save file to disk
form.on('file', function (name, file) {
var uploadDirectory = '/img/user/profile/';
var oldPath = file.path;
var newPath = uploadDirectory + file.originalFilename;
fs.rename(oldPath, newPath, function (err) {
if (err) throw err;
console.log('renamed complete');
});
});
// Close emitted after form parsed
form.on('close', function () {
console.log('Upload completed!');
res.setHeader('Content-Type', 'text/plain');
res.end('Received ' + count + ' files');
});
// Parse req
form.parse(req);
});
I have a node application that reads an uploaded file like so:
router.route('/moduleUpload')
.post(function (request, response) {
request.files.file.originalname = request.files.file.originalname.replace(/ +?/g, '');
var media = new Media(request.files.file, './user_resources/module/' + request.body.module_id + '/');
if (!fs.existsSync(media.targetDir)) {
fs.mkdirSync(media.targetDir, 0777, function (err) {
if (err) {
console.log(err);
response.send("ERROR! Can't make the directory! \n"); // echo the result back
}
});
fs.chmodSync(media.targetDir, 0777);
}
moveFile(media);
var token = jwt.encode({
mediaObject: media
}, require('../secret')());
response.status(200).json(token);
});
Now when this file is uploaded and status code 200 is recieved my system then calls the following route:
router.route('/resourcePath/:encodedString')
.all(function (req, res) {
var decoded = jwt.decode(req.params.encodedString, require('../secret')());
var mediaObject = decoded.mediaObject;
var ext = mediaObject.file.originalname.substr(mediaObject.file.originalname.lastIndexOf('.'));
var path = 'app_server' + mediaObject.targetDir.substring(1) + mediaObject.fileName + ext;
var fileExist = false;
res.status(200).send(path)
});
Now for some reason this call is being called before the file is correctly in place which results in that sometimes my users cannot see the content.
To make sure the file was in the folder i thought of the following code to add:
var fileExist = false;
while (!fileExist) {
if (fs.existsSync('/var/www/learningbankapp/'+path)) {
fileExist = true;
}
}
However im not sure that this a good solution namly because it goes against node.js nature. So my question is, is there a better way to do it?