Robins Gupta Robins Gupta - 7 months ago 78
Node.js Question

Modify image obtained from loopback-component-storage

I am using

for storing Image to the

I want to modify the file name of the file before getting saved to the server.

Also I want to convert it to another thumbnail form before getting saved.

Here is how I am doing.

At client side

url: '/api/containers/container_name/upload',
file: file,
fileName: "demoImage.jpg",
//Additional data with file
orderId: 1,
customerId: 1

At Server Side I am receiving the query "params" but not getting the "File Name"

My Storage model name is

Container.beforeRemote('upload', function(ctx, modelInstance, next) {

//OUPTUTS: {orderId:1, customerId:1]}

//Now I want to change the File Name of the file.
//But not getting how to do that


How to change the File name of the File getting saved at the server?


I figured it out.

We have to define a custom function getFileName in boot/configure-storage.js.

Suppose my datasource for loopback-component-storage is presImage.


module.exports = function(app) {
    //Function for checking the file type..
    app.dataSources.presImage.connector.getFilename = function(file, req, res) {

        //First checking the file type..
        var pattern = /^image\/.+$/;
        var value = pattern.test(file.type);
        if(value ){
            var fileExtension ='.').pop();
            var container = file.container;
            var time = new Date().getTime();
            var query = req.query;
            var customerId = query.customerId;
            var orderId    = query.orderId;

            //Now preparing the file name..
            var NewFileName = '' + customerId + '_' + time + '_' + orderId + '.' + fileExtension; 

            //And the file name will be saved as defined..
            return NewFileName;
            throw "FileTypeError: Only File of Image type is accepted.";


Now suppose my container model is container.

module.exports = function(Container) {
    Container.afterRemote('upload', function(ctx,  modelInstance, next) {
      var files = ctx.result.result.files.file;

      for(var i=0; i<files.length; i++){
        var ModifiedfileName = files[i].name;
        console.log(ModifiedfileName) //outputs the modified file name.
      } //for loop
    }); //afterRemote..

Now for converting it images to Thumbnail size

Download the quickthumb

Here is how to use it with loopback.

This code is copied directly from Loopback thumbnail view


module.exports = function(Container) {

    var qt = require('quickthumb');

    Container.afterRemote('upload', function(ctx, res, next) {

        var file = res.result.files.file[0];
        var file_path = "./server/storage/" + file.container + "/" +;
        var file_thumb_path = "./server/storage/" + file.container + "/thumb/" +;

            src: file_path,
            dst: file_thumb_path,
            width: 100
        }, function (err, path) {