Image upload Meteor-React

help
1

Hi,

We are building a project using meteor-react (with latest meteor version - 1.6.1).
I know there are a few threads covering this topic, but nothing very recent.

  1. We want to upload images to the local server. We don’t wish to use the slingshot package because we don’t want to use 3rd party tools (AWS).

  2. We would later like to use CDN to have all static content (images) on there.

I’ve heard that the collections FS package isn’t maintained anymore. So I can’t use that.

  1. We would like it to be compatible when I try to migrate my app to Android/IOS.

  2. The user should also be able to update the photo.

Is there a package for this? Can anyone please help?
How do I upload images?

2

Hi,

I use https://github.com/VeliovGroup/Meteor-Files

which after many tests of other solutions was the best and the much complete for me.

I use with gm to resize the picture in several variations and store pictures locally.

2 Likes
3

Thanks @imike57. Are you using Meteor-React as well?
What is gm?

4

gm: https://www.npmjs.com/package/gm

1 Like
5

Yes I use meteor with react.
gm is http://www.graphicsmagick.org/
usefull to convert and add effects to your pictures and compatible with Meteor-Files

1 Like
6

Thanks @minhna for the reply! :slight_smile:

7

thanks again @imike57. I will try it out and share my findings here. Thanks

8

Hi @imike57,I tried implementing this using this link: https://github.com/VeliovGroup/Meteor-Files/wiki/React-Example

I am unable to find the server side code for this and am getting a lot of errors. Do you think you can help me with some sample code please?

9

Hi @ritzy


this should help…

12

Hi - I upload Avatar images up to Cloudinary. Here is what the React component looks like for the “unsigned” - to minimize server interaction - upload. Then look at their website for how to do “signed” upload.

/* UploadAvatar.jsx */

import React from ‘react’ ;
import prebind from ‘meteor-react-prebind’ ;
import { Meteor } from ‘meteor/meteor’ ;

/* called by LoginList.jsx */

export default class UploadAvatar extends React.Component {

constructor( props ) {
super( props ) ;
prebind( this ) ;
}

cloudinary_opener( e ) {
if ( Meteor.user() ) {
cloudinary.openUploadWidget({
multiple: false ,
max_image_width: 600 ,
max_image_height: 400 ,
cloud_name: ‘ur_clowd_nam’ ,
upload_preset: ‘ur_uplowd_preset’ ,
resource_type: ‘image’ ,
client_allowed_formats: [ “bmp”, “gif”, “ico”, “jpeg”, “jpg”, “png”, “svg” ] ,
max_file_size: 2000000
} ,
function( error, result ) {

      let secure_url = JSON.stringify( result ) ;
      let delete_token = secure_url ;

      secure_url = secure_url.substring( secure_url.indexOf( 'secure_url' ) ) ;
      secure_url = secure_url.substring( secure_url.indexOf( 'https://') ) ;
      secure_url = secure_url.substring( 0, secure_url.indexOf( '","') ) ;

      delete_token = delete_token.substring( delete_token.indexOf( 'delete_token' ) ) ;
      delete_token = delete_token.substring( delete_token.indexOf( '":"') + 3 ) ;
      Session.set( 'delete_token',
        delete_token.substring( 0, delete_token.indexOf( '","') ) ) ;

      if ( error ) {
        alert( '**  ERROR  ** Trying to Save Avatar Picture.' ) ;
      } else {
        Meteor.call( 'upsertAvatar', secure_url, function( err, res ) {
          if ( err ) {
            alert( "**  ERROR trying to save avatar picture.  **  " + err.message ) ;
          } else {
            //  success message
          }
        }) ;
      }
    }
  ) ;
} else {
  alert( "Sorry, you must be Logged-In to your account before you can upload an Avatar." ) ;
}

}

render() {
	return (
  <div className="loginlistav">
    <a className="loginlisttext" ref="upload_widget_opener"
      id="upload_widget_opener" onClick={ this.cloudinary_opener }>Upload Avatar</a>
  </div>
) ;
}

} ;

Then in MeteorMethods, you have the function something like:

upsertAvatar: function( avatarurl ) { // upload avatar image
check( [ avatarurl ], [ String ] ) ;

let future = new Future() ;

if ( Meteor.user() ) {
  Meteor.users.upsert({ username: Meteor.user().username },
    { $set: { "profile.image": avatarurl } }) ;
  future.return( true ) ;
} else {
  future.return( false ) ;
}
return future.wait() ;

},

– easy enough, ciao, jw

1 Like