# Media Attachment Component

The Media Attachment Component allows users to add media and files to a post when creating or editing it in the [AmityPostComposerPage](https://app.gitbook.com/o/-LC7aYJfVrBgEkQp-YT8/s/-MX0mOAVWkotGme0iRzu/~/changes/3277/amity-uikit/uikit-v4-beta/social/post-composer-page).

<figure><img src="https://2352509137-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MX0mOAVWkotGme0iRzu%2Fuploads%2Ffux4enXGvkemHLESTLoU%2FScreenshot%202024-07-17%20at%206.36.24%E2%80%AFPM.png?alt=media&#x26;token=830aeda5-715b-4077-847f-4788e78356e8" alt=""><figcaption></figcaption></figure>

### Feature

<table data-header-hidden><thead><tr><th width="347">Feature</th><th>Description</th></tr></thead><tbody><tr><td>Feature</td><td>Description</td></tr><tr><td>Attach media and files</td><td>User can use this component to attach media and files to a post.</td></tr></tbody></table>

### Customization

This component allows user to fully customize on these items.

<table><thead><tr><th width="213">Config ID</th><th width="110">Type</th><th>Description</th></tr></thead><tbody><tr><td>post_composer_page/media_attachment/*</td><td>Theme</td><td>User can change component theme.</td></tr><tr><td>post_composer_page/media_attachment/camera_button</td><td>Elemet</td><td>User can change camera button icon.</td></tr><tr><td>post_composer_page/media_attachment/image_button</td><td>Element</td><td>User can change photo button icon.</td></tr><tr><td>post_composer_page/media_attachment/video_button</td><td>Element</td><td>User can change vide button icon.</td></tr><tr><td>post_composer_page/media_attachment/file_button</td><td>Element</td><td>User can change attachment button icon.</td></tr></tbody></table>

For more details on customization, please refer to the [Customization](https://docs.social.plus/social-plus-uikit/uikit-4/customization) page.

### Usage <a href="#usage" id="usage"></a>

The Media Attachment Component can be used in this way if the user wants to use it separately.

{% tabs %}
{% tab title="iOS" %}
{% embed url="<https://gist.github.com/amythee/007d98fe1597992d72d8e3267ebf8f79>" %}
{% endtab %}

{% tab title="Android" %}
{% embed url="<https://gist.github.com/8b6de2187d33eb49dcefba27fadd2bfe>" %}
{% endtab %}

{% tab title="Web" %}
{% embed url="<https://gist.github.com/amythee/5a57526f43bc41e0113b7ff026843851>" %}

{% endtab %}

{% tab title="React Native" %}
{% embed url="<https://gist.github.com/amythee/60de42520b795efd3bd1ec26672e27c4>" %}
{% endtab %}

{% tab title="Flutter" %}
{% embed url="<https://gist.github.com/amythee/55e7c72e274b93e3680320013e0ad4ef>" %}
{% endtab %}
{% endtabs %}