Uploading image to Cloudinary (Mean)

Question

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.

html

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

controller

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

api

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

score 0 · Answer 1 · answered Feb 10 '16 at 13:56

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

Uploading image to Cloudinary (Mean)

1 Answers1