# POST /api/hostedpaymentpages/images/upload

Uploads a banner or product image.

Returns the generated blob filename plus its CDN preview URL.
Accepts multipart/form-data (max 2 MB, max 4000x4000 pixels; gif, jpg, jpeg, png, or webp). The stored
filename is server-generated; place the returned `blobName` in a page's `bannerImage` or
`productImageBlobName`. Invalid uploads return a field-attributed 400 validation error.

**Operation ID:** `hppImageUploadImage`

## Authorization

Requires: HostedPaymentPage.HostedPaymentPages.Update, merchant scope.

Required permissions:
- `HostedPaymentPage.HostedPaymentPages.Update`

## Parameters

| Name | In | Required | Type | Description |
| --- | --- | --- | --- | --- |
| suppressNulls | query | no | boolean | If true, omit properties with null values. |

## Request Body

**Content type:** `multipart/form-data`

Properties:
- `File` (string(binary)): The uploaded image content. The multipart filename is used only to read the claimed extension              for the magic-byte cross-check; it never becomes the stored name. Required: the endpoint rejects a              missing file with a field-attributed validation error.
- `ExtraProperties` (object)

## Responses

### 200

OK

**Content type:** `application/json`

Schema: `HppImageUploadResultDto`

Properties:
- `blobName` (string): The server-generated blob filename (`{guid}.{ext}`). Passes the `HppImageBlobName` validator;  assign it to `bannerImage` or `productImageBlobName` on a page create / update.
- `previewUrl` (string): The resolved CDN URL at which the stored image renders (`{cdn}/hosted-page-imgs/host/{blobName}`).
- `contentType` (string): The image MIME type derived from the verified magic bytes and stored on the blob.
- `width` (integer(int32)): The decoded image width in pixels.
- `height` (integer(int32)): The decoded image height in pixels.
- `sizeBytes` (integer(int64)): The stored byte size of the image.

### 400

Bad Request

**Content type:** `application/json`

Schema: `RemoteServiceErrorResponse`

Properties:
- `error` (RemoteServiceErrorInfo)

### 403

Forbidden

**Content type:** `application/json`

Schema: `RemoteServiceErrorResponse`

Properties:
- `error` (RemoteServiceErrorInfo)

### 401

Unauthorized

**Content type:** `application/json`

Schema: `RemoteServiceErrorResponse`

Properties:
- `error` (RemoteServiceErrorInfo)

### 404

Not Found

**Content type:** `application/json`

Schema: `RemoteServiceErrorResponse`

Properties:
- `error` (RemoteServiceErrorInfo)

### 501

Not Implemented

**Content type:** `application/json`

Schema: `RemoteServiceErrorResponse`

Properties:
- `error` (RemoteServiceErrorInfo)

### 500

Internal Server Error

**Content type:** `application/json`

Schema: `RemoteServiceErrorResponse`

Properties:
- `error` (RemoteServiceErrorInfo)

### default

The request failed. The body carries the standard error envelope: a machine-readable `error.code`, a human-readable `error.message`, and `error.validationErrors` when the failure was a validation rejection. See the error-code reference in this document's description for the values `error.code` can take.

**Content type:** `application/json`

Schema: `RemoteServiceErrorResponse`

Properties:
- `error` (RemoteServiceErrorInfo)

### 429

The request was refused because a rate limit was exceeded, or because something a later retry can clear stopped it. A rate limit refusal carries an `application/problem+json` body: wait at least the interval `Retry-After` names before retrying, then back off. Limits are tuned per deployment, so read the allowance from the response headers rather than assuming a fixed ceiling. Any other refusal carries the standard error envelope as `application/json`, and its `error.code` names the cause.

**Content type:** `application/problem+json`

Schema: `RateLimitProblemDetails`

Properties:
- `type` (string) required: The problem type identifier. Always the same value: the failure is the status code itself,  so there is no sub-type for a caller to branch on.
- `title` (string) required: A short, human-readable summary of the problem type.
- `status` (integer(int32)) required: The HTTP status code, repeated in the body as the problem-details format defines.
- `detail` (string) required: A human-readable explanation of this occurrence of the problem.
- `retryAfterSeconds` (integer(int32)) required: How long to wait before retrying, in whole seconds, carrying the same figure as the  `Retry-After` header. Always at least one: a value of zero would invite an immediate  retry that is certain to be rejected again.

