how to use cloudinary with ant designs upload component?

Question

I'm trying to use cloudinary to host all the image data for when I make a file upload but I keep getting AjaxUploader Uncaught (in promise) TypeError: request is not a function error. It's hard for me to figure out how to use this with ant designs upload component which I got from the offical docs. It should be able to upload up to 5 files and if there are more, it conditionally un-renders the upload button, which I have already done. I just dont know how to handle the customRequest attribute, all my work is being done on the serverUpload function. Here is the link to sandbox: https://codesandbox.io/s/happy-sun-n9uus?file=/src/App.js

import React, { useState } from "react";
import Modal from "react-modal";
import { Form, Input, Button, Upload, message } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import axios from "axios";
import cloudinaryInfo from "./cloudinaryInfo/config.js";

const layout = {
  labelCol: {
    span: 8
  },
  wrapperCol: {
    span: 16
  }
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
  required: "${label} is required!",
  types: {
    email: "Your email is not a valid email!"
  }
};
/* eslint-enable no-template-curly-in-string */

const Question = ({ questionObj, productObj, updatedDataList }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [imageFilesList, setImageFilesList] = useState([]);

  const toggleModal = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setIsModalOpen(!isModalOpen);
  };

  const serverUpload = async (options) => {
    const { onSuccess, file, onError, onProgress } = options;
    console.log("imageFilesList: ", imageFilesList);
    try {
      const result = await Promise.all([]);
      for (let i = 0; i < imageFilesList.length; i++) {
        let file = imageFilesList[i];
        console.log("FILE: ", file);
        const formData = new FormData();
        formData.append("file", file);
        formData.append(
          "upload_preset",
          cloudinaryInfo.CLOUDINARY_UPLOAD_PRESET
        );
        result.push(
          axios.post(cloudinaryInfo.CLOUDINARY_IMAGE_UPLOAD_URL, formData)
        );
      }
      onSuccess("ok");
    } catch (err) {
      console.log(err);
      onError(err);
    }
  };

  const uploadProps = {
    name: "file",
    customRequest: { serverUpload },
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log("Not uploading ", info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
      setImageFilesList(info.fileList);
    },
    listType: "picture",
    maxCount: 5,
    multiple: true,
    onDrop: true
  };

  const modalContent = (
    <Form
      {...layout}
      name="nest-messages"
      onFinish={(values) => console.log(values)}
      validateMessages={validateMessages}
    >
      <Upload {...uploadProps}>
        {imageFilesList.length < 5 && (
          <Button icon={<UploadOutlined />}>Upload (Max: 5)</Button>
        )}
      </Upload>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );

  return (
    <div className="question">
      <button onClick={(e) => toggleModal(e)}>Open Modal</button>
      <hr style={{ height: 0.5, borderColor: "red" }} />
      {isModalOpen && (
        <div className="openPanel">
          <Modal
            isOpen={isModalOpen}
            onRequestClose={(e) => toggleModal(e)}
            ariaHideApp={false}
            style={{
              overlay: {
                backgroundColor: "grey"
              }
            }}
          >
            {modalContent}
            <Button onClick={(e) => toggleModal(e)}>Close</Button>
          </Modal>
        </div>
      )}
    </div>
  );
};

export default Question;

Answer 1

serverUpload() is a custom function to handle the request. You don't pass it to the action prop, you have to pass it to the antd upload customRequest prop, that's where custom requests go.

The action prop is for URLs that accept files, once you're making any modification to antd's upload default action you have to use customRequest.

See here