Problem uploading images with React

react
1

I’ve recently started porting my projects into React (been fairly straightforward and pain-free so far!) but I’m a bit stuck on one, annoying little problem.

I’m using CollectionFS for the file upload (using filesystem) but it just won’t submit the form! I’m assuming I need to do something to handle the change when the file is selected, but I can’t find much documentation on file uploads with React.

Anyway, here is the code:

avatarSubmit(event) {
event.preventDefault();
FS.Utility.eachFile(event, function(file) {
  Avatars.insert(file, function (err, fileObj) {
if (err){
  // error
  toastr.error(console.error);
} else {
  var userId = Meteor.userId();
  var avatarURL = {
"profile.avatar": "/cfs/files/avatars/" + fileObj._id
  };
  // Success!
  toastr.success('Upload succeeded!');
Meteor.users.update(userId, {$set: avatarURL});
};
  });
});
},

And the form modal:

<div className="modal fade" id="newAvatar" role="dialog">
  <div className="modal-dialog">
    <div className="modal-content sharp">
      <div className="modal-header">
        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 className="modal-title">Change avatar</h4>
      </div>
      <form onSubmit={this.avatarSubmit}>
        <div className="modal-body top-buffer bot-buffer">
          <div className="fileinput fileinput-new" data-provides="fileinput">
            <input type="file" />
          </div>
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-default sharp" data-dismiss="modal">Close</button>
          <input type="submit" className="btn btn-primary sharp" />
        </div>
      </form>
    </div>
  </div>
</div>

I’m using Bootstrap and the file upload is a modal. However moving it out of a modal makes no difference (and it wouldn’t make any difference anyway right?).

It’s also worth noting I’m getting no errors or anything, it’s just not doing anything!

Thanks for your help!

Ignore me, turned out to be an easy fix. Changing onSubmit to onChange worked… Doh!

Korus.

2

Ignore me, turned out to be an easy fix. Changing onSubmit to onChange worked… Doh!

2 Likes