# Attachment

### Introduction

{% hint style="info" %}
**Version compatibility**

This feature was introduced in version **4.72.0** of the JourneyApps Runtime.
{% endhint %}

The Attachment API can be used in JavaScript/TypeScript (or [CloudCode](https://docs.journeyapps.com/reference/cloudcode/attachments-in-cloudcode)) to populate [`attachment`](https://docs.journeyapps.com/reference/data-model-configuration/model/field#file-attachment-attachment), [`photo`](https://docs.journeyapps.com/reference/data-model-configuration/model/field#photo-photo) or [`signature`](https://docs.journeyapps.com/reference/data-model-configuration/model/field#signature-signature) fields that can bound to components like [`capture-file`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/capture-file), [`capture-photo`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/capture-photo), [`capture-signature`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/capture-signature), [`display-file`](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/display-file) etc.

### Syntax

To create an attachment, use the  `Attachment.create(options)` function where `options` may include

| Value       | Details                                                          |
| ----------- | ---------------------------------------------------------------- |
| `data`      | Data to create from an `ArrayBuffer`                             |
| `base64`    | Data to create from a `base64` string                            |
| `text`      | Data to create from a `string`                                   |
| `mediaType` | The MIME type of the file, e.g. `image/png` or `application/pdf` |
| `filename`  | Name of the file to be created.                                  |

You need to provide one of `data`, `base64` or `text`, depending on the type of data you have.\
\
You also need to provide either `mediaType` or `filename`, or both. If only one is provided, the other will be automatically assumed. For example:

* if only the `filename` is given as `test.txt`, the `mediaType` will be assumed as `text/plain`.
* If only the `mediaType` is given as `text/csv`, the filename will be the ID of the object, e.g. `334c3c80-afed-4641-b083-9d1871705a6b.csv`.

### Example

Consider a variable like the following:

{% code title="main.view\.xml" %}

```xml
<var name="sample_pdf" type="attachment" media="application/pdf" />
```

{% endcode %}

That PDF can be created like this:

{% code title="main.js" %}

```javascript
view.sample_pdf = Attachment.create({base64: "base64 data", mediaType: 'application/pdf', filename: "my_report.pdf"});
```

{% endcode %}

Other examples:

{% code title="main.js" %}

```javascript
view.textFile = Attachment.create({text: plainText, mediaType: 'text/plain', filename: 'test.txt'});
view.userSignature = Attachment.create({text: svgString, mediaType: 'image/svg+xml'});
view.myImage = Attachment.create({data: imageArrayBuffer, mediaType: 'image/jpeg'});
```

{% endcode %}