Uploads

Any upload field

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

Component - simple

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

Component - advanced

<AnyUploadField
  field="file"
  urlField="file.url"
  label="File"
  fileNameField="file.name"
  fileSizeField="file.size"
  fileTypeField="file.type"
  widthField="file.width"
  heightField="file.height"
  acceptMimeTypes={["image/jpeg", "image/png"]}
>
  <TextField field="file.description" label="Description" />
</AnyUploadField>

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

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

Component - simple

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

Component - advanced

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

API schema

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

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

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

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

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

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

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.

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.

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.

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.

Video file repeater

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

Component - simple

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

Component - advanced

<ImageFileRepeater
  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" />
</ImageFileRepeater>

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.