Uploading images with Mongoose, Express and AngularJS

Question

I know this has been asked many times before, and I have read almost all I could find about the subject, namely:

https://stackoverflow.com/a/25022437/1031184

Uploading images using Node.js, Express, and Mongoose

Those are the best I have found so far. My problem is tho that they still aren't very clear, there is very little documentation online at all about this and the discussion seems aimed at people who are much more advanced than I am.

So with that I would really love it if someone could please walk me though how to upload images using Mongoose, Express & AngularJS. I am actually using the MEAN fullstack. (this generator to be precise – https://github.com/DaftMonk/generator-angular-fullstack)

AddController:

'use strict';

angular.module('lumicaApp')
  .controller('ProjectAddCtrl', ['$scope', '$location', '$log', 'projectsModel', 'users', 'types', function ($scope, $location, $log, projectsModel, users, types) {
    $scope.dismiss = function () {
      $scope.$dismiss();
    };

        $scope.users = users;
        $scope.types = types;

    $scope.project = {
            name: null,
            type: null,
            images: {
                thumbnail: null // I want to add the uploaded images _id here to reference with mongoose populate.
            },
            users: null
        };

        $scope.save = function () {
            $log.info($scope.project);
            projectsModel.post($scope.project).then(function (project) {
        $scope.$dismiss();
            });
        }

  }]);

I want to add the Images ID reference to project.images.thumbnail but I want to store all the information inside an Image Object using the following Schema:

'use strict';

    var mongoose = require('mongoose'),
        Schema = mongoose.Schema;

    var ImageSchema = new Schema({
      fileName: String,
      url: String,
      contentType: String,
      size: String,
      dimensions: String
    });

    module.exports = mongoose.model('Image', ImageSchema);

I have also added the following https://github.com/nervgh/angular-file-upload to my bower packages.

As I say I just can't figure out how to tie it all together. And I'm not even sure if what I am trying to do is the correct way either.

--------------------------------------------------------------------------\

UPDATE:

Here is what I now have, I have added some comments detailing how I would like it to work, unfortunately I still haven't managed to get this working, I can't even get the image to start uploading, never mind uploading to S3. Sorry to be a pain but I am just finding this particularly confusing, which surprises me.

client/app/people/add/add.controller.js

'use strict';

angular.module('lumicaApp')
    .controller('AddPersonCtrl', ['$scope', '$http', '$location', '$window', '$log', 'Auth', 'FileUploader', 'projects', 'usersModel', function ($scope, $http, $location, $window, $log, Auth, FileUploader, projects, usersModel) {
        $scope.dismiss = function () {
            $scope.$dismiss();
        };

        $scope.newResource = {};

        // Upload Profile Image
        $scope.onUploadSelect = function($files) {
            $scope.newResource.newUploadName = $files[0].name;

            $http
                .post('/api/uploads', {
                    uploadName: newResource.newUploadName,
                    upload: newResource.newUpload
                })
                .success(function(data) {
                    newResource.upload = data; // To be saved later
                });
        };

        $log.info($scope.newResource);

        //Get Projects List
        $scope.projects = projects;

        //Register New User
        $scope.user = {};
        $scope.errors = {};


        $scope.register = function(form) {
            $scope.submitted = true;

            if(form.$valid) {
                Auth.createUser({
                    firstName: $scope.user.firstName,
                    lastName: $scope.user.lastName,
                    username: $scope.user.username,
                    profileImage: $scope.user.profileImage, // I want to add the _id reference for the image here to I can populate it with 'ImageSchema' using mongoose to get the image details(Name, URL, FileSize, ContentType, ETC)
                    assigned: {
                        teams: null,
                        projects: $scope.user.assigned.projects
                    },
                    email: $scope.user.email,
                    password: $scope.user.password
                })
                    .then( function() {
                        // Account created, redirect to home
                        //$location.path('/');
                        $scope.$dismiss();
                    })
                    .catch( function(err) {
                        err = err.data;
                        $scope.errors = {};

                        // Update validity of form fields that match the mongoose errors
                        angular.forEach(err.errors, function(error, field) {
                            form[field].$setValidity('mongoose', false);
                            $scope.errors[field] = error.message;
                        });
                    });
            }
        };

        $scope.loginOauth = function(provider) {
            $window.location.href = '/auth/' + provider;
        };

    }]);

server/api/image/image.model.js I would like to store all image information here and use this to populate profileImage in people controller.

'use strict';

    var mongoose = require('mongoose'),
        Schema = mongoose.Schema;

    var ImageSchema = new Schema({
      fileName: String,
      url: String, // Should store the URL of image on S3.
      contentType: String,
      size: String,
      dimensions: String
    });

    module.exports = mongoose.model('Image', ImageSchema);

client/app/people/add/add.jade

.modal-header
    h3.modal-title Add {{ title }}
.modal-body
    form(id="add-user" name='form', ng-submit='register(form)', novalidate='')
        .form-group(ng-class='{ "has-success": form.firstName.$valid && submitted,\
        "has-error": form.firstName.$invalid && submitted }')
            label First Name
            input.form-control(type='text', name='firstName', ng-model='user.firstName', required='')
            p.help-block(ng-show='form.firstName.$error.required && submitted')
                | First name is required

        .form-group(ng-class='{ "has-success": form.lastName.$valid && submitted,\
        "has-error": form.lastName.$invalid && submitted }')
            label Last Name
            input.form-control(type='text', name='lastName', ng-model='user.lastName', required='')
            p.help-block(ng-show='form.lastName.$error.required && submitted')
                | Last name is required

        .form-group(ng-class='{ "has-success": form.username.$valid && submitted,\
        "has-error": form.username.$invalid && submitted }')
            label Username
            input.form-control(type='text', name='username', ng-model='user.username', required='')
            p.help-block(ng-show='form.username.$error.required && submitted')
                | Last name is required

        // Upload Profile Picture Here
        .form-group
            label Profile Image
            input(type="file" ng-file-select="onUploadSelect($files)" ng-model="newResource.newUpload")

        .form-group(ng-class='{ "has-success": form.email.$valid && submitted,\
        "has-error": form.email.$invalid && submitted }')
            label Email
            input.form-control(type='email', name='email', ng-model='user.email', required='', mongoose-error='')
            p.help-block(ng-show='form.email.$error.email && submitted')
                | Doesn't look like a valid email.
            p.help-block(ng-show='form.email.$error.required && submitted')
                | What's your email address?
            p.help-block(ng-show='form.email.$error.mongoose')
                | {{ errors.email }}

        .form-group(ng-class='{ "has-success": form.password.$valid && submitted,\
        "has-error": form.password.$invalid && submitted }')
            label Password
            input.form-control(type='password', name='password', ng-model='user.password', ng-minlength='3', required='', mongoose-error='')
            p.help-block(ng-show='(form.password.$error.minlength || form.password.$error.required) && submitted')
                | Password must be at least 3 characters.
            p.help-block(ng-show='form.password.$error.mongoose')
                | {{ errors.password }}

        .form-group
            label Assign Project(s)
            br
            select(multiple ng-options="project._id as project.name for project in projects" ng-model="user.assigned.projects")
        button.btn.btn-primary(ng-submit='register(form)') Save

    pre(ng-bind="user | json")
.modal-footer
    button.btn.btn-primary(type="submit" form="add-user") Save
    button.btn.btn-warning(ng-click='dismiss()') Cancel

server/api/upload/index.js

'use strict';

var express = require('express');
var controller = require('./upload.controller');

var router = express.Router();

//router.get('/', controller.index);
//router.get('/:id', controller.show);
router.post('/', controller.create);
//router.put('/:id', controller.update);
//router.patch('/:id', controller.update);
//router.delete('/:id', controller.destroy);

module.exports = router;

server/api/upload/upload.controller.js

'use strict';

var _ = require('lodash');
//var Upload = require('./upload.model');
var aws = require('aws-sdk');
var config = require('../../config/environment');
var randomString = require('../../components/randomString');

// Creates a new upload in the DB.
exports.create = function(req, res) {
    var s3 = new aws.S3();
    var folder = randomString.generate(20); // I guess I do this because when the user downloads the file it will have the original file name.
    var matches = req.body.upload.match(/data:([A-Za-z-+\/].+);base64,(.+)/);

    if (matches === null || matches.length !== 3) {
        return handleError(res, 'Invalid input string');
    }

    var uploadBody = new Buffer(matches[2], 'base64');

    var params = {
        Bucket: config.aws.bucketName,
        Key: folder + '/' + req.body.uploadName,
        Body: uploadBody,
        ACL:'public-read'
    };

    s3.putObject(params, function(err, data) {
        if (err)
            console.log(err)
        else {
            console.log("Successfully uploaded data to my-uploads/" + folder + '/' + req.body.uploadName);
            return res.json({
                name: req.body.uploadName,
                bucket: config.aws.bucketName,
                key: folder
            });
        }
    });
};

function handleError(res, err) {
    return res.send(500, err);
}

server/config/environment/development.js

aws: {
        key: 'XXXXXXXXXXXX',
        secret: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
        region: 'sydney',
        bucketName: 'my-uploads'
    }

I use this generator I'll answer when I get home. ng-file-upload on a file input > upload as base64 > and decode to binary on server side req.body.upload.match(/data:([A-Za-z-+\/].+);base64,(.+)/); > post to cloudinary or s3 and save the returned id into my mongo db. — Michael J. Calkins
– Michael J. Calkins, Commented May 13, 2015 at 22:57
That would be great thanks, I am using S3 but have never actually used it correctly so if you could try be clear on that part that would be a huge help as well thanks :) — Daimz
– Daimz, Commented May 14, 2015 at 0:16
Let me know if you'd like me elaborate more, it's kind of a frustrating process and I'm sure other people have the same issue. — Michael J. Calkins
– Michael J. Calkins, Commented May 14, 2015 at 21:15
@Michael thanks for trying to help. It seems like there is just no clear answer of how to achieve this, it is something that seems to be done all the time yet documentation for it is light and scattered. I am no further to being able to upload a file than when I first posted my question, seems like another dead end. — Daimz
– Daimz, Commented May 18, 2015 at 13:02
@Daimz you said the file is not uploaded. Is still the same? Did you tried changing your code as I commented, at least to try if the system detects the input change when choosing the file? It should began at least an upload this way.. — Alejandro Teixeira Muñoz
– Alejandro Teixeira Muñoz, Commented May 21, 2015 at 8:38

