Combining Cloudinary Upload with Form Submit

[MerryOscar]

Hi Lepozepo,

Thanks for the Package! I was wondering if it was possible to combine the Cloudinary Image Upload with a form submit, so that the public_id of the uploaded image can be included in a newly created database collection?

I have the following code:

    <form class="addCategoryForm">
    <div class="form-group">

        <h4>Category Name</h4>
        <input placeholder="Enter category name" type="text" name="categoryName"><br>

        <h4>Category Image</h4>
        {{#c_upload callback="save_url"}}
            <input type="file">
        {{/c_upload}}

    </div>
    <input type="submit" value="Add Category">
</form>

And would like to capture the newly created public_id of the image in the collection. I thought maybe it would be possible by setting the Session variable to the public_id but could not figure out how to do this with the {{#c_upload}} function.

Any Ideas?

[Lepozepo]

If I understand correctly what you are trying to do is upload on form submit? If that's the case then have a look at the way the block helpers work and adapt the event handler for the form instead. This link should be an excellent starting point.

[roberto-belardo]

Hi MerryOscar, if you haven't solved it yet, this is how i did it:

CLIENT.html:

<template name="test">
<form class="main form page">
   <div class="form-group">
      <input type="file" title="Add image" id="header_file_image">
   </div>
   <input type="submit" value="Submit" class="btn btn-primary submit"/>
</form>
</template>

CLIENT.js

Template.test.events({
  'submit form': function(e, helper) {

    // Cloudinary management of Header Image
    var options = {context:this};

    if(helper.data && _.has(helper.data,"callback")){
        options.callback = helper.data.callback;
    }

    if(helper.data && _.has(helper.data,"public_id")){
        options.public_id = helper.data.public_id;
    }

    var files = [];
    var headerfile = $('#header_file_image')[0].files[0];
    files.push(headerfile);

    var cloudinary_id;
        _.each(files,function(file){
            var reader = new FileReader;

            reader.onload = function () {

                options.db_id = _cloudinary.insert({});
                Meteor.call("cloudinary_upload",reader.result,options,function(err,res){
                    cloudinary_id = res.public_id;
                    if(err){
                        _cloudinary.remove(options.db_id);
                        console.log(err);
                    }
                });
            };

            reader.readAsDataURL(file);
        });
    // end of Cloudinary management of Header Image


  },

[scribahti]

I too am trying to upload on form submission, with the goal of writing documents to a collection containing the Cloudinary public_id of the uploaded image along with other text provided in the form.

Following Lepozepo's original and backslash's modified example I've gotten as far as loading the file into the callback's namespace as such:

var files = e.currentTarget[0].files;

I can verify this variable stores the correct object with print statements. However, my FileReader object's onload function does not seem to be triggered.

[Lepozepo]

Try using the development branch, it makes it easier and more efficient but still doesn't have a delete function lol.

[scribahti]

Should I be looking at the registered meteor methods in server.js or the upload & upload_file functions in functions.coffee?

[Lepozepo]

Whichever one fits your use case best, lol. Using server.js methods will provide a more direct path to the function that actually handles the upload in the current version. Sorry I couldn't get the dev branch out to production yet, I got very busy last week >_<.

[Lepozepo]

Ok, I published the new code! It should be easier to do what you're trying to do now. All you need to do is call Cloudinary.upload(files,ops,callback). Hope to improve the docs next time I get a break.

[scribahti]

Thank you Marcelo!

[KudMath]

I am having trouble with this: Cloudinary.upload doesn't seem to do anything while Cloudinary._upload_file successfully uploads the file (although I have trouble catching the response in code). Any idea?