# new Attachment(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myAttachment = document.createElement("a-attachment").init(config)Or use the shorthand for it:
const myAttachment = createAttachment({
label: "My uploaded files",
multiple: true
})
myAttachment.render()Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "attachment",
label: "My uploaded files",
multiple: true
}
]
})
myPanel.render()Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
label |
string
|
<optional> |
|
buttonText |
string
|
<optional> |
Text of the upload button. Defaults to "attach files" |
value |
Array.<object>
|
<optional> |
Default value |
layout |
string
|
<optional> |
"" (default) | "thumbnails" | "thumbnails-large" |
allowLayout |
boolean
|
<optional> |
true (default) to display the buttons to change the layout |
multiple |
boolean
|
<optional> |
TODO: true to enable multi-select |
readOnly |
boolean
|
<optional> |
|
disabled |
boolean
|
<optional> |
TODO |
required |
boolean
|
<optional> |
TODO |
margin |
string
|
<optional> |
|
padding |
string
|
<optional> |
|
labelFontSize |
string
|
<optional> |
Any valid CSS value |
labelFontWeight |
string
|
<optional> |
Any valid CSS value |
labelColor |
string
|
<optional> |
Any valid CSS value |
ACL |
string
|
<optional> |
The access control list for the uploaded files. "private" or "public". Defaults to "private" |
maxSize |
number
|
<optional> |
The maximum size of the file to upload, in bytes. Defaults to 0 (no limit). |
record |
object
|
<optional> |
The record to bind the field to. This will automatically update the record when the field value changes, and the field will listen to database changes on the record. |
this
Generated markup
The field is a composition of various elements:
- a span for the field label
- a span for the button to upload new files, which includes a span for the button icon
- a div to display the gallery of thumbnails
<a-attachment class="a-attachment">
<span class="field-label"></span>
<span class="a-button attachment-button field-upload-button">
<span class="fas fa-paperclip attachment-icon"></span> Attach files
</span>
<div class="field-attachment-gallery">
</div>
</a-attachment>Methods
# renderAs(mode)
Render the attachments in different modes:
- list
- thumbnails
- large thumbnails
Parameters:
| Name | Type | Description |
|---|---|---|
mode |
string
|
"list" | "thumbnails" | "thumbnails-large" |
# setValue(newValues, rawUpdateopt)
Set the field value
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
newValues |
Array.<object>
|
The new field value |
|
rawUpdate |
boolean
|
<optional> |
If true, it doesn't update the associated record and doesn't trigger "change" event |
this
# showUploadWindow(configopt)
Display the upload window of the attachment field
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
<optional> |
Configuration object |
ACL |
string
|
<optional> |
The access control list for the uploaded files. "private" or "public". Defaults to "private" |
maxSize |
number
|
<optional> |
The maximum size of the file to upload, in bytes. Defaults to 0 (no limit) |
# validate() → {boolean}
Validate the field (always true because Attachment fields can't have wrong values)
boolean