How to connect client side file input to server side cloudinary upload?

Question

We are working on a cloudinary upload. We have two parts written, the cloudinary method on the server via the cloudinary npm package and another component on the client to grab the file from an input.

When we're passing this file to the server, the cloudinary upload method does not work. If we're just using a normal image from the web the method is working properly, meaning the method is working in general.

So it seems we still need to figure out how to send the file from the client to the server side method properly. Unfortunately there is no clear description on the cloudinary docs how to do this, all they say is something like 'your_image_file.jpg' as the path. The problem with the path is, that it's not possible from the browser side due to security reasons to get the exact image path. How have you done this so far? Please note, we do NOT want to use client side upload and/or the jQuery plugin since we do not use jQuery in our app.

I don't know cloadinary, but I don't think you can do direct file uploads with raw Meteor since you can't do a direct form POST, but that's not too big of an issue as there are some work-arounds. One workaround would be to setup a Meteor.method to allow you to "stream" the file contents to your server. Another would be to write a raw app to handle the file upload bit only. You might even be able to tie into the underlying node server within Meteor directly. — CodeChimp
Did you ever resolve this as I am running into same issues...? — CheGuevarasBeret

tocker tocker · Accepted Answer · 2016-08-08T12:37:37

(With links from the Cloudinary sample project.)

Set up an input tag (see link):

<input id="photo_image" name="image" type="file" />

And on the server side, upload the file to cloudinary (see link):

var imageFile = req.files.image.path;
// Upload file to Cloudinary
cloudinary.uploader.upload(imageFile, {tags: 'express_sample'})
        .then(function (image) {
            console.log('** file uploaded to Cloudinary service');
            console.dir(image);
            photo.image = image;
            // Save photo with image metadata
            return photo.save();
        })
        .then(function (photo) {
            console.log('** photo saved')
        })
        .finally(function () {
            res.render('photos/create_through_server', {photo: photo, upload: photo.image});
        });

How to connect client side file input to server side cloudinary upload?

1 Answers