Michael J. Calkins · Accepted Answer · 2015-05-16 04:17:46Z

12

+25

All of this code is straight out of a project that depends heavily on this for large file uploads and images. Definitely checkout https://github.com/nervgh/angular-file-upload

In my view somewhere:

<div class="form-group">
  <label>File Upload</label>
  <input type="file" ng-file-select="onUploadSelect($files)" ng-model="newResource.newUpload">
</div>

Using the module angularFileUpload I then have in my controller:

$scope.onUploadSelect = function($files) {
  $scope.newResource.newUploadName = $files[0].name;
};

https://github.com/nervgh/angular-file-upload

When the user clicks upload this gets executed where I send the file to be uploaded:

$http
  .post('/api/uploads', {
    uploadName: newResource.newUploadName,
    upload: newResource.newUpload
  })
  .success(function(data) {
    newResource.upload = data; // To be saved later
  });

This request is sent to a controller that looks something like this:

'use strict';

var _ = require('lodash');
var aws = require('aws-sdk');
var config = require('../../config/environment');
var randomString = require('../../components/randomString');

// Creates a new upload in the DB.
exports.create = function(req, res) {
  var s3 = new aws.S3();
  var folder = randomString.generate(20); // I guess I do this because when the user downloads the file it will have the original file name.
  var matches = req.body.upload.match(/data:([A-Za-z-+\/].+);base64,(.+)/);

  if (matches === null || matches.length !== 3) {
    return handleError(res, 'Invalid input string');
  }

  var uploadBody = new Buffer(matches[2], 'base64');

  var params = {
    Bucket: config.aws.bucketName,
    Key: folder + '/' + req.body.uploadName,
    Body: uploadBody,
    ACL:'public-read'
  };

  s3.putObject(params, function(err, data) {
    if (err)
      console.log(err)
    else {
      console.log("Successfully uploaded data to csk3-uploads/" + folder + '/' + req.body.uploadName);
      return res.json({
        name: req.body.uploadName,
        bucket: config.aws.bucketName,
        key: folder
      });
    }
   });
};

