Loading into Amazon s3 undefined property in meteor

Question

I followed this tutorial to upload images to amazon s3 and I encountered an error after selecting an image file from a picker file.

post_submit.js:36 Uncaught TypeError: Cannot read property 'uploadToAmazonS3' of undefined at Object.change input[type="file"] (post_submit.js:36) 

Here is my code

I can't figure out what causes this error, let me know if you need more of my code, but I think it covers most of this.

client / templates / messages / post_submit.html

 <template name="postSubmit"> <div class="upload-area"> <form id="upload"> <p class="alert alert-success text-center"> <span>Click or Drag a File Here to Upload</span> <input type="file"> </p> </form> {{> files}} </div> <input type="submit" value="Submit" class="btn btn-primary"/> </form> </template> 

client / template / message / post_submit.js

 Template.postSubmit.events({ 'change input[type="file"]' ( event, template ) { Modules.client.uploadToAmazonS3( { event: event, template: template } ); } }); 

and / modules / _modules.js

 Modules = {}; Modules.both = {}; 

client / modules / _modules.js

 Modules.client = {}; 

<strong> Server / modules / _modules.js

 Modules.server = {}; 

client / modules / upload_to_amazon_s3.js

 let template; let _getFileFromInput = ( event ) => event.target.files[0]; let _setPlaceholderText = ( string = "Click or Drag a File Here to Upload" ) => { template.find( ".alert span" ).innerText = string; }; let _addUrlToDatabase = ( url ) => { Meteor.call( "storeUrlInDatabase", url, ( error ) => { if ( error ) { Bert.alert( error.reason, "warning" ); _setPlaceholderText(); } else { Bert.alert( "File uploaded to Amazon S3!", "success" ); _setPlaceholderText(); } }); }; let _uploadFileToAmazon = ( file ) => { const uploader = new Slingshot.Upload( "uploadToAmazonS3" ); uploader.send( file, ( error, url ) => { if ( error ) { Bert.alert( error.message, "warning" ); _setPlaceholderText(); } else { _addUrlToDatabase( url ); } }); }; let upload = ( options ) => { template = options.template; let file = _getFileFromInput( options.event ); _setPlaceholderText( `Uploading ${file.name}...` ); _uploadFileToAmazon( file ); }; Modules.client.uploadToAmazonS3 = upload; 

server /slingshot.js

 Slingshot.fileRestrictions( "uploadToAmazonS3", { allowedFileTypes: [ "image/png", "image/jpeg", "image/gif" ], maxSize: 1 * 1024 * 1024 }); Slingshot.createDirective( "uploadToAmazonS3", Slingshot.S3Storage, { bucket: "mrskitson-images", acl: "public-read", authorize: function () { let userFileCount = Files.find( { "userId": this.userId } ).count(); return userFileCount < 3 ? true : false; }, key: function ( file ) { var user = Meteor.users.findOne( this.userId ); return user.emails[0].address + "/" + file.name; } }); 

Lib / collections / files.js

 Files = new Meteor.Collection( 'files' ); Files.allow({ insert: function() { return false; }, update: function() { return false; }, remove: function() { return false; } }); Files.deny({ insert: function(){ return true; }, update: function(){ return true; }, remove: function(){ return true; } }); 

<strong> both / methods / inserts / files.js

 Meteor.methods({ storeUrlInDatabase: function( url ) { check( url, String ); Modules.both.checkUrlValidity( url ); try { Files.insert({ url: url, userId: Meteor.userId(), added: new Date() }); } catch( exception ) { return exception; } } }); 

Answer 1

@ anders-kitson You could save a ton of time by carefully reading the error message. It tells you where the problem is:

post_submit.js:36 Uncaught TypeError: Cannot read property 'uploadToAmazonS3' of undefined at Object.change input[type="file"] (post_submit.js:36)

Line 36 post_submit.js

Although the file you showed as post_submit.js has a length of only 5 lines. If this is the correct file, the line with the violation is probably as follows:

Modules.client.uploadToAmazonS3( { event: event, template: template });

It is trying to tell you that Modules.client is undefined. This is the cause of your problem.

Answer 2

You know, I just cloned this git repository and it works for me:

 > Modules.client {uploadToAmazonS3: ƒ} 

I even renamed existing client/modules/upload-to-amazon.js to client/modules/upload_to_amazon_s3.js in the same way as in your code example.

Perhaps there is some problem that is preventing your file from loading? Maybe the ACL file does not have read permission?