Create custom image request from firebase using Antd library.

firebaseAntdFileUploader.js

// Note: this is a combo between react-antd and firebase (storage)
// - How you can add your task progress bar to the antd-progress 

/* Action */
const firebaseUpload = ({ onSuccess, onProgress, onError, file }) => (dispatch) => {

    const storageRef = storage.ref(`portfolio/${file.name}`);

    const task = storageRef.put(file);

    task.on(
        "state_changed",

        function progress(snapshot) {
            dispatch({ type: FIREBASE_UPLOAD_PROGRESS });
            onProgress({
                percent: Math.floor(snapshot.bytesTransferred / snapshot.totalBytes).toFixed(2) * 100
            }, file);
        },

        function error(err) {
            dispatch({ type: FIREBASE_UPLOAD_ERROR, payload: err });
            onError(err, file);
        },

        function complete() {
            task.snapshot.ref.getDownloadURL().then(fileUrl => {
                dispatch({ type: FIREBASE_UPLOAD_END, payload: fileUrl })
                onSuccess(fileUrl, file);
            });
        }
    )
};

export { firebaseUpload }

/* Reducer */
export const firebaseUploderReducer = (state = {}, action) => {

    switch (action.type) {
        case FIREBASE_UPLOAD_PROGRESS:
            return { onProgress: true, onComplete: false }
        case FIREBASE_UPLOAD_ERROR:
            return { onProgress: false, onComplete: false, uploadError: action.payload }
        case FIREBASE_UPLOAD_END:
            return { onProgress: false, onComplete: true, fileUrl: action.payload }
        default:
            return state;
    }
};

/* screens: In your form component */

// First create a handler for the custom request that you should setup
const firebaseUploadHandler = e => {
        dispatch(firebaseUpload(e))
}

// ... antd Form
<Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
  // ... Some field up
  <fieldset>
      <legend>Programming Skills</legend>
      {profileInfo && (<Form.List name="programmingSkill" initialValue={profileInfo.programmingSkill}>
          {(fields, { add, remove }) => {
              return (
                  <>
                      {fields.map(({ key, name, fieldKey, ...restField }) => (
                          <Space key={key} style={{ display: 'flex', marginBottom: 8, justifyContent: 'space-between' }} align='start'>
                              <Form.Item name={[name, "language"]} fieldKey={[fieldKey, "language"]}>
                                  <Input placeholder='Language' />
                              </Form.Item>
                              <Form.Item
                                  name={[name, "image"]}
                                  fieldKey={[fieldKey, "image"]}
                              >
                                  <Upload
                                      customRequest={(e) => firebaseUploadHandler(e)}
                                  >
                                      <Button icon={<UploadOutlined />}>Click to Upload</Button>
                                  </Upload>
                              </Form.Item>
                              <Form.Item name={[name, "description"]} fieldKey={[fieldKey, "description"]}>
                                  <Input.TextArea placeholder='Description' />
                              </Form.Item>
                              <MinusCircleOutlined onClick={() => remove(name)} />
                          </Space>
                      ))}
                      <Form.Item>
                          <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                              Add field
                          </Button>
                      </Form.Item>
                  </>
              )
          }}
      </Form.List>)}
  </fieldset>
  // ... Some fields down
  <Form.Item>
    <Button type="primary" htmlType="submit">
      Submit
    </Button>
  </Form.Item>
</Form>