> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Upload media file

> Upload a media file to create an attachment.

```ts TypeScript wrap theme={"dark"}
import { createSiteClient } from '@fetchski/attract-cms-sdk';

const site = createSiteClient();
const attachment = await site.attachments().uploadAttachment({ file: new File(['…'], 'photo.jpg', { type: 'image/jpeg' }) });
```

```json 200 wrap theme={"dark"}
{
  "_id": "ckj0akbxa003vp39kfbxgb8zg",
  "_url": "https://example.net/uploads/attachments/ckj0akbxa003vp39kfbxgb8zg-blue-box.png",
  "_urls": {
    "key": "Example value"
  },
  "name": "blue-box",
  "title": "blue box",
  "extension": "png",
  "type": "attachment",
  "group": "images",
  "length": 10497,
  "md5": "630eeaaecd0bdc07c4a82eeca4c07588",
  "width": 600,
  "height": 106,
  "landscape": true,
  "portrait": true,
  "docIds": [
    "clx8m2k4p0000a1b2c3d4e5f6"
  ],
  "archivedDocIds": [
    "clx8m2k4p0000a1b2c3d4e5f6"
  ],
  "createdAt": "2026-10-24T09:30:00.000Z",
  "updatedAt": "2026-10-24T09:30:00.000Z",
  "_isCroppable": true,
  "crop": {},
  "used": true,
  "folderId": "clx8m2k4p0000a1b2c3d4e5f6",
  "folderPath": "Example folder path"
}
```

## In your app

A function makes the call on the client it is given, so your code passes the real one and a test passes a fake.

**1. Add the function**

```ts src/attract/upload-attachment.ts theme={"dark"}
import type { SiteClient } from '@fetchski/attract-cms-sdk';

export async function uploadAttachment(site: SiteClient) {
  return site.attachments().uploadAttachment({ file: new File(['…'], 'photo.jpg', { type: 'image/jpeg' }) });
}
```

The other values are the example’s: take yours from the request, a form or your database.

**2. Call it**

A script makes the client once and calls the function:

```ts scripts/upload-attachment.ts theme={"dark"}
import { createSiteClient } from '@fetchski/attract-cms-sdk';
import { uploadAttachment } from '../src/attract/upload-attachment.ts';

const site = createSiteClient();
console.log(await uploadAttachment(site));
```

```bash Terminal theme={"dark"}
node --env-file=.env scripts/upload-attachment.ts
```

A route handler, a job or a queue worker calls it the same way.

The uploaded file can then be used
to create image or file documents. Uses multipart/form-data encoding with the
file uploaded under the name 'file'.

