# SharinPix Custom Upload Button

{% hint style="info" %}
This component is only available for developers only. It is not available on the Lightning App Builder. Only available on aura framework.
{% endhint %}

![](/files/kJTdgBhe8PDcyu4A5mNb)

The purpose of this component is to allow image upload from a lightning button which is fully customisable in term user interface using the Lightning Design System framework.

```html
<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes">
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="permissionId" type="String"/>

    <!-- SharinPix Custom Upload Button start -->
    <sharinpix:UploadButtonCustom recordId="{!v.recordId}" permissionId="{!v.permissionId}" enableToast="true" enableImageSync="true" enableAction="true" height="500" refreshView="true" fileExtensions=".jpg,.heic,.pdf">
        <span class="slds-button slds-button_brand">
            <lightning:icon size="x-small" iconName="utility:copy_to_clipboard" variant="inverse"></lightning:icon>
            <span>&nbsp;&nbsp;Upload Photos</span>
        </span>
    </sharinpix:UploadButtonCustom>
    <!-- SharinPix Custom Upload Button end -->
</aura:component>
```

The content of the button needs to start with a \<span> instead of an anchor \<a> or \<button> tag.

| Attribute               | Description                                                                                                         | Data Type              |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| recordId                | Reference the recordId on which the images will be uploaded to                                                      | Salesforce Id          |
| <p>permissionId<br></p> | <p>Record ID or Name of the SharinPix Permission object to be applied on the Custom Upload Button component<br></p> | <p>String<br></p>      |
| enableToast             | A toast will appear on upload completed                                                                             | Boolean                |
| height                  | Height of the SharinPix Album component which displays the upload progression                                       | integer (default: 400) |
| enableImageSync         | Activate image sync functionality                                                                                   | Boolean                |
| enableAction            | Activate Tag action functionality                                                                                   | Boolean                |
| refreshView             | Refresh various component on the lightning record when image sync or tag action has been performed                  | Boolean                |
| fileExtensions          | File extensions that will be accepted only for upload.                                                              | String                 |

{% hint style="warning" %}
Link to LDS: <https://www.lightningdesignsystem.com/components/buttons/>

Note: you need to use a span instead of the link or button version for the component to work.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sharinpix.com/documentation/lightning-web-component/sharinpix-custom-upload-button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.