import {
Form,
Input,
Button,
Radio,
Select,
Cascader,
DatePicker,
InputNumber,
TreeSelect,
Switch,
Checkbox, Upload, UploadProps,
} from 'antd';
const {TextArea} = Input;
const onFinish = async (values: any) => {
console.log('Success:', values);
const form = new FormData()
for (const [key, value] of Object.entries(values)) {
if (value === undefined) {
continue;
}
if (key === "songFile") {
console.log("songFile", values[key])
form.append(key, values[key].fileList[0]?.originFileObj);
continue;
}
console.log("why???", key)
form.append(key, values[key]);
}
try {
const promise = await postSongApi(form);
console.log("promise", promise);
navigate("/songs");
} catch (err) {
alert("업로드에 실패하였습니다.")
throw err;
}
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
const uploadProps: UploadProps = {
//maxCount: 1,
//multiple: false,
onRemove: file => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
setFileList(newFileList);
},
beforeUpload: file => {
setFileList([...fileList, file]);
return false;
},
fileList,
};
<Form
labelCol={{span: 4}}
wrapperCol={{span: 14}}
layout="horizontal"
onValuesChange={onFormLayoutChange}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
disabled={componentDisabled}
>
<Form.Item
label="Name"
name="name"
rules={[{required: true, message: 'Please input your song name!'}]}>
<Input/>
</Form.Item>
<Form.Item
label="audioType"
name={"audioType"}>
<Select>
{(Object.keys(AudioType) as Array<keyof typeof AudioType>)?.map((audioType: any, index: any) => (
<Select.Option key={index} value={audioType}>{audioType}</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
label="copyRightHolder"
name="copyRightHolder"
>
<Input/>
</Form.Item>
<Form.Item
label="음원"
name={"songFile"}>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined/>}>Select File</Button>
</Upload>
</Form.Item>
<Form.Item
label="duration"
name="duration">
<InputNumber/>
</Form.Item>
<Form.Item
label="desc"
name="desc">
<TextArea rows={4}/>
</Form.Item>
<Form.Item label="Button">
<Button htmlType="submit">등록</Button>
</Form.Item>
</Form>