Cloudinary + Sails.js direct upload doesn't work

Question

i'm trying to make cloudinary direct upload working but something in the documentation is missing... here are the steps i'm doing:

Controller:

/**
 * MyaccountController
 *
 * @description :: Server-side logic for managing myaccounts
 * @help        :: See http://sailsjs.org/#!/documentation/concepts/Controllers
 */
var cloudinary = require('cloudinary');

cloudinary.config({ 
    cloud_name: 'MyCloudName', 
    api_key: 'MyAPIKey', 
    api_secret: 'MyAPISecret' 
});

Now this is my layout:

<!--SCRIPTS-->
    <script type="text/javascript" src="/js/dependencies/sails.io.js"></script>
    <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
    <script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>
    <script type="text/javascript">
      cloudinary.cloudinary_js_config();
      var cloudinary_cors = "http://" + window.location.host + "/cloudinary_cors.html";
      console.log(cloudinary_cors);

      cloudinary.uploader.image_upload_tag('photo', { callback: cloudinary_cors });

      $(".photo").cloudinary_fileupload();

      // Using the config function 
      var cl = cloudinary.Cloudinary.new();
      cl.config( "MyCloudName", "MyAPIKey");
      /*
      $.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});
    </script>

My form:

<form action="" method="post" enctype="multipart/form-data" class="upload_form">
    <div class="form-group">
        <label>Foto de perfil</label>
        <input type="file" name="photo" id="photo" class="photo">
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default">Cargar</button>
    </div>
</form>

I don't get why it isn't working, in the docs it says Cloudinary's jQuery plugin requires your cloud_name and additional configuration parameters to be available. Note: never expose your api_secret in public client side code.

To automatically set-up Cloudinary's configuration, include the following line in your view or layout:

cloudinary.cloudinary_js_config()

This is done...

Direct uploading from the browser is performed using XHR (Ajax XMLHttpRequest‎) CORS (Cross Origin Resource Sharing) requests. In order to support older browsers that do not support CORS, the jQuery plugin will gracefully degrade to an iframe based solution.

This solution requires placing cloudinary_cors.html in the static folder of your Node application. This file is available in the html folder of Cloudinary's Javascript library. The following code builds a URL of the local cloudinary_cors.html file:

Done...

Direct upload file tag

Embed a file input tag in your HTML pages using the image_upload_tag view helper method.

The following example adds a file input field to your form. Selecting or dragging a file to this input field will automatically initiate uploading from the browser to Cloudinary.

cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors });

this is what i don't get... this is the uploader? how should i use it? and then i don't know what else to do, i'm using different docs to make it work but nothing helps... I hope anyone who did this can help me, thanks!

Answer 1

On controller initialize cloudinary as

var uploader = cloudinary.uploader.image_upload_tag('image_id', { callback: cloudinary_cors, html: { multiple: 1 } });

and pass it to view and render it over there,

  <%-uploader%>    

then use jquery to get data:

$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {}

you can use this script to bind the data to some hidden fields inside your form and cloudinary-fileupload will be generated when <%-uploader%> is rendered

Answer 2

In addition to CodeBean's answer, note that it seems that there are different ways of using Cloudinary that are mixed here (in the original code as was in question).

Controller As far as it can be seen from here, the MyaccountController controller doesn't do a thing:

1. You're requiring "cloudinary" - presumably from npm install, which creates an instance of the jQueryless Cloudinary class.
2. The variable is local to the controller so has no effect on the rest of the code

View:

Only one of these lines is required (preferably the second one):

<script type="text/javascript" src="/js/jquery.cloudinary.js"></script>
<script src="../node_modules/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js"></script>

This method returns a string with the <script> tag. The string should be then embedded in the HTML code. It is a server side code. Here, it does nothing.

cloudinary.cloudinary_js_config();

If you're using the jQuery File Upload code, you should refer to $.cloudinary. cloudinary was never defined in your layout.

Now you're creating a jQueryless instance, which you don't use afterwards.

var cl = cloudinary.Cloudinary.new();
cl.config( "MyCloudName", "MyAPIKey");

Finally, there's an open-ended comment with the code you were supposed to use in the beginning of the whole script:

/*
$.cloudinary.config({ cloud_name: 'MyCloudName', api_key: 'MyAPIKey'});

Regardless of CodeBean's response, you still need to config $.cloudinary.