Enhancement: File upload user image for profile

[amobrem]

It would be amazing to include a file upload example. upload the file to the node server auto crop then stream it to aws.

[naartjie]

Hi @amobrem. What is auto crop?

[amobrem]

Hi @naartjie. By auto crop, i meant you would resize and crop the image to 64 by 64 for a thumbnail and maybe a 300 by 300 to use as the display image on the profile page.

[naartjie]

Ah gotcha, sorry I somehow missed the profile pic part in the title, and was just thinking plain vanilla file upload.

[theviking]

+1

[netusco]

+2

[MichaelJCole]

+1

On Fri, May 9, 2014 at 6:08 AM, netusco notifications@github.com wrote:

+2

— Reply to this email directly or view it on GitHubhttps://github.com/meanjs/mean/issues/55#issuecomment-42655143 .

Michael Cole http://Powma.com (512) 333-4372

[amobrem]

it would also be cool, if we could make the aws keys env variables.

[telemakhos]

There are a lot of packages and examples of uploaders... I think the statics-to-S3 (or any CDN) should be separated from avatars and image manipulation (maybe provided as a separate package) just in case someone doesn't want to use CDN (I guess they'll still want avatars :yum: ).

For image manipulations (crop, resize, etc) looks like https://github.com/rsms/node-imagemagick could be a nice option, but surely there are others. For statics management/deployment and interacting with AWS (uploads to S3/Cloudfront, etc) we've got the official SDK... https://github.com/aws/aws-sdk-js and others like this one that does cool stuff like concat -> uglify -> gzip -> Upload assets to S3

We need a poll app asap... haha

[amoshaviv]

Hi Everyone,

In order to help the community better review feature requests, we organized everything in a public Trello board: https://trello.com/b/5FAPcode/mean-js. You can comment and vote on the features you want implemented, so we'll have a clearer understanding of community needs.

Let us know what you think about this solution.

Cheers, Amos

[telemakhos]

@amoshaviv Cool! I suggest a kanban-ish column organisation like Meteor or Sails boards...

[kidesigner]

I very very need Profile Image, please help me

[igorauad]

@mrkyt If you need a fast way of doing this, obviously one way is to use social media pictures. In my app I included the following method on the User model:

UserSchema.methods.setProfilePicture = function() {
  if (this.provider !== 'local' && this.picture !== '') {
    switch (this.provider) {
      case 'facebook':
      this.picture = 'https:graph.facebook.com/' + this.providerData.username + '/picture?type=large';
      break;

      case 'google':
      this.picture = this.providerData.picture;
      break;

      case 'linkedin': 
      this.picture = this.providerData.pictureUrl;
      break;
    }
  }
};

So, when the user first registers, I call user.setProfilePicture() before saving. I haven`t implemented upload of profile pictures, but I have another upload scheme (for posting images). I have used angular-file-upload and cloudinary. Maybe it is worth to check these out.

[kidesigner]

@igorauad thank you so much for support me. I also use Angular-file-upload but it not support Crop and Resize image before upload to S3 cloud. If you can please help me. Again,thank bro so much!

[Dollab]

Hi, I've implemented a quick and dirty solution for a prototype. It enables user to select an image file, resize and crop in the browser before sending it to an S3 bucket. It relies on canvas and filereader and therefore only works on modern browsers (no < IE9). It was inspired from Andy Shora crop directive and the angular-file-upload S3 exemple.

Here is a link to the image crop directive: https://github.com/Dollab/IMAGE_CROP. It needs much improvement but works. The crop directive returns a data/url that you can then convert to a blob to send to S3 via angular-file-upload.

[Dollab]

Here is a link to the service I made to wrap the angular-file-upload to S3: https://github.com/Dollab/S3_UPLOAD_SERVICE You need to config your server to generate the aws temporary policy as described in Nukul Bhasin's example: https://github.com/nukulb/s3-angular-file-upload

You can then easily upload any file or dataURI to S3 via the following lines of code:

var filesToUpload = new FilesToUpload(dataURIs);
// with dataURIs being an array of dataURI or an array of files object      
filesToUpload.s3Upload(function(files){
  /* callback function called with the filesToUpload object as argument
  if all files have been uploaded successfully
  write here stuff to do if upload successful,
  such as saving url array stored in files.url
   ex: $scope.avatar= files.url[0];
  */
});

[amoshaviv]

integrated in the new version