File Upload With Loopback

Question

I created a Simple file uploading Application with loopback. Application client side i used simple html and Java Script code .

i calling a loopback api with ajax call , this is Java Script code -

$('#upload-input').on('change', function () {

    var files = $(this).get(0).files;

    if (files.length > 0) {
        // One or more files selected, process the file upload
        var form = new FormData();

        for (var index = 0; index < files.length; index++) {

            var file = files[index];
            form.append('Uploded Files', file, file.name);
        }

        $.ajax({
            url: 'api/fileupload/upload',
            type: 'POST',
            data: form,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('upload successful!');
            }
        });
    }

});

But we are not getting files on server side . On Server side we Created a Loopback api .

can any help us , how to upload files with loopback api .

This is my loopback api code -

FileUpload.remoteMethod

(
        'upload', {
            http: {
                verb: 'post',
            },
            accepts:
            [
                { arg: 'ctx', type: 'object', http: { source: 'context' } },
                { arg: 'options', type: 'object', http: { source: 'query' } }

            ],
            returns: {
                arg: 'data',
                type: 'string',
                root: true
            }
        }
    );

    FileUpload.upload = function (context, options, callback) {
        //context.req.params = 'common';


    };

Answer 1

You can upload files/Images using loopback's default storage component. Go to the doc link and follow the instruction and specially look how the example project implemented the file uploading.

You will have to create a datasource and a container model for this purpose.

Create Datasource:

$ lb datasource
[?] Enter the data-source name: myfilesystem
[?] Select the connector for myfilesystem: other
[?] Enter the connector name: loopback-component-storage
[?] Install storage (Y/n)

create the container model:

• Model name: Container
• Data source: myfilesystem
• Base class: Model
• Expose Reviewer via the REST API? Yes
• Custom plural form (used to build REST URL): Yes

Answer 2

Install multer : https://github.com/expressjs/multer

npm install --save multer

In MyModel.js

var multer = require('multer');
var fs = require('fs');

module.exports = function (MyModel) {
    var uploadedFileName = '';
    var storage = multer.diskStorage({
        destination: function (req, file, cb) {
            // checking and creating uploads folder where files will be uploaded
            var dirPath = 'client/uploads/'
            if (!fs.existsSync(dirPath)) {
                var dir = fs.mkdirSync(dirPath);
            }
            cb(null, dirPath + '/');
        },
        filename: function (req, file, cb) {
            // file will be accessible in `file` variable
            var ext = file.originalname.substring(file.originalname.lastIndexOf("."));
            var fileName = Date.now() + ext;
            uploadedFileName = fileName;
            cb(null, fileName);
        }
    });


    MyModel.upload = function (req, res, cb) {
        var upload = multer({
            storage: storage
        }).array('file', 12);
        upload(req, res, function (err) {
            if (err) {
                // An error occurred when uploading
                res.json(err);
            }
            res.json(uploadedFileName);
        });        
    };

    MyModel.remoteMethod('upload',   {
        accepts: [{
            arg: 'req',
            type: 'object',
            http: {
                source: 'req'
            }
        }, {
            arg: 'res',
            type: 'object',
            http: {
                source: 'res'
            }
        }],
        returns: {
             arg: 'result',
             type: 'string'
        }
    });
};

Frontend - I use AngularJS, so for that follow -https://github.com/nervgh/angular-file-upload

there are also other such directives to use

P.S. - As per your comment - Actually Our Problem is that , we need to upload a File from Client Side and Store this File in Database , But Before save in DB , we need to get files on Server side , if we get Files on Server side via Post API than we can easily store file in DB

Can't provide you exact solution, but using above method files will be uploaded in your /client/uploads folder, once uploaded then you have control on what to do with file and once everything is done, eventually delete it(optional)

Answer 3

Please check this code -

module.exports = function (FileUpload) { var multer = require('multer');

FileUpload.remoteMethod(
    'upload', {
        http: {
            verb: 'post',
        },
        accepts:
        [{
            arg: 'req',
            type: 'object',
            http: {
                source: 'req'
            }
        }, {
            arg: 'res',
            type: 'object',
            http: {
                source: 'res'
            }
        }],
        returns: {
            arg: 'data',
            type: 'string',
            root: true
        }
    }
);



var uploadedFileName = '';

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // checking and creating uploads folder where files will be uploaded
        var dirPath = 'client/uploads/'
        if (!fs.existsSync(dirPath)) {
            var dir = fs.mkdirSync(dirPath);
        }
        cb(null, dirPath + '/');
    },
    filename: function (req, file, cb) {
        // file will be accessible in `file` variable
        console.log("----------Second Rakesh---");
        console.log(file);
        var ext = file.originalname.substring(file.originalname.lastIndexOf("."));
        var fileName = Date.now() + ext;
        uploadedFileName = fileName;
        cb(null, fileName);
    }
});






FileUpload.upload = function (req, res, callback) {

    var upload = multer({
        storage: storage
    }).array('file', 12);

    upload(req, res, function (err) {
        if (err) {
            // An error occurred when uploading
            res.json(err);
        }
        console.log("-------------Rakesh"); // Its Printing Rakesh

        res.json(uploadedFileName);
    });
};

};

Answer 4

This worked for me using LoopbackJs

Loopback framework is based on ExpressJs by the way

You can consider this answer as and adapted version of https://github.com/blueimp/jQuery-File-Upload/ for LoopbackJs

Install plugin dependecy:

npm install jquery-file-upload-middleware

Add this snippet to your /server/server.js :

 //Load Jquery File Upload handler
      var upload = require('jquery-file-upload-middleware'),
        bodyParser = require('body-parser');

        // configure upload middleware
        upload.configure({
            uploadDir: __dirname + '/public/uploads',
            uploadUrl: '/uploads',
            imageVersions: {
                thumbnail: {
                    width: 80,
                    height: 80
                }
            }
        });



        app.use('/upload', upload.fileHandler());
        app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }))

Modify middleware.js with the following snippet so your app can serve static HTML resources in /client folder (this file belongs LoopbackJs framework BTW):

...
    "files": {
  "loopback#static": {
    "params": "$!../client" 
  }
}
...

Download and place in /client/test file-upload webpage : File Upload Webpage

Run your node.app and point to http://localhost:3000/files/ You should be able to upload files and found the uploaded filename response in the Network tab: