Skip to main content

Uploads

Any upload field#

The AnyUploadField component renders a file upload field for uploading any file.

<AnyUploadField field="file" urlField="file.url" />

Props#

PropDescription

urlField

string

The name of the column in Contember schema where to store file url.

Required

label

ReactNode

The label for the field.

Required

description

ReactNode

The description for the field.

fileNameField

undefined | string

The name of the column in Contember schema where to store file name.

fileSizeField

undefined | string

The name of the column in Contember schema where to store file size.

fileTypeField

undefined | string

The name of the column in Contember schema where to store file type.

enableAddingNew

undefined | boolean = true

If true, the field allows adding new options.

acceptFile

undefined | ((options: AcceptFileOptions) => boolean | Promise)

A function that is called to check if the file is accepted.

acceptMimeTypes

undefined | string | string[]

Accepted mime types.

Audio upload field#

The AudioUploadField component renders a file upload field for uploading audio files.

<AudioUploadField urlField="" label="" />

Props#

PropDescription

urlField

string

The name of the column in Contember schema where to store file url.

Required

label

ReactNode

The label for the field.

Required

description

ReactNode

The description for the field.

fileNameField

undefined | string

The name of the column in Contember schema where to store file name.

fileSizeField

undefined | string

The name of the column in Contember schema where to store file size.

fileTypeField

undefined | string

The name of the column in Contember schema where to store file type.

enableAddingNew

undefined | boolean = true

If true, the field allows adding new options.

acceptFile

undefined | ((options: AcceptFileOptions) => boolean | Promise)

A function that is called to check if the file is accepted.

acceptMimeTypes

undefined | string | string[]

Accepted mime types.

Image upload field#

The ImageUploadField component renders a file upload field for uploading image files.

<ImageUploadField urlField="" label="" />

Props#

PropDescription

urlField

string

The name of the column in Contember schema where to store file url.

Required

label

ReactNode

The label for the field.

Required

description

ReactNode

The description for the field.

fileNameField

undefined | string

The name of the column in Contember schema where to store file name.

fileSizeField

undefined | string

The name of the column in Contember schema where to store file size.

fileTypeField

undefined | string

The name of the column in Contember schema where to store file type.

heightField

undefined | string

The name of the column in Contember schema where to store height.

widthField

undefined | string

The name of the column in Contember schema where to store width.

enableAddingNew

undefined | boolean = true

If true, the field allows adding new options.

acceptFile

undefined | ((options: AcceptFileOptions) => boolean | Promise)

A function that is called to check if the file is accepted.

acceptMimeTypes

undefined | string | string[]

Accepted mime types.

renderFilePreview

(options: RenderFilePreviewOptions) => ReactNode

Renders the file preview.

Video upload field#

The VideoUploadField component renders a file upload field for uploading video files.

<VideoUploadField urlField="" label="" />

Props#

PropDescription

urlField

string

The name of the column in Contember schema where to store file url.

Required

label

ReactNode

The label for the field.

Required

description

ReactNode

The description for the field.

fileNameField

undefined | string

The name of the column in Contember schema where to store file name.

fileSizeField

undefined | string

The name of the column in Contember schema where to store file size.

fileTypeField

undefined | string

The name of the column in Contember schema where to store file type.

heightField

undefined | string

The name of the column in Contember schema where to store height.

widthField

undefined | string

The name of the column in Contember schema where to store width.

enableAddingNew

undefined | boolean = true

If true, the field allows adding new options.

acceptFile

undefined | ((options: AcceptFileOptions) => boolean | Promise)

A function that is called to check if the file is accepted.

acceptMimeTypes

undefined | string | string[]

Accepted mime types.

Any file repeater#

The AnyFileRepeater component renders a repeater field for uploading any file.

<AnyFileRepeater field="" label="" urlField="" />

Audio file repeater#

The AudioFileRepeater component renders a file repeater field for uploading audio files.

<ImageFileRepeater
field="songs"
urlField="song.url"
label="Album"
sortableBy="order"
/>

Props#

PropDescription

field

string

The name of the column in Contember schema where to store data.

Required

urlField

string

The name of the column in Contember schema where to store file url.

Required

label

ReactNode

The label for the field.

Required

sortableBy

undefined | string

The name of the column in Contember schema that is used to sort the options.

orderBy

undefined | string

The name of the column in Contember schema that is used to order the options.

description

ReactNode

The description for the field.

fileNameField

undefined | string

The name of the column in Contember schema where to store file name.

fileSizeField

undefined | string

The name of the column in Contember schema where to store file size.

fileTypeField

undefined | string

The name of the column in Contember schema where to store file type.

heightField

undefined | string

The name of the column in Contember schema where to store height.

widthField

undefined | string

The name of the column in Contember schema where to store width.

enableAddingNew

undefined | boolean = true

If true, the field allows adding new options.

acceptFile

undefined | ((options: AcceptFileOptions) => boolean | Promise)

A function that is called to check if the file is accepted.

acceptMimeTypes

undefined | string | string[]

Accepted mime types.

Image file repeater#

The ImageFileRepeater component renders a file repeater for uploading image files.

<ImageFileRepeater
field="images"
urlField="image.url"
label="Gallery"
sortableBy="order"
/>

Props#

PropDescription

field

string

The name of the column in Contember schema where to store data.

Required

urlField

string

The name of the column in Contember schema where to store file url.

Required

label

ReactNode

The label for the field.

Required

sortableBy

undefined | string

The name of the column in Contember schema that is used to sort the options.

orderBy

undefined | string

The name of the column in Contember schema that is used to order the options.

description

ReactNode

The description for the field.

fileNameField

undefined | string

The name of the column in Contember schema where to store file name.

fileSizeField

undefined | string

The name of the column in Contember schema where to store file size.

fileTypeField

undefined | string

The name of the column in Contember schema where to store file type.

heightField

undefined | string

The name of the column in Contember schema where to store height.

widthField

undefined | string

The name of the column in Contember schema where to store width.

enableAddingNew

undefined | boolean = true

If true, the field allows adding new options.

acceptFile

undefined | ((options: AcceptFileOptions) => boolean | Promise)

A function that is called to check if the file is accepted.

acceptMimeTypes

undefined | string | string[]

Accepted mime types.

Video file repeater#

The VideoFileRepeater component renders a file repeater for uploading video files.

<ImageFileRepeater
field="videos"
urlField="video.url"
label="Video serie"
sortableBy="order"
/>

Props#

PropDescription

field

string

The name of the column in Contember schema where to store data.

Required

urlField

string

The name of the column in Contember schema where to store file url.

Required

label

ReactNode

The label for the field.

Required

sortableBy

undefined | string

The name of the column in Contember schema that is used to sort the options.

orderBy

undefined | string

The name of the column in Contember schema that is used to order the options.

description

ReactNode

The description for the field.

fileNameField

undefined | string

The name of the column in Contember schema where to store file name.

fileSizeField

undefined | string

The name of the column in Contember schema where to store file size.

fileTypeField

undefined | string

The name of the column in Contember schema where to store file type.

enableAddingNew

undefined | boolean = true

If true, the field allows adding new options.

acceptFile

undefined | ((options: AcceptFileOptions) => boolean | Promise)

A function that is called to check if the file is accepted.

acceptMimeTypes

undefined | string | string[]

Accepted mime types.