Refine•3y 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>

   <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>

kapa.ai•9/14/23, 8:01 AM

Hi @tads8799. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•9/14/23, 8:02 AM

----------------------
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:

The form uses the
```
onFinish
```
```
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 file2Base64file2Base64 function, and stores them in the base64Filesbase64Files array.
The UploadUpload component from Ant Design is used to handle the file upload. The actionaction prop is set to the URL where the file will be uploaded. The beforeUploadbeforeUpload prop is a function that is called before the upload request is sent to the server. The
```
onChange
```
```
onChange
```
prop is a function that is called when the file status changes.
The UploadUpload component displays an image if one is available (imageUrlimageUrl), otherwise, it displays an upload button (uploadButtonuploadButton).

Please note that the file2Base64file2Base64, beforeUploadbeforeUpload,

onChange

onChange

, uploadButtonuploadButton, and apiUrlapiUrl 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

----------------------

kapa.ai•9/14/23, 8:02 AM

@577213996344803338 kapa.ai is still learning and improving, please let us know how it did by reacting below

then-purpleOP•9/14/23, 8:04 AM

Action in Upload Antd Prop do not include Authorization header
@kapa.ai

kapa.ai•9/14/23, 8:04 AM

Let me check the knowledge base for you. One moment!

kapa.ai•9/14/23, 8:04 AM

----------------------
The UploadUpload component from Ant Design allows you to specify an actionaction 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 headersheaders 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_KEYTOKEN_KEY is the key where the token is stored in localStorage. You would need to replace TOKEN_KEYTOKEN_KEY and API_URLAPI_URL with the actual values based on your application's requirements.

For more information on the UploadUpload 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

----------------------

kapa.ai•9/14/23, 8:04 AM

@577213996344803338 kapa.ai is still learning and improving, please let us know how it did by reacting below

then-purpleOP•9/14/23, 8:57 AM

 <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•9/14/23, 8:57 AM

Let me check the knowledge base for you. One moment!

kapa.ai•9/14/23, 8:57 AM

----------------------
The UploadUpload 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

onChange

function of the UploadUpload 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, getBase64getBase64 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

----------------------

kapa.ai•9/14/23, 8:57 AM

@577213996344803338 kapa.ai is still learning and improving, please let us know how it did by reacting below