# Image Handling

The use of images as a visual representation of information is crucial in many software applications. Our SDK provides the tools and functionality needed to easily handle images. In this section, we will introduce you to image handling in social.plus, including how to upload and retrieve images in the SDK.

{% hint style="info" %}
Note: The maximum image file size limits are up to 1 GB per post.
{% endhint %}

## Image Data

| Property     | Description                                                                                                                                               |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fileId`     | Identifier for the uploaded file                                                                                                                          |
| `fileUrl`    | The HTTP web URL for the uploaded file. You can use this `fileUrl` for downloading the image file.                                                        |
| `attributes` | <p>Contains a dictionary with values for <code>name</code>, <code>extension</code>, <code>size</code> & <code>mimeType</code></p><p>of uploaded image</p> |
| `metadata`   | Contains additional metadata dictionary related to uploaded image such as `height`, `width`, `isFullImage` etc.                                           |
| altText      | Contains descriptive text which conveys the meaning and context of an image                                                                               |

## Upload Images

To upload an image to the system, you can use the social.plus Image Upload API provided by the SDK. The API allows you to upload an image to the social.plus server/ The SDK simplifies the process of uploading images by providing pre-built components that you can easily integrate into your application. Additionally, you can add alt text to your images to support accessibility, ensuring that your application is more inclusive for all users.

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

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

{% tab title="JavaScript" %}
Supported ✅ (please wait while we prepare a real example!)
{% endtab %}

{% tab title="TypeScript" %}
{% embed url="<https://gist.github.com/amythee/0dbd455fc9463de7e8fc56fe485ed4cd#file-createimage-ts>" %}
{% endtab %}

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

{% hint style="info" %}
Supported image formats are JPG, PNG and cannot exceed 1GB in size.
{% endhint %}

## Retrieve Images

You can retrieve an image from social.plus using the social.plus Image Retrieval API provided by the SDK. The API enables you to retrieve an image from the social.plus server by supplying the image URL. Once an image is uploaded to the server, the image will be automatically transformed into four different sizes for versatile usage. We provided an option to retrieve a specific image size which are:

* **Small**: is used for image thumbnails, with a maximum image size of 160 pixels per dimension. For example, this should be used for small previews in an image gallery that displays a large number of images in a grid.
* **Medium**: is used for standard image display, with a maximum image size of 600 pixels per dimension.
* **Large**: is used for full-screen image display, with a maximum image size of 1500 pixels per dimension.

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

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

{% tab title="JavaScript" %}
Supported ✅ (please wait while we prepare a real example!)
{% endtab %}

{% tab title="TypeScript" %}
{% embed url="<https://gist.github.com/amythee/0353bcbb51a521501e5927587f5cb70e>" %}
{% endtab %}

{% tab title="Flutter" %}
Supported ✅ (please wait while we prepare a real example!)
{% endtab %}
{% endtabs %}

## Update Images Alt text

To enhance accessibility of your images, you can modify the alt text using the Update Image API. This value can be served to screen readers to provide meaningful descriptions of your images to visually impaired users.

Here's how to update an image's alt text:

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

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

{% tab title="TS" %}
{% embed url="<https://gist.github.com/amythee/726b58103cec982e26323d62f3126cf3>" %}
{% endtab %}
{% endtabs %}