Uploading Image using CollectionFS by POST Submiting to URL


#1

I am fairly new to Meteor and Javascript Development front in overall. That being said, I managed to build an app which uses Collection FS for uploading images to the server and I am planning to integrate Redactor Text Editor in my app as Blog post editor. Redactor uses url and POST submit method to upload its editor-inside images, but from the Guide I am following for Collection FS, it uses Input change event to upload the images. Being new I have no idea how to change the behaviour of Collection FS insert action. What i managed to do so far is, change the behaviour from input event change to form submit event to insert the images.

From Official Website of Redactor, this is the Guide

Any guide from your side would be of great help for me as i am just starting off it would be immensely helpful and beneficial for learning this great framework.

This is the code I did so far to change the FS Collection insert image

Template.hello.events({

'change .fileInput': function(event, tmpl){
  files = event.target.files;
  // For Displaying Image Preview of selected Image file 
  var output = tmpl.find('#image_prev');
  output.src = URL.createObjectURL(event.target.files[0]);
},

'submit form#form': function(event, tmpl){
  event.preventDefault();
  // Looping over multiple files if user selects more than one
  for (var i = 0, ln = files.length; i < ln; i++) {
    Images.insert(files[i], function (err, fileObj) {
        if (err){
           console.log(err);
        } else {
          console.log(fileObj)
          var imagesURL = '/cfs/files/images/' + fileObj._id;
          Photos.insert({
            url: imagesURL
          });
        }
    });
  }
  tmpl.find('form#form').reset();
}

  });

#2

Hi there,

I’m new as well, and have been struggling with this also. I came across both of these links who’s examples helped me get the submission working properly.

The mistake you’re probably making is in getting the files from the form submission. Check these links out.

Using var fileObj = template.find(‘input:file’); and then accessing it by fileObj.files[0] got me to be able to insert the file with the CollectionFS insert command. Hope that helps!


#3

Go to stackover flow slash questions/30720130/meteor-how-to-save-files-with-submit-form-instead-of-change-events

I can’t post the real link on here yet I guess but want you to have it!