**Signing:** a key whose signing mode covers writes signs this upload by its SHA-256: send the hex digest of the exact body bytes in `X-Fetchski-Content-SHA256` and sign that digest in the body’s place (`<timestamp>.POST.<path+query>.<digest>`). The site checks the signature before it reads the upload, then the bytes against the digest. The SDKs do this for you. [Signing requests](https://docs.fetchski-attract.com/signing.md) shows how, from the API and both SDKs.

> [accordion] Required parameters
>
> One object, e.g. `uploadAttachment({ file })`; leave out the optional fields.
>
> **file** `Blob` *required*
>
> **Required.** The file to upload. Format: a file’s bytes. Pass a `File` named with its extension, e.g. `new File([bytes], 'photo.jpg', { type: 'image/jpeg' })`: the site reads the file’s type from its name, so a bare `Blob` is refused.

> [accordion] Optional parameters
>
> **aposMode** `AposMode | null | undefined`
>
> **Optional.** Leave it out and the site uses `"published"`. `published` (the default) or `draft`. Drafts need a credential that may see them: an API key with the type’s write scope (`content:<type>:write`), or a signed-in editor. The public and a key with only the read scope get 403. One of `draft`, `published`.
>
> **aposLocale** `string | null | undefined`
>
> **Optional.** Leave it out (or pass `null`) and it isn’t sent: the site’s default applies. The locale to read or write, e.g. `en` (default: the site’s default locale).

> [accordion] Returns
>
> An `Attachment`. File attachment information from upload endpoint. Read its properties (`attachment.id`): each says whether the site always sends it. The example answer is the site’s wire JSON: some keys differ from the property names (`_id` → `id`, `_url` → `url`, `_urls` → `urls` …).
>
> **id** `string`
>
> **Always sent.** Unique attachment identifier.
>
> **name** `string`
>
> **Always sent.** Slugified filename.
>
> **title** `string`
>
> **Always sent.** Sortified filename.
>
> **extension** `string`
>
> **Always sent.** File extension.
>
> **type** `string`
>
> **Always sent.** Always `attachment`.
>
> **group** `string`
>
> **Always sent.** File group type.
>
> **length** `number`
>
> **Always sent.** File size in bytes.
>
> **md5** `string`
>
> **Always sent.** MD5 checksum.
>
> **docIds** `readonly string[]`
>
> **Always sent.** IDs of documents using this attachment.
>
> **archivedDocIds** `readonly string[]`
>
> **Always sent.** IDs of archived documents using this attachment.
>
> **createdAt** `Date`
>
> **Always sent.** When it was uploaded (ISO 8601). Format: an ISO 8601 date and time.
>
> **url** `string`
>
> **Sometimes sent:** `undefined` when the site leaves it out. The file’s URL: set for a file that is not an image. An image’s URLs are in `_urls`, by size (`original` is the file as uploaded).
>
> **urls** `Readonly\<Record\<string, string\>\>`
>
> **Sometimes sent:** `undefined` when the site leaves it out. An image’s URLs by size (`original`, `max`, `full`, `two-thirds`, `one-half`, `one-third`, `one-sixth`); unset for other files.
>
> **width** `number`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Image width in pixels (images only)
>
> **height** `number`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Image height in pixels (images only)
>
> **landscape** `boolean`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Whether image is landscape orientation (images only)
>
> **portrait** `boolean`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Whether image is portrait orientation (images only)
>
> **updatedAt** `Date`
>
> **Sometimes sent:** `undefined` when the site leaves it out. When it last changed (ISO 8601). Format: an ISO 8601 date and time.
>
> **isCroppable** `boolean`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Whether the image can be cropped.
>
> **crop** `Readonly\<Record\<string, unknown\>\> | null`
>
> **Sometimes sent:** `undefined` when the site leaves it out, and it can be `null`. The crop applied, if any (`top`, `left`, `width`, `height`).
>
> **used** `boolean`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Whether any document uses the file.
>
> **folderId** `string | null`
>
> **Sometimes sent:** `undefined` when the site leaves it out, and it can be `null`. The media folder holding the file, by its `aposDocId`.
>
> **folderPath** `string`
>
> **Sometimes sent:** `undefined` when the site leaves it out. That folder’s path, e.g. `events/summer`.

> [accordion] Errors
>
> Nothing to catch: the SDK retries what is safe, and throws the rest as the classes below; catch only what you want to react to (see [Errors and testing](https://docs.fetchski-attract.com/typescript/errors.md)).
>
> **ValidationFailed** `400`
>
> The site refused what was sent: `errors` lists each field’s problem, `siteMessage` the first.
>
> **Retried first:** No. **Read:** `errors` (field → messages), `siteMessage`.
>
> **AuthenticationFailed** `401`
>
> The API key is missing or refused (malformed, revoked, expired), or a signature its signing mode needs is missing or stale.
>
> **Retried first:** No. **Read:** `siteMessage`, `errorName`, `data`.
>
> **SiteRequestFailed** `413`
>
> File too large.
>
> **Retried first:** No. **Read:** `reason`, `status`.
>
> **SiteRequestFailed** `415`
>
> Unsupported file type.
>
> **Retried first:** No. **Read:** `reason`, `status`.
>
> **SiteError** `500`
>
> The site failed. Its logs say why.
>
> **Retried first:** No: a write may have landed. **Read:** `siteMessage`, `errorName`, `data`.
>
> **SiteUnreachable** `no answer`
>
> No answer: DNS, a refused connection, TLS, or the timeout (15 s per attempt by default).
>
> **Retried first:** Only when nothing reached the site (`neverConnected()`); never after a timeout, when it may have landed. **Read:** `reason`, `neverConnected`.
>
> **RequestNotSent** `not sent`
>
> The client refused to send it (e.g. a path segment of `..`); the site never saw it.
>
> **Retried first:** No. **Read:** `reason` (what to change).
>
> **SiteRequestFailed** `any other`
>
> Any other status, or a success whose JSON doesn’t match this SDK version’s types (update the SDK).
>
> **Retried first:** No. **Read:** `reason`, `status`.
>
> **UnknownSite** `setup`
>
> `sites.forSite('acme')` named a slug your sites (`createSiteClients()`) don’t have.
>
> **Retried first:** No: nothing was sent. **Read:** `message`, `slug`.
>
> **SiteConfigurationError** `setup`
>
> The client’s settings are wrong: no `FETCHSKI_ATTRACT_URL` (or `baseUrl`), or a malformed API key.
>
> **Retried first:** No: nothing was sent. **Read:** `message` (what to fix).

## Behavior

* **Access:** an API key with any one of `content:images:write`, `content:files:write` or `content:videos:write` (or a master above one). A signed-in person may call it as far as their own permissions allow; anyone else gets 403.
* **Rate limit:** the key’s own writes-per-minute limit, set when the key is created (default 120); over it, 429 with `Retry-After`. The client waits and retries for you; you see `RateLimited` only if that runs out.
* **Retries:** a write is sent again only after a 429 (refused before it acted) or when it never reached the site. After a timeout or a 5xx it may have landed: check before you send it again.
* **Timeout:** 15 s per attempt by default; raise `timeout` (milliseconds) on the client for longer.

## Test it

It calls the function above with a fake client: the fake answers every call with a valid example, so nothing leaves your machine and no settings or key are needed. Run it with `node --test`.

```ts tests/attachments-uploadAttachment.test.ts theme={"dark"}
import { test } from 'node:test';
import { fakeSite } from '@fetchski/attract-cms-sdk/testing';
import { uploadAttachment } from '../src/attract/upload-attachment.ts';

test('attachments.uploadAttachment', async () => {
  const site = fakeSite();
  await uploadAttachment(site);
  site.assertCalled('attachments.uploadAttachment');
});
```

**Answer with your own values:** fake `attachments.uploadAttachment` with `factories.Attachment({...})`, the fields you give over a valid example.

```ts tests/attachments-uploadAttachment-answer.test.ts theme={"dark"}
import assert from 'node:assert/strict';
import { test } from 'node:test';
import { factories, fakeSite } from '@fetchski/attract-cms-sdk/testing';

test('attachments.uploadAttachment answers your values', async () => {
  const site = fakeSite({
    'attachments.uploadAttachment': factories.Attachment({ id: 'Your value' })
  });
  const attachment = await site.attachments().uploadAttachment({ file: new File(['…'], 'photo.jpg', { type: 'image/jpeg' }) });
  assert.equal(attachment.id, 'Your value');
});
```

## Related

> [card] [Crop image attachment](https://docs.fetchski-attract.com/typescript/reference/attachments/crop-attachment.md)
>
> `site.attachments().cropAttachment()`

> [card] [POST /@apostrophecms/attachment/upload](https://docs.fetchski-attract.com/api-reference/attachments/upload-media-file.md)
>
> The endpoint this calls, in the API reference: the HTTP request and answer, and every rule the site checks.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.