Upload media file

import { createSiteClient } from '@fetchski/attract-cms-sdk';

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

{
  "_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"
}

import { createSiteClient } from '@fetchski/attract-cms-sdk';

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

{
  "_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.

Add the function

src/attract/upload-attachment.ts

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.

Call it

A script makes the client once and calls the function:

scripts/upload-attachment.ts

import { createSiteClient } from '@fetchski/attract-cms-sdk';
import { uploadAttachment } from '../src/attract/upload-attachment.ts';

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

Terminal

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 shows how, from the API and both SDKs.

Required parameters

One object, e.g. uploadAttachment({ file }); leave out the optional fields.

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.

Optional parameters

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.

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).

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 …).

string

Always sent. Unique attachment identifier.

string

Always sent. Slugified filename.

string

Always sent. Sortified filename.

string

Always sent. File extension.

string

Always sent. Always attachment.

string

Always sent. File group type.

number

Always sent. File size in bytes.

string

Always sent. MD5 checksum.

readonly string[]

Always sent. IDs of documents using this attachment.

readonly string[]

Always sent. IDs of archived documents using this attachment.

Date

Always sent. When it was uploaded (ISO 8601). Format: an ISO 8601 date and time.

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).

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.

number

Sometimes sent: undefined when the site leaves it out. Image width in pixels (images only)

number

Sometimes sent: undefined when the site leaves it out. Image height in pixels (images only)

boolean

Sometimes sent: undefined when the site leaves it out. Whether image is landscape orientation (images only)

boolean

Sometimes sent: undefined when the site leaves it out. Whether image is portrait orientation (images only)

Date

Sometimes sent: undefined when the site leaves it out. When it last changed (ISO 8601). Format: an ISO 8601 date and time.

boolean

Sometimes sent: undefined when the site leaves it out. Whether the image can be cropped.

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).

boolean

Sometimes sent: undefined when the site leaves it out. Whether any document uses the file.

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.

string

Sometimes sent: undefined when the site leaves it out. That folder’s path, e.g. events/summer.

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).

400

The site refused what was sent: errors lists each field’s problem, siteMessage the first.Retried first: No. Read: errors (field → messages), siteMessage.

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.

413

File too large.Retried first: No. Read: reason, status.

415

Unsupported file type.Retried first: No. Read: reason, status.

500

The site failed. Its logs say why.Retried first: No: a write may have landed. Read: siteMessage, errorName, data.

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.

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).

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.

setup

sites.forSite('acme') named a slug your sites (createSiteClients()) don’t have.Retried first: No: nothing was sent. Read: message, slug.

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.

tests/attachments-uploadAttachment.test.ts

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.

tests/attachments-uploadAttachment-answer.test.ts

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');
});

Crop image attachment

site.attachments().cropAttachment()

POST /@apostrophecms/attachment/upload

The endpoint this calls, in the API reference: the HTTP request and answer, and every rule the site checks.

import { createSiteClient } from '@fetchski/attract-cms-sdk';

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

{
  "_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"
}

Get started

Using the SDK

Going further

Pages & Site

Content

Media

Forms

Ads & Conversions

Analytics

In your app

Behavior

Test it

Crop image attachment

POST /@apostrophecms/attachment/upload

In your app

Behavior

Test it

Related

Crop image attachment

POST /@apostrophecms/attachment/upload