Axios Image Upload In React Ant Design

Ant Design React UI Library

Ant Financial has a large number of enterprise-level products. With complex scenarios, designers and developers often need to respond fast due to frequent changes in product demands and concurrent R & D workflow. Many similar contents exist in the process. Through abstraction, we could obtain some stable and highly reusable components and pages.

On the other hand, with the trend of commercialization, more and more enterprise products begin to pursue better user experiences. Under this situation, Ant User-Experience Design Team builds a design system for enterprise products based on four design values of Natural, Certain, Meaningful, and Growing. It aims to uniform the user interface specs and reduce redundancies and excessive production costs, helping product designers to focus on better user experience.

https://ant.design/

Ant Desing Default Upload Component

import React from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Upload } from 'antd';
const props = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(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.`);
    }
  },
};
const App = () => (
  <Upload {...props}>
    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>
);
export default App;

Install Axios in your Project

Package manager
Using npm:

$ npm install axios
Using bower:

$ bower install axios
Using yarn:

$ yarn add axios
Using pnpm:

$ pnpm add axios
Once the package is installed, you can import the library using import or require approach:

import axios, {isCancel, AxiosError} from 'axios';
You can also use the default export, since the named export is just a re-export from the Axios factory:

import axios from 'axios';

console.log(axios.isCancel('something'));
If you use require for importing, only default export is available:

const axios = require('axios');

console.log(axios.isCancel('something'));

Change Default Upload Functionality with axios

Ant Design has inbuild upload action trigger functionality. We have to stop this one and will apply our upload functionality.

import React from 'react';
import axios from "axios";
import { UploadOutlined } from '@ant-design/icons';
import { Button, message, Upload } from 'antd';
const propsLogo = {
    name: "logo",
    action: `https://yourdomain/api/v1/util/uploadLogo`,
    headers: {
      authorization: `Bearer ${storage.getToken()}`, // if you have security token
    },
    fileList: [],
    beforeUpload: async (file) => {
      const formData = new FormData();
      formData.append("logo", file);
      let response = await ajax.post("/util/uploadLogo", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      } catch (error) {
        console.log(error)
      }
      return false;
    },
  };
const App = () => (
  <Upload {...propsLogo}>
    <Button icon={<UploadOutlined />}>Click to Upload</Button>
  </Upload>
);
export default App;

Thank you for reading this article.

If you have any doubt please feel free to connect with me.