function handleError(res, err) {
  return res.send(500, err);
}

server/components/randomString/index.js

'use strict';

module.exports.generate = function(textLength) {
  textLength = textLength || 10;
  var text = '';
  var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  for(var i = 0; i < textLength; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  return text;
};

enter image description here

server/config/environment/development.js

enter image description here

server/api/upload/upload.controller.js

enter image description here

edited May 16, 2015 at 4:17

answered May 14, 2015 at 16:49

Michael J. Calkins

32.7k15 gold badges64 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Daimz Over a year ago

Thanks for this, I am trying it out at the moment. How/where do I configure Bucket: config.aws.bucketName, also what if I wanted to upload to several folders. Profile Pictures -> profile-pictures, general -> general that sort of thing?

Daimz Over a year ago

Also I get this error Error: Cannot find module '../../components/randomString'

Daimz Over a year ago

As I am using Yeomans Angular-fullstack generator, the folder structure is a little different. server/api/uploads is where the uploads controller etc will go. but the files are broken up. index.js, uploads.controller.js, uploads.module.js, uploads.spec.js I am a bit confused by how I should & where in the file structure I should be adding your code.

Michael J. Calkins Over a year ago

@Daimz I just added a bunch of screenshots that will hopefully help explain better and the randomString.

Daimz Over a year ago

Thanks, that so much clearer. I have included everything and I now have this error: ReferenceError: newResource is not defined

|

SUNDARRAJAN K · Accepted Answer · 2015-05-19 09:09:41Z

This is the way i used MEAN.JS for file upload.

Model

var UserSchema = new mongoose.Schema({
name:{type:String,required:true},
photo:Buffer  // Image
});

Server Controller

var userPicture = function(req,res){             // Stores Picture for a user matching the ID.
user.findById(req.param('id'), function (err, user) {
    console.log(req.files) // File from Client
    if(req.files.file){   // If the Image exists
        var fs = require('node-fs');
        fs.readFile(req.files.file.path, function (dataErr, data) {
            if(data) {
                user.photo ='';
                user.photo = data;  // Assigns the image to the path.
                user.save(function (saveerr, saveuser) {
                    if (saveerr) {
                        throw saveerr;
                    }
                    res.json(HttpStatus.OK, saveuser);                        
                });
            }
        });
        return
    }
    res.json(HttpStatus.BAD_REQUEST,{error:"Error in file upload"});
});
};

Client Controller

$scope.saveuserImage =  function(){
    $scope.upload = $upload.upload({  // Using $upload
        url: '/user/'+$stateParams.id+'/userImage',  // Direct Server Call.
        method:'put',
        data:'',  // Where the image is going to be set.
        file: $scope.file
    }).progress(function (evt) {})
        .success(function () {
            var logo = new FileReader();  // FileReader.

            $scope.onAttachmentSelect = function(file){
                logo.onload = function (e) {
                    $scope.image = e.target.result;  // Assigns the image on the $scope variable.
                    $scope.logoName = file[0].name; // Assigns the file name.
                    $scope.$apply();
                };
                logo.readAsDataURL(file[0]);
                $scope.file = file[0];
                $scope.getFileData = file[0].name
            };
            location.reload();
            $scope.file = "";
            $scope.hideUpload = 'true'
        });
    $scope.getFileData = '';
 //        location.reload()
};

Html

The ng-file-select is used to get the file from the client.

This works fine for me. Hope this helps.

Note: I have used HTML tag instead of jade. Suitable changes applicable while using jade.

I think you might be able to get around using node-fs by changing the request body to form-data and using req.body I believe...

Alejandro Teixeira Muñoz · Accepted Answer · 2015-05-21 08:54:17Z

As far as I can guess, you are binding the FileReader.onload() method inside the saveUserImage function, then the onload method will be never called as the function is never binded instead a user calls saveUserImage method before editing the image. After that, no image will be selected as the onload() method will not execute.

Try coding Client Controller it this way

//This goes outside your method and will handle the file selection.This must be executed when your `input(type=file)` is created. Then we will use ng-init to bind it.

  $scope.onAttachmentSelect = function(){
        var logo = new FileReader();  // FileReader.
        logo.onload = function (event) {
        console.log("THE IMAGE HAS LOADED");
        var file = event.currentTarget.files[0]
        console.log("FILENAME:"+file.name);
        $scope.image = file; 
        $scope.logoName = file.name; // Assigns the file name.
           $scope.$apply();
           //Call save from here
           $scope.saveuserImage();
        };
        logo.readAsDataURL(file[0]);
        $scope.file = file[0];
       $scope.getFileData = file[0].name
            reader.readAsDataURL(file);
    };


//The save method is called from the onload function (when you add a new file)
$scope.saveuserImage =  function(){
    console.log("STARGING UPLOAD");
    $scope.upload = $upload.upload({  // Using $upload
        url: '/user/'+$stateParams.id+'/userImage',  
        method:'put'
        data:,   $scope.image
        file: $scope.file
    }).progress(function (evt) {})
        .success(function () {
            location.reload();
            $scope.file = "";
            $scope.hideUpload = 'true'
        });
    $scope.getFileData = '';
 //        location.reload()
};

The HTML.

//There is the ng-init call to binding function onAttachmentSelect
<div class="form-group">
  <label>File Upload</label>
  <input type="file" ng-init="onAttachmentSelect" ng-model="newResource.newUpload">
</div>

Hope this clue may help you

EDIT*

Will try to explain you the different Steps you must follow to check your code:

1.- Is your input[type=file] showing? If showing, please select an image

2.- Is your input calling the onload when the image selected has changed? (a console.log should be printed with my code version)

3.- If it has been called. Make the operations you need before sending, inside the onload method (if possible)

4.- When this method has finished doing desired changes. Inform with ng-model or however you want, a variable in the object you prepared to upload, with the base64 string generated in the onload method.

When arriving this point, remember checking that:

As very big images could be sent over json with base64, it´s very important to remember changing the minimum json size in Express.js for your app to prevent rejects. This is done, for example in your server/app.js as this:

var bodyParser = require('body-parser');
app.use(bodyParser.json({limit: '50mb'}));
app.use(bodyParser.urlencoded({limit: '50mb'}));

Remember also that the method reader.readAsDataURL(file) will give you a base64 string that could act as src of the image. You don´t need more than this. This base64 is what you can save in mongoose. Then, you can use ng-model to send a variable containing the base64 in the form with the "submit" button.

Then, in the Express.js endpoint that will handle your form, you will be able to decode the base64 string to a file, or to save the base64 directly on mongoose (storing images in the db is not much recommended if a lot of images is being to be loaded, or big ones desired, as the mongoDB query will be very slow).

Hope you can solve with those indications. If you still have some doubts, please comment and I´ll try to help

Daniel · Accepted Answer · 2015-12-02 23:09:36Z

I'm also a noob using MEANJS, and this is how I made it work using ng-flow + FileReader:

HTML input:

<div flow-init 
        flow-files-added="processFiles($files)"
        flow-files-submitted="$flow.upload()" 
        test-chunks="false">
        <!-- flow-file-error="someHandlerMethod( $file, $message, $flow )"     ! need to implement-->
        <div class="drop" flow-drop ng-class="dropClass">
            <span class="btn btn-default" flow-btn>Upload File</span>
            <span class="btn btn-default" flow-btn flow-directory ng-show="$flow.supportDirectory">Upload Folder</span>
            <b>OR</b>
            Drag And Drop your file here
        </div>

controller:

    $scope.uploadedImage = 0;

    // PREPARE FILE FOR UPLOAD
    $scope.processFiles = function(flow){
        var reader = new FileReader();
        reader.onload = function(event) {
            $scope.uploadedImage = event.target.result;
        };
        reader.onerror = function(event) {
            console.error('File could not be read! Code ' + event.target.error.code);
        };
        reader.readAsDataURL(flow[0].file);
    };

And on the server side the variable on the model receiving the value of uploadedImage is just of type string.

Fetching it back from the server didn't require any conversion:

<img src={{result.picture}} class="pic-image" alt="Pic"/>

Now just need to find out what to do with big files...

Collectives™ on Stack Overflow

Uploading images with Mongoose, Express and AngularJS

4 Answers 4

11 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related