lepozepo / cloudinary Goto Github PK

I noticed in the commit log you added an if check before the check() calls, then removed it again in a subsequent commit. Was the removal deliberate? Why was it added in the first place?

I'm seeing this error, where the server complains that check is undefined on my laptop, but I wasn't seeing the error on my desktop. As far as I can tell, nothing has changed between the two machines.

As a side note, to check for the existence of functions like that in coffeescript one can use the existential operator like check? foo, bar. This ensures that check is both defined and of type function before calling it. Gotta love the existential operator. :-)

Any updates on this?

I noticed that Cloudinary supports video uploads. Is that something that your package plans to support in the future?

Hey there, I'm trying to pass a remote URL for cloudinary instead of a file which seems to be an option: http://cloudinary.com/documentation/upload_images#remote_upload

I'm getting this error:
Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Any advice?
Thanks

I have a file input that shows a preview by using . I also save the dataURL into a blob.

How do I send this to the method when I click on another button to upload?

I do not want to upload the image directly to server on change input.

I'll fix this asap

How can you upload a base64?

http://support.cloudinary.com/hc/en-us/articles/202519992-How-to-upload-a-Base64-DataURI-string-of-an-image-directly-from-the-browser-

I can't get image to be resized with this tag

<img width="100" height="100" src="{{c.url public_id format=format crop=fill}}" >

I have 4.0.0 working locally (can't seem to upgrade to 4.0.1, I'm not sure why). But when I'm uploading to live server (through mup), it breaks it. Attached is the screenshot. Any idea why?

Thanks!

I think it would be nice to add a property for example in the spacebars to control the maximum size of the upload. And to throw an error if needed.
For now I intend to use this :
Meteor.methods({
save_url:function(response){
if(response.upload_data > MAXIMUM_SIZE ){
//delete the file with the meteor call
throw new Meteor.Error('max-size', 'the size of the image is too big MAXIMUM_SIZE allowed');
}else{
Image.update( {... } } } );
}
});

But the problem is that it comes after the upload and not before, so there is unneeded use of cloudinary.

I find nothing on the cloudinary jQuery docs to handle that :/ They say there is one but I see nothing in the option they provide and where It think they must have made something :
http://cloudinary.com/documentation/upload_images

