Uploads

All upload fields automatically upload files to S3 and save url to given field. If file has more parameters (such as size, type, width, etc.) they will be saved too.

Any file repeater

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

Loading...

Any upload field

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

Component - simple

Loading...

Component - advanced

Loading...

This advanced upload field is a bit more complex than the Simple component. It has a label, a description, a file name, a file size, a file type, a width and a height. It also has a custom accept mime types.

API schema

export class File {
  url = def.stringColumn()
  description = def.stringColumn()
  name = def.stringColumn()
  size = def.stringColumn()
  type = def.stringColumn()
  width = def.intColumn()
  height = def.intColumn()
}

Props

Prop	Description
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 file repeater

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

Component - simple

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

Component - advanced

<ImageFileRepeater
  field="songs"
  urlField="song.url"
  label="Album"
  description="song.description"
  fileSizeField="song.size"
  fileTypeField="song.type"
  sortableBy="order"
>
  <TextField field="song.description" label="Description" />
</ImageFileRepeater>

API schema

export class Album {
  songs = def.oneHasMany(Song, "album");
}

export class Song {
  order = def.intColumn().notNull();
  url = def.stringColumn();
  description = def.stringColumn();
  height = def.stringColumn();
  width = def.stringColumn();
  size = def.stringColumn();
  type = def.stringColumn();
  album = def.manyHasOne(Album, "songs");
}

Props

Prop	Description
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.

Audio upload field

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

Loading...

Props

Prop	Description
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 file repeater

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

Component - simple

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

Component - advanced

<ImageFileRepeater
  field="images"
  urlField="image.url"
  label="Gallery"
  description="image.description"
  heightField="image.height"
  widthField="image.width"
  fileSizeField="image.size"
  fileTypeField="image.type"
  sortableBy="order"
>
  <TextField field="image.description" label="Description" />
  <TextField field="image.alt" label="Alternative text" />
</ImageFileRepeater>

API schema

export class Gallery {
  images = def.oneHasMany(Image, "gallery");
}

export class Image {
  order = def.intColumn().notNull();
  url = def.stringColumn();
  description = def.stringColumn();
  height = def.stringColumn();
  width = def.stringColumn();
  size = def.stringColumn();
  type = def.stringColumn();
  gallery = def.manyHasOne(Gallery, "images");
}

Props

Prop	Description
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 upload field

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

Loading...

Props

Prop	Description
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 file repeater

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

Component - simple

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

Component - advanced

<VideoFileRepeater
  field="videos"
  urlField="video.url"
  label="Video serie"
  description="video.description"
  fileSizeField="video.size"
  fileTypeField="video.type"
  sortableBy="order"
>
  <TextField field="video.description" label="Description" />
</VideoFileRepeater>

API schema

export class VideoSerie {
  videos = def.oneHasMany(Video, "serie");
}

export class Video {
  order = def.intColumn().notNull();
  url = def.stringColumn();
  description = def.stringColumn();
  size = def.stringColumn();
  type = def.stringColumn();
  serie = def.manyHasOne(VideoSerie, "videos");
}

Props

Prop	Description
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.

Video upload field

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

Loading...

Props

Prop	Description
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.