ambitious-aqua
ambitious-aqua15mo ago

How do I upload a file with material UI?

I would like to upload a file in the creation form.
7 Replies
kapa.ai
kapa.ai15mo ago
Hi @soto76. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, you can perform a multipart upload with Refine. Here's how you can add an image field to the post creation form:
import {
useApiUrl,
} from "@refinedev/core";
import {
getValueFromEvent,
Create,
useForm,
} from "@refinedev/antd";
import {
Upload,
Form,
Input,
} from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();
const apiUrl = useApiUrl();

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={5}
multiple
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};

interface IPost {
id: number;
title: string;
image: [
{
uid: string;
name: string;
url: string;
status: "error" | "success" | "done" | "uploading" | "removed";
},
];
}
import {
useApiUrl,
} from "@refinedev/core";
import {
getValueFromEvent,
Create,
useForm,
} from "@refinedev/antd";
import {
Upload,
Form,
Input,
} from "antd";

export const PostCreate: React.FC = () => {
const { formProps, saveButtonProps } = useForm<IPost>();
const apiUrl = useApiUrl();

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout="vertical">
<Form.Item
label="Title"
name="title"
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
<Form.Item label="Image">
<Form.Item
name="image"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
>
<Upload.Dragger
name="file"
action={`${apiUrl}/media/upload`}
listType="picture"
maxCount={5}
multiple
>
<p className="ant-upload-text">
Drag & drop a file in this area
</p>
</Upload.Dragger>
</Form.Item>
</Form.Item>
</Form>
</Create>
);
};

interface IPost {
id: number;
title: string;
image: [
{
uid: string;
name: string;
url: string;
status: "error" | "success" | "done" | "uploading" | "removed";
},
];
}
You can reach the API URL by using the useApiUrl hook. You need an upload endpoint that accepts multipart uploads. This address should be passed into the action property of the Upload component. The endpoint should be Content-type: multipart/form-data and Form Data: file: binary. The data is sent to the API when the form is submitted. The following data are required for the Antd Upload component and all should be saved: - uid: Unique id - name: File Name - url: Download URL - status: error, success, done, uploading, removed For more information, you can refer to the Refine Multipart Upload guide (https://refine.dev/docs/advanced-tutorials/upload/multipart-upload/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai15mo ago
<@934748406096736296> kapa.ai is still learning and improving, please let us know how it did by reacting below
ambitious-aqua
ambitious-aquaOP15mo ago
but this uses antd, and I don't have it installed. I am using mui, can I still use the Upload component from antd? @kapa.ai
kapa.ai
kapa.ai15mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- No, you cannot use the Ant Design's Upload component directly in a Material-UI project without installing Ant Design. They are separate libraries and their components are not interchangeable. However, Material-UI has its own way of handling file uploads. You can use the input element with type="file" for file uploads in Material-UI. Unfortunately, the provided extracts do not contain a specific example of a file upload with Material-UI. For more examples and detailed information, you can refer to the Material-UI's official documentation (https://mui.com/components/buttons/#upload-button) and the Refine's examples with Material-UI (https://refine.dev/docs/examples/themes/refine-themes-mui). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai15mo ago
<@934748406096736296> kapa.ai is still learning and improving, please let us know how it did by reacting below
dependent-tan
dependent-tan15mo ago
Hello @soto76 you can check this example: https://refine.dev/docs/examples/upload/mui/base64/
Base64 Upload | refine
In this example, you'll learn how to do base64 upload in refine with React Hook Form. For more information, you can view the live example or review the source code.
ambitious-aqua
ambitious-aquaOP15mo ago
Thanks @batuhanw !