Something like
{{#c_upload callback="save_url" size_limit="MAXIMUM_SIZE"}}

{{/c_upload}}

Thank you @Lepozepo for making this package.

Is it possible to upload to a certain folder?

I tried {{#c_upload_stream folder=folder callback="save_url"}} without success.

Hello,
Thank you for making this.
I tried using ' meteor add cloudinary' and got the result in the picture.
What's the best way to go about getting this package to install? Thanks.

How do I call cloudinary upload properly within a meteor method?

Cloudinary._upload_file

I tried this but I get the following error (it works fine if I call it from client but not from within a method)

Exception while invoking method 'saveImage2' TypeError: Object #<Object> has no method '_upload_file'

Has anyone seen this error? Have just created a fresh install and followed instructions but the Cloudinary call is not happening and am getting the above error?

Thanks.

How do I call a cloudinary delete method within a meteor method (server side)?

Atmosphere shows 4.0.3 but the package.js file here shows 4.0.4. Maybe you need to run meteor publish in the package directory to push the latest version?

When try to use this code client side:

_cloudinary.after.update(function(user,file){
    if(file.percent_uploaded === 100 && !file.uploading){
        console.log(file);
    }
})

got this error:

TypeError: undefined is not an object (evaluating '_cloudinary.after.update')

Seems to be _cloudinary object doesn't have .after attribute/method:

[Log] Object (admin.js, line 1)
_collection: Object
_connection: null
_insecure: undefined
_makeNewID: function () { // 71
_name: null
_restricted: false
_transform: null
_validators: Object
__proto__: Object

Putting this here for anyone who comes across this issue:

I am not a coffeescript user, so I usually just go to js2.coffee to translate example code from coffeescript to JS. Well, that works 99% of the time. This time it caused me a silly error that took me way too long to identify.

The example coffeescript code for the Meteor event code translates to this:

Template.yourtemplate.events({
  "change input[type='file']": function(e) {
    var files;
    files = e.currentTarget.files;
    return Cloudinary.upload(files, {
      folder: "secret"
    }, function(err, res) {
      console.log("Upload Error: " + err);
      return console.log("Upload Result: " + res);
    });
  }
});

The problem was that the in the console.log method, the translator was using + instead of ,, and when you try to display an object in a string, it produced the [Object object] output. Simply change the +'s into ,'s and you'll be good.

Hi @Lepozepo,

thx for this package!

With audit-argument-checks enabled, your package is throwing the following:

Exception while invoking method 'cloudinary_upload' Error: Did not check() all arguments during call to 'cloudinary_upload'

Could you include a check() in all methods?

Following the readme instructions I'm able to upload a photo, and inside the (err, res) callback I get the resulting object. This is great, however I would really like to be able to call another function once that callback has returned. Code directly inside the (err, res) callback will be executed once it returns, but saying, for example, if (err) or if (res) inside that callback is executed immediately, thus skipped over.

The motivation behind this is I want to allow the user to upload potentially multiple images and append all of those images' public_ids to a document before inserting it into the database. But as-is I can't check whether the callback is successful in an if-block for a photo upload, and thus I can't upload multiple photos in succession (calling Cloudinary.upload() each time) and know that I'll be inserting the document only after all the uploads have completed and returned.

I thought there would be jQuery method to solve this, but haven't found anything that works. Thanks!

Receiving this error when trying to upload with Orion.
Any suggestions ?

Exception while invoking method 'c.sign' undefined

In previous versions, there is:

c.uploading_images

Since its not available on this latest version, any idea how to let users know you're uploading and the status of upload?

Hi,

I'm getting this error from the server side while uploading the image:

Exception while invoking method 'c.sign' ReferenceError: check is not defined

Any idea?

How I can send one more parameter to callback function. I need post._id so I can assign image to post entry.

tnx

This list is for people that have contributed by donating cash. Let me know your handle!

In my code I try to delete image from cloudinary this way:

Meteor.call("cloudinary_delete", image.public_id);

Image successfully deletes, but in console I see:

/Users/dimus/.meteorite/packages/cloudinary/Lepozepo/cloudinary/037bd59917c2d59a22761e64b5d4cf0cfe58c519/.build/npm/node_modules/cloudinary/lib/api.coffee:298
          return callback(result);
                 ^
TypeError: undefined is not a function
    at IncomingMessage.<anonymous> (/Users/dimus/.meteorite/packages/cloudinary/Lepozepo/cloudinary/037bd59917c2d59a22761e64b5d4cf0cfe58c519/.build/npm/node_modules/cloudinary/lib/api.coffee:298:18)
    at IncomingMessage.EventEmitter.emit (events.js:117:20)
    at _stream_readable.js:920:16
    at process._tickCallback (node.js:415:13)

I think problem is somewhere out here:

server.js

    cloudinary_delete:function(public_id){
        //This isn't very safe, lol
        this.unblock();
        Cloudinary.api.delete_resources([public_id]);
    },

api.coffee

exports.delete_resources = (public_ids, callback, options={}) ->
  resource_type = options["resource_type"] ? "image"
  type = options["type"] ? "upload"    
  uri = ["resources", resource_type, type]
  call_api("delete", uri, _.extend({"public_ids[]": public_ids}, only(options, "keep_original")), callback, options)      

There is not callback set in Cloudinary.api.delete_resources call.

Can you comment on that?

Hi again, I'm having issues where whatever transformations I try to apply the image is just returned as a normal full image. Am using the example given:

<img src="{{c.url public_id width=250 height=250 crop="fill"}}">

Hi,
I am using #c_upload_stream to upload some pictures on Cloudinary, with also _cloudinary.after.update

In local everything works fine but once in production, when I upload a file > 900ko nothing happens...

Here is my code

//In template html imageForm
{{#c_upload_stream callback="save_url"}}

<input type="file" accept="image/*;capture=camera">

<div id="p-image-loading" style="display:none;">
  Uploading...
</div>

{{/c_upload_stream}}

//In front js
Template.imageForm.events({
    "change input[type='file']": function(e) {
        var files = $("input")[0].files;

        C.upload_stream(files, function(res) {
            console.log("RES", res);
        });
    }
})

_cloudinary.after.update(function(user,file){
    if(file.percent_uploaded === 100 && !file.uploading){
        $('#p-image-loading').hide();
        Session.set("image-uploading", false);
        console.log("getting image...");
        var _img = $.cloudinary.image(file.public_id, {
            transformation: [{width: 150, height: 170, crop: "fill"}]
        });
        $('#p-image-upload').html(_img[0].outerHTML+'');
    } else {
        console.log("loading....");
        $('#p-image-upload').html('');
        $('#p-image-loading').show();
        Session.set("image-uploading", true);
    }
})

I get neither some errors nor console logs...

I hope it is clear :s !
Thanks,

Hi,

Appologies if this is a silly question, I'm still new to meteor. I'm trying to use the basic uploader for now, but I can't seem to get the callback function to fire from spacebars?

Everything else seems ok, the photos are uploaded, reports on progress, etc. $.cloudinary and the local collection _cloudinary all seem fine.

Not quite sure what I'm missing here, maybe some syntax issues? Any help would be very much appreciated!

How can be this fixed:
I20150818-09:34:57.766(5)? Exception while invoking method 'c.sign' Error: Did not check() all arguments during call to 'c.sign'

I need the URL on server to use on third party services (face recognition API), how could I grab the url on server side?

Hey, me again, I'm really liking this alternative to S3 but I still need a much cleaner implementation on the front end.

Specifically...

• A submit button rather then just auto uploading on file selection
• Progress bar variable for putting into a css width attribute

I'd really like to push these features along so if some type of cash incentive arraignment could be reached I'd be more then willing to pay a reasonable price to help this package be developed in a more timely manner.

Worked fine on localhost, but then on my deployment on Modulus (which uses SSL) it hangs at 100% for 60 seconds and then gives a 504 error. Standard upload works fine both local and deployed.

Error: Server returned unexpected status code - 504 cloudinary
Stacktrace:

    at a.extend._livedata_result (https://definitelynotmywebsite.com/f18e6a2b024aeb52ce862d994c0f882c6c2cfd44.js:44:22670)
    at o (https://definitelynotmywebsite.com/f18e6a2b024aeb52ce862d994c0f882c6c2cfd44.js:44:9774)
    at https://definitelynotmywebsite.com/f18e6a2b024aeb52ce862d994c0f882c6c2cfd44.js:44:395
    at Array.forEach (native)
    at Function.A.each.A.forEach (https://definitelynotmywebsite.com/f18e6a2b024aeb52ce862d994c0f882c6c2cfd44.js:1:865)
    at t.socket.onmessage (https://definitelynotmywebsite.com/f18e6a2b024aeb52ce862d994c0f882c6c2cfd44.js:44:353)
    at r.dispatchEvent (https://definitelynotmywebsite.com/f18e6a2b024aeb52ce862d994c0f882c6c2cfd44.js:42:1023)
    at T._dispatchMessage (https://definitelynotmywebsite.com/f18e6a2b024aeb52ce862d994c0f882c6c2cfd44.js:42:14589)
    at T._didMessage (https://definitelynotmywebsite.com/f18e6a2b024aeb52ce862d994c0f882c6c2cfd44.js:42:15476)
    at WebSocket.o.ws.onmessage (https://definitelynotmywebsite.com/f18e6a2b024aeb52ce862d994c0f882c6c2cfd44.js:42:17574)"

So I've extended your package to include unsigned clientside upload.
It's pretty rough and ready, but thought you might be interested. It's available at
https://github.com/cramhead/cloudinary_clientside_upload

A sample project, to show how to use it, is available at https://github.com/cramhead/cloudinaryStub

Hi,
Thanks for your effort to write this package. I just have a question to ask: How can I reduce the file size before uploading. For example, I allow the user to upload image directly from their phone and usually a picture would take about 3 or 4 MB because its width and height are around 2000x4000. But what I really need to display in the browser when rendering it is 273x375. So what should I do to reduce the picture size to what I mentioned so that I won't end up with a super larger image size which takes much of my bandwith. Thank you very much.

Please feel free to talk to me like an idiot, but how can I access the data from cloudinary client-side?

I've got the upload working and i've got it calling a serverside function, but if I just want the upload information on the client-side? How would I do this?

Any help is most appreciated.

Would love to see an example of using this package to upload images dropped on an HTML element.

Thanks for the package. Huge time saver.

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?

How can I upload an image without using the helper in the package with form data?

This is a shortened code that I have to first show the image in html5 before upload.

I am using cropper.js to crop the image first, before sending it to cloudinary with the formData.

// Deleted Cropper code.
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.readAsDataURL(input.files[0]);

    reader.onload = function (event) {
      $('#avatar-preview').attr('src', event.target.result);
    }
  }
}

Template.foo.events({
  'click .upload': function () {
    // I want to initiate uploading photo from $('#avatar-preview > img') with form data. Here
  }
});

Is it possible to display file upload progress in the new version?

First of all, thanks for the great package!

Issue I'm facing is: when I include optional parameters (as described in http://cloudinary.com/documentation/upload_images#remote_upload) in my upload, sometimes I get "Invalid Signature xxx. String to sign yyy" error.
Some parameters seem to "break" signature, like when I include eager:

Cloudinary.upload(files, {
    folder:"temp",
    format: 'png',
    eager: "c_fill,w_260,h_216"
}, function (err, res) {
...
});

while passing only folder, format parameters works just fine.

Allow submit or some way to modify the event handle that triggers an upload

so i would love to make this work with mdg:camera package for mobile, which basically gives you base64-encoded data URI.

I think it would be great for this package to support that out of the box.

Would you know anything about that?

If i found out i'll definitely PR ;)

This may be noob problem but I can't get this package to work.

I followed the readme, and things appear to work on the client side. But when it tries to call the server method - I've tried both 'cloudinary_upload' and 'cloudinary_upload_stream' - the server throws an error: Exception while invoking method 'cloudinary_upload' undefined

The method is clearly defined in the server.js file. I've verified that the package is installed. I have no idea why meteor can't seem to find this method, and worse, I have no idea how to troubleshoot it.

Hi, love the package but i can't seem to understand the read and manipulation part. Right now i have it set up, it sends the image and triggers a method that alters the user() object and adds the response to the users profile. But i don't know how to use {{c.url}} and how to pass in the public_id etc. Right now i am simply setting the image src to url from the response on the user() object. The issue with this is that i have a square area but if someone uploads a portrait or landscape image it scales and stretches it but i need it to crop!

If you could give an example of using the c.url after and how you get the public_id.

ps I am using this as profile picture so it needs to stay the same image after one session etc.
Thanks so much for your help in advanced!
Ollie

Right now it seems that it doesn't work if the browser does not support websockets (or users are under a proxy/firewall)

I haven't yet started looking to deeply into the error, but I figured I should let you know as other may have this same problem.

Some of the images do get uploaded. Others fail to upload with error below.

The source looks like

{{#c_upload_stream callback="savePendingImageUrl"}}
     <input class="fileUploader" type="file" multiple="true">
{{/c_upload_stream}}

W20140725-20:42:29.386(-7)? (STDERR) /Users/cram/.meteor/tools/858c88b520/lib/node_modules/fibers/future.js:154
W20140725-20:42:29.387(-7)? (STDERR)            throw new Error('Future resolved more than once');
W20140725-20:42:29.387(-7)? (STDERR)                  ^
W20140725-20:42:29.391(-7)? (STDERR) Error: Future resolved more than once
W20140725-20:42:29.392(-7)? (STDERR)     at Object.Future.return (/Users/cram/.meteor/tools/858c88b520/lib/node_modules/fibers/future.js:154:10)
W20140725-20:42:29.392(-7)? (STDERR)     at packages/cloudinary/server.js:62
W20140725-20:42:29.392(-7)? (STDERR)     at handle_response (/Users/cram/.meteorite/packages/cloudinary/Lepozepo/cloudinary/b415d480afd8af90c52bd1b6b7d594d1196abc0d/.build/npm/node_modules/cloudinary/lib/uploader.coffee:363:16)
W20140725-20:42:29.393(-7)? (STDERR)     at ClientRequest.<anonymous> (/Users/cram/.meteorite/packages/cloudinary/Lepozepo/cloudinary/b415d480afd8af90c52bd1b6b7d594d1196abc0d/.build/npm/node_modules/cloudinary/lib/uploader.coffee:445:16)
W20140725-20:42:29.393(-7)? (STDERR)     at ClientRequest.EventEmitter.emit (/Users/cram/.meteorite/packages/winston-client/farpoint/meteor-winston-client/bc9959bf320e7745052d42e84038b27eec0b1a68/.build/npm/node_modules/util/node_modules/events.node/events.js:72:17)
W20140725-20:42:29.394(-7)? (STDERR)     at CleartextStream.socketErrorListener (http.js:1547:9)
W20140725-20:42:29.394(-7)? (STDERR)     at CleartextStream.EventEmitter.emit (/Users/cram/.meteorite/packages/winston-client/farpoint/meteor-winston-client/bc9959bf320e7745052d42e84038b27eec0b1a68/.build/npm/node_modules/util/node_modules/events.node/events.js:72:17)
W20140725-20:42:29.395(-7)? (STDERR)     at Socket.onerror (tls.js:1445:17)
W20140725-20:42:29.395(-7)? (STDERR)     at Socket.EventEmitter.emit (/Users/cram/.meteorite/packages/winston-client/farpoint/meteor-winston-client/bc9959bf320e7745052d42e84038b27eec0b1a68/.build/npm/node_modules/util/node_modules/events.node/events.js:89:20)
W20140725-20:42:29.395(-7)? (STDERR)     at net.js:440:14

See this in console in 5 seconds after image upload:

[Error] RangeError: Maximum call stack size exceeded.
    forEach (underscore.js, line 157)
    clone (ejson.js, line 424)
    (анонимная функция) (id-map.js, line 108)
    forEach (id-map.js, line 84)
    clone (id-map.js, line 107)
    clone (ejson.js, line 416)
    (анонимная функция) (ejson.js, line 425)
    forEach (underscore.js, line 164)
    clone (ejson.js, line 424)
    (анонимная функция) (ejson.js, line 425)
    forEach (underscore.js, line 164)
    clone (ejson.js, line 424)
    (анонимная функция) (ejson.js, line 425)
    forEach (underscore.js, line 164)
    clone (ejson.js, line 424)

My template:

  {{#cloudinary_upload callback="save_url"}}
    <input type="file">
  {{/cloudinary_upload}}

Config:

if (Meteor.isServer) {
  //SERVER
  Cloudinary.config({
      cloud_name: '...',
      api_key: '...',
      api_secret: '...'
  });

  Meteor.methods({
    save_url:function(response){
        console.log('Add '+response.upload_data+' to the id of '+response.context);
    }
  });
}

if (Meteor.isClient) {
  //CLIENT
  $.cloudinary.config({
      cloud_name:'...'
  });
}

I've installed the package from atmosphere, entered my credentials.

I have it running on my dev server, and I can run for example this code:

Cloudinary.uploader.upload('https://dl.dropboxusercontent.com/u/2128641/dwu7a5cen1zpqy08itbv.jpg';, function(result) { 
console.log(result); 
});

.. And this work well! I get back the result with the public_id.

The problem is I cannot figure out how to upload from my local file system.

When I specify this path:

'~/workspace/ezvoice/processing/dwu7a5cen1zpqy08itbv.jpg'

I get this error

{ error: 
{ [Error: ENOENT, open '~/workspace/ezvoice/processing/dwu7a5cen1zpqy08itbv.jpg'] 
errno: 34, 
code: 'ENOENT', 
path: '~/workspace/ezvoice/processing/dwu7a5cen1zpqy08itbv.jpg' } }

In my Cloud9 workspace, I can click on this file path and it will open the image directly, so i am sure that the path is right.

I was thinking that it was a permissions issue, but I set the permissions on the file to 777, with no luck.

I also thought it might be a strange Cloud9 issue, so i cloned the project to Mac, but I get the exact same error message.

For some reason Cloudinary does not like my image path. I have also tried moving the image around, without luck.

any ideas?

thanks