Cloudinary File-Upload/ReactJs/Express Node Unable to get response

Question

Trying to get file-uploading work using Express/Node on cloudinary with no luck.I'm able to post the request,my file gets uploaded to the cloudinary server but never gets a response resulting in my request to time out.I'm using [express-file-upload][1] to send the data to cloudinary as a stream of bits and axios to post it.

My Express router API code:

const fileUpload = require("express-fileupload");
const cloudinary = require("cloudinary");

    router.use(fileUpload());

    cloudinary.config({
        cloud_name: "xyx",
        api_key: "xyxxyxxyxxyxxyx",
        api_secret: "xyxxyxxyxxyxxyxxyx"
    });

    router.post("/upload", function(req, res, next) {
        console.log(req);
        var fileGettingUploaded = req.files.file.data;

        cloudinary.uploader
            .upload_stream({ resource_type: "raw" }, function(error, result) {
                console.log(error);
                console.log(result);
            })
            .end(fileGettingUploaded);
    });

  [1]: https://www.npmjs.com/package/express-fileupload

My Axios Post Request from the component

const { fileName } = this.state;
        const formData = new FormData();
        formData.append("file", fileName);
        const url = `/api/upload`;
        axiosInstance
            .post(url, formData, {
                headers: {
                    "Content-Type": fileName.type
                }
            })
            .then(response => {
                if (response.status === 200 && response.data) {
                    console.log(response);
                }
            })
            .catch(error => {
                console.log(error);
            });
    };

This results in a request which successfully uploads my file to cloudinary (I can see the uploaded file in the cloudinary's dashboard) but unable to give me a response which ideally should be a url to the uploaded file.Can anyone guide me what I'm doing wrong ?

have you tried just logging the response, i.e. not checking for 200 and if it has data? — Anthony
@Tony Yes,it doesn't log any response.All I see is the request getting timed out after my specified time that is, Error: timeout of 120000ms exceeded .. — Technologeek

VivekN VivekN · Accepted Answer · 2018-03-11T21:10:51

Couple of things need to be rectified here.

A) No need to create this

const formData = new FormData();
formData.append("file", fileName);

B) In your imgSrc state you already have the data url.Just send that to your express server as a post parameter.

Something like this:-

     uploadPicture = () => {
        const { fileName, imgSrc } = this.state;
        const url = `/api/upload`;
        axiosInstance
            .post(url, {
                fileUrl: imgSrc
            })
            .then(response => {
                if (response.status === 200 && response.data) {
                    console.log(response);
                }
            })
            .catch(error => {
                console.log(error);
            });
    };

c) On your node server read the url from req.body

router.post("/upload", function(req, res, next) {
    const fileGettingUploaded = req.body.fileUrl;

    cloudinary.uploader.upload(fileGettingUploaded, function(result, error) {
        if (result) {
            res.status(200).json(result);
        } else {
            res.status(500).json(error);
        }
    });
});

This should fix the issue for you.

I am not really sure if this is best way to work with image uploads with cloudinary, I would suggest you to read more about it and see how other's are doing it.

For now this should fix your issue.

Cloudinary File-Upload/ReactJs/Express Node Unable to get response

1 Answers