# SharinPix LWC Custom Upload Button (Developer-Oriented)

## Overview

The **SharinPix Custom Upload Button LWC** is a Lightning Web Component component designed to create a customized button that uploads images to SharinPix from a Salesforce record. It is intended for use as a child component in your own custom Lightning Web Component (the “parent”), where you pass in a button layout (or any UI) via a `<span>` or other HTML wrapper element.

![](/files/AR5OGtOjAozyTyZPcxPl)

{% hint style="warning" %}
**Prerequisites:**

* SharinPix Package **Verison 1.329** is needed to get access to this component. Refer to [this documentation](/faqs/how-to-update-sharinpix-package-from-the-appexchange.md) to update your package.
* Make sure to have the [**SharinPix Lightning Components**](/documentation/access-and-security/sharinpix-permission-sets.md) permission set assigned to be able to use this component.
* Make sure that **Lightning Web Security** is enabled in your org. More details here: [Lightning Web Security FAQ](https://help.salesforce.com/s/articleView?id=000392327\&type=1)
  {% endhint %}

## Getting Started

This component uploads images using a Lightning button, which is fully customizable using the Lightning Design System framework.

### Usage Example (Parent LWC)

Below is a simple **parent LWC** demonstrating how to use the SharinPix Custom Upload Button

#### HTML (Parent LWC)

```html
    <template>
        <div style="display: inline-block;">
            <sharinpix-upload-button-custom-lwc
                record-id={recordId}
                permission-id={permissionId}
                enable-toast={enableToast}
                enable-image-sync={enableImageSync}
                enable-action={enableAction}
                file-extensions={fileExtensions}>
    
                <span class="slds-button slds-button_brand">
                    <lightning-icon size="x-small" icon-name="utility:upload" variant="inverse"></lightning-icon>
                    <span>&nbsp;&nbsp;Custom Upload Photos</span>
                </span>
            </sharinpix-upload-button-custom-lwc>
        </div>
    </template>
```

**Warning:**

You must start the component’s slot content with a `<span>` (rather than a `<button>` or `<a>`) for compatibility reasons.

#### JavaScript (Parent LWC)

```javascript
    import { LightningElement, api } from 'lwc';
    
    export default class UploadButtonCustomParent extends LightningElement {
        @api recordId;
        @api permissionId;
        @api enableToast = false;
        @api enableImageSync = true;
        @api enableAction = false;
        @api fileExtensions; // e.g., '.jpg,.png,.pdf'
    }
```

### Attributes

| Attribute       | Description                                                                | Data Type |
| --------------- | -------------------------------------------------------------------------- | --------- |
| recordId        | Reference to the Salesforce record where images will be uploaded.          | Id        |
| permissionId    | SharinPix Permission record ID or Name to be applied on the component.     | String    |
| enableToast     | If `true`, shows a toast message after uploads complete.                   | Boolean   |
| enableImageSync | Activates the image sync functionality.                                    | Boolean   |
| enableAction    | Activates the Tag Action functionality.                                    | Boolean   |
| fileExtensions  | Restricts the file types that can be uploaded (e.g., `.jpg, .heic, .pdf`). | String    |

{% hint style="success" %}
**Tip:**

For styling references and button design, refer to the [Lightning Design System Buttons](https://www.lightningdesignsystem.com/components/buttons/) documentation.
{% 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-lwc-custom-upload-button-developer-oriented.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.