**Content type:** `application/json`

Schema: `RemoteServiceErrorResponse`

Properties:
- `error` (RemoteServiceErrorInfo)

## Example request

Every block below sends the same request. Replace {{BASE_URL}} with the address of the API you are calling and {{API_KEY}} with your own key.

### cURL

```bash
curl -X POST "{{BASE_URL}}/api/hostedpaymentpages/images/upload" \
  -H "api-key: {{API_KEY}}" \
  -F "File=@/path/to/file" \
  -F "ExtraProperties=EXTRA_PROPERTIES"
```

### PowerShell

```powershell
$headers = @{
    'api-key' = '{{API_KEY}}'
}

# -Form requires PowerShell 7. Windows PowerShell 5.1 has no multipart support.
$form = @{
    'File' = Get-Item '/path/to/file'
    'ExtraProperties' = 'EXTRA_PROPERTIES'
}

$response = Invoke-RestMethod -Method POST -Uri '{{BASE_URL}}/api/hostedpaymentpages/images/upload' `
    -Headers $headers -Form $form
```

### TypeScript (SDK)

```bash
npm install @winkpg/winkpg-api
```

```typescript
import { Configuration, HostedPaymentPagesApi } from '@winkpg/winkpg-api';

const api = new HostedPaymentPagesApi(new Configuration({
  basePath: '{{BASE_URL}}',
  apiKey: '{{API_KEY}}',
}));

const { data } = await api.hppImageUploadImage(fileInput.files[0], "EXTRA_PROPERTIES");
```

### TypeScript (raw HTTP)

```typescript
const form = new FormData();
form.append('File', fileInput.files[0]);
form.append('ExtraProperties', 'EXTRA_PROPERTIES');

const response = await fetch('{{BASE_URL}}/api/hostedpaymentpages/images/upload', {
  method: 'POST',
  headers: {
    "api-key": "{{API_KEY}}",
  },
  body: form,
});

const data = await response.json();
```

### C# (SDK)

```bash
dotnet add package WinkPg.Api.Client
```

```csharp
using WinkPg.Api.Client.Api;
using WinkPg.Api.Client.Client;

var config = new Configuration { BasePath = "{{BASE_URL}}" };
config.AddApiKey("api-key", "{{API_KEY}}");

var api = new HostedPaymentPagesApi(config);
var result = await api.HppImageUploadImageAsync(File.OpenRead("/path/to/file"), "EXTRA_PROPERTIES");
```

### C# (raw HTTP)

```csharp
using var http = new HttpClient { BaseAddress = new Uri("{{BASE_URL}}") };

var request = new HttpRequestMessage(new HttpMethod("POST"), "/api/hostedpaymentpages/images/upload");
request.Headers.Add("api-key", "{{API_KEY}}");

var form = new MultipartFormDataContent();
form.Add(new StreamContent(File.OpenRead("/path/to/file")), "File", "file");
form.Add(new StringContent("EXTRA_PROPERTIES"), "ExtraProperties");
request.Content = form;

var response = await http.SendAsync(request);
response.EnsureSuccessStatusCode();
var json = await response.Content.ReadAsStringAsync();
```

### Python (SDK)

```bash
pip install winkpg-api
```

```python
import winkpg_api

configuration = winkpg_api.Configuration(host="{{BASE_URL}}")
configuration.api_key["ApiKey"] = "{{API_KEY}}"

with winkpg_api.ApiClient(configuration) as client:
    api = winkpg_api.HostedPaymentPagesApi(client)
    result = api.hpp_image_upload_image(open("/path/to/file", "rb").read(), "EXTRA_PROPERTIES")
```

### Python (raw HTTP)

```bash
pip install requests
```

```python
import requests

headers = {
    "api-key": "{{API_KEY}}",
}

files = {
    "File": open("/path/to/file", "rb"),
    "ExtraProperties": (None, "EXTRA_PROPERTIES"),
}

response = requests.request(
    "POST",
    "{{BASE_URL}}/api/hostedpaymentpages/images/upload",
    headers=headers,
    files=files,
)
response.raise_for_status()
data = response.json()
```

## See also

- [All documentation](https://devportal-simpay-sbx.winkpg.io/llms.txt): the machine-readable index of every public page on this site.