File Upload With Loopback

Question

I created a simple file uploading application with loopbackjs. In the application\'s client side I used simple HTML and Javascript code, calling a loopback api with an AJAX

Answer 1

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: