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.

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)
});

Answers


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

Search




Leave an answer