adddog.js

import React from 'react';
import { Form, Input, Button, message,Upload} from 'antd';
import { status, json } from '../utilities/requestHandlers';
import UserContext from '../contexts/user';
import {withRouter} from 'react-router-dom';
import { UploadOutlined } from '@ant-design/icons';

const formItemLayout = {
    labelCol: { xs: { span: 24 }, sm: { span: 6 } },
    wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
};

const tailFormItemLayout = {
    wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
};

class AddDog extends React.Component{

    constructor(props){
        super(props)
        this.add = this.add.bind(this)
    }

    static contextType = UserContext;

    add(values){
        console.log(values)
        values.authorID=this.context.user.ID
        if(values.imageURL){
            values.imageURL="https://melody-annex-3000.codio-box.uk"+values.imageURL.file.response.links.path
        }
        const { confirm, ...data } = values;
        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/dogs/`, {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                "Authorization": this.context.user.Authorization,
                'Content-Type': 'application/json'
            }
        })
        .then(status)
        .then(json)
        .then(data => {
            console.log("Created succesfully");
            console.log(data)
            this.props.history.push(`/dog/${data.ID}`);
        })
        .catch(errorResponse => {
            alert("Creation failed" +errorResponse)
            console.log('Creation failed');
            alert(`Error: ${JSON.stringify(errorResponse)}`);
        });
    };

    render() {
        if (this.context.user.role!=='admin'){
            this.props.history.push("/");
        }
        const uploadProps = {
            name: 'upload',
            action: 'https://melody-annex-3000.codio-box.uk/api/v1/images',
            headers: {
              authorization: this.context.user.Authorization
            },
            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.`);
              }
            },
          };
        return (
            <Form {...formItemLayout} name="Create" onFinish={this.add} scrollToFirstError >

                <Form.Item name="Name" label="Name">
                    <Input />
                </Form.Item>
                
                <Form.Item name="Breed" label="Breed">
                    <Input />
                </Form.Item>

                <Form.Item name="Age" label="Age">
                    <Input />
                </Form.Item>


                <Form.Item name="imageURL" label="imageURL">
                    <Upload {...uploadProps}>
                        <Button icon={<UploadOutlined />}>Click to Upload</Button>
                    </Upload>
                </Form.Item>

                <Form.Item name="Colour" label="Colour">
                    <Input />
                </Form.Item>

                <Form.Item name="about" label="About">
                    <Input />
                </Form.Item>

                <Form.Item {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">Add</Button>
                </Form.Item>
            </Form>

        );

    };

};

export default withRouter(AddDog);