like-gold
like-gold11mo ago

Action in Upload Antd Prop do not include Authorization header

<Form {...formProps} layout="vertical"
onFinish={async (values) => {
const base64Files = [];
// @ts-ignore
const { avatar } = values;

for (const file of avatar) {
if (file.originFileObj) {
const base64String = await file2Base64(file);

base64Files.push({
...file,
base64String,
});
} else {
base64Files.push(file);
}
}

return (
formProps.onFinish &&
formProps.onFinish({
...values,
avatar: base64Files,
})
);
}}
>
<Form.Item label="Avatar">
<Form.Item
name="avatar"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
rules={[
{
required: true,
},
]}
>
<Upload
name="avatar"
listType="picture-circle"
className="avatar-uploader"
showUploadList={false}
action={`${apiUrl}/admin/upload`}
beforeUpload={beforeUpload}
onChange={onChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>
</Form.Item>
<Form {...formProps} layout="vertical"
onFinish={async (values) => {
const base64Files = [];
// @ts-ignore
const { avatar } = values;

for (const file of avatar) {
if (file.originFileObj) {
const base64String = await file2Base64(file);

base64Files.push({
...file,
base64String,
});
} else {
base64Files.push(file);
}
}

return (
formProps.onFinish &&
formProps.onFinish({
...values,
avatar: base64Files,
})
);
}}
>
<Form.Item label="Avatar">
<Form.Item
name="avatar"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
rules={[
{
required: true,
},
]}
>
<Upload
name="avatar"
listType="picture-circle"
className="avatar-uploader"
showUploadList={false}
action={`${apiUrl}/admin/upload`}
beforeUpload={beforeUpload}
onChange={onChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>
</Form.Item>
8 Replies
kapa.ai
kapa.ai11mo ago
Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The code you provided is a part of a form in a React component using the Refine framework. This form is designed to handle file uploads, specifically images, and convert them to Base64 format. Here's a breakdown of what the code does: 1. The form uses the onFinish prop to handle the form submission. When the form is submitted, it takes the uploaded files (in this case, an avatar image), converts them to Base64 format using the file2Base64 function, and stores them in the base64Files array. 2. The Upload component from Ant Design is used to handle the file upload. The action prop is set to the URL where the file will be uploaded. The beforeUpload prop is a function that is called before the upload request is sent to the server. The onChange prop is a function that is called when the file status changes. 3. The Upload component displays an image if one is available (imageUrl), otherwise, it displays an upload button (uploadButton). Please note that the file2Base64, beforeUpload, onChange, uploadButton, and apiUrl are not defined in the provided code. You would need to implement these based on your application's requirements. For more information on handling file uploads in Refine, you can refer to the Refine documentation on file uploads (https://refine.dev/docs/advanced-tutorials/upload/base64-upload/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-gold
like-gold11mo ago
Action in Upload Antd Prop do not include Authorization header @kapa.ai
kapa.ai
kapa.ai11mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The Upload component from Ant Design allows you to specify an action prop which is the URL where the file will be uploaded. If you need to include an Authorization header in your upload request, you can use the headers prop. Here's an example of how you can include an Authorization header:
<Upload
name="avatar"
listType="picture-circle"
className="avatar-uploader"
showUploadList={false}
action={`${API_URL}/admin/upload`}
headers={{
Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
}}
beforeUpload={beforeUpload}
onChange={onChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>
<Upload
name="avatar"
listType="picture-circle"
className="avatar-uploader"
showUploadList={false}
action={`${API_URL}/admin/upload`}
headers={{
Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
}}
beforeUpload={beforeUpload}
onChange={onChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>
In this example, TOKEN_KEY is the key where the token is stored in localStorage. You would need to replace TOKEN_KEY and API_URL with the actual values based on your application's requirements. For more information on the Upload component, you can refer to the Ant Design documentation (https://ant.design/components/upload/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below
like-gold
like-gold11mo ago
<Form.Item
name="avatar"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
rules={[
{
required: true,
},
]}
>
<Upload
listType="picture-circle"
className="avatar-uploader"
showUploadList={false}
action={`${apiUrl}/admin/upload`}
beforeUpload={beforeUpload}
onChange={handleChange}
headers={{
Authorization: `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(TOKEN_KEY)}`,
}}
>
{imageUrl ? <Avatar src={imageUrl} alt="avatar" style={{ height: '100%', width: 'auto', borderRadius: "100%" }} /> : uploadButton}
</Upload>
</Form.Item>
<Form.Item
name="avatar"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
rules={[
{
required: true,
},
]}
>
<Upload
listType="picture-circle"
className="avatar-uploader"
showUploadList={false}
action={`${apiUrl}/admin/upload`}
beforeUpload={beforeUpload}
onChange={handleChange}
headers={{
Authorization: `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(TOKEN_KEY)}`,
}}
>
{imageUrl ? <Avatar src={imageUrl} alt="avatar" style={{ height: '100%', width: 'auto', borderRadius: "100%" }} /> : uploadButton}
</Upload>
</Form.Item>
send an url when submmiting the form after get the url from Upload action instead of the whole image object @kapa.ai
kapa.ai
kapa.ai11mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- The Upload component from Ant Design returns a file object when a file is uploaded. If you want to send only the URL of the uploaded file when submitting the form, you can handle this in the onChange function of the Upload component. Here's an example of how you can do this:
const handleChange = (info) => {
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl =>
setFieldsValue({ avatar: imageUrl }),
);
}
};

<Form.Item
name="avatar"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
rules={[
{
required: true,
},
]}
>
<Upload
listType="picture-circle"
className="avatar-uploader"
showUploadList={false}
action={`${apiUrl}/admin/upload`}
beforeUpload={beforeUpload}
onChange={handleChange}
headers={{
Authorization: `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(TOKEN_KEY)}`,
}}
>
{imageUrl ? <Avatar src={imageUrl} alt="avatar" style={{ height: '100%', width: 'auto', borderRadius: "100%" }} /> : uploadButton}
</Upload>
</Form.Item>
const handleChange = (info) => {
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl =>
setFieldsValue({ avatar: imageUrl }),
);
}
};

<Form.Item
name="avatar"
valuePropName="fileList"
getValueFromEvent={getValueFromEvent}
noStyle
rules={[
{
required: true,
},
]}
>
<Upload
listType="picture-circle"
className="avatar-uploader"
showUploadList={false}
action={`${apiUrl}/admin/upload`}
beforeUpload={beforeUpload}
onChange={handleChange}
headers={{
Authorization: `${localStorage.getItem(TOKEN_TYPE)} ${localStorage.getItem(TOKEN_KEY)}`,
}}
>
{imageUrl ? <Avatar src={imageUrl} alt="avatar" style={{ height: '100%', width: 'auto', borderRadius: "100%" }} /> : uploadButton}
</Upload>
</Form.Item>
In this example, getBase64 is a function that converts the uploaded file to a Base64 string. You would need to implement this function based on your application's requirements. For more information on handling file uploads in Refine, you can refer to the Refine documentation on file uploads (https://refine.dev/docs/advanced-tutorials/upload/base64-upload/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai11mo ago
<@577213996344803338> kapa.ai is still learning and improving, please let us know how it did by reacting below