Home Ask Login Register

Developers Planet

Your answer is one click away!

Jon Roby February 2016

Uploading image to Cloudinary (Mean)

This question includes particulars to a framework, but I just have the general question on how to upload the photo file to an api. What is the actual part of the image that I submitting? What is the content of the photo?

I am able to successfully upload an image upon clicking a button (using angular-file-uploader. However, I don't know what part of this object I should be sending to my api.

The code below will complain about a type error: it can't convert circular structure to JSON.

So I can also try to grab the file out of the queue, but then I when it makes it to cloudinary, I receive an error: TypeError: file.match is not a function.


    <input type="file" nv-file-select uploader="user.uploader" />
    <button ng-click="user.upload()">Upload</button> 


vm.upload = function() {
    var photo = {file: vm.uploader.queue[0]}
    UserDisplay.uploadPhoto($stateParams.user_id, vm.uploader.queue[0])


cloudinary.uploader.upload(req.body.file, function(result) {
    console.log("made it here");


Itay Taragano February 2016

Cloudinary's Angular library supports ng-file-upload, not angular-file-uploader.

There's some code that isn't displayed here. For example what is UserDisplay?

You get this error because queue holds FileItem objects and not strings. You should initialize FileUploader with the upload url, and formData that includes the upload_preset. That way there is no need to override the upload function.

You can see the sample project on Cloudinary's AngularJS repo: https://github.com/cloudinary/cloudinary_angular/tree/master/samples/photo_album

Post Status

Asked in February 2016
Viewed 3,283 times
Voted 5
Answered 1 times


Leave an answer

Quote of the day: live life