multifile_upload.md

description
Configure multi-file upload functionality which allows uploading files in bulk.

Multi-file upload

You can use the multi-file upload module in the editorial interface of [[= product_name =]]. It provides an interface to publish content based on dropped files while uploading them in the interface.

!!! caution

If you want to load the multi-file upload module, you need to load the JS code for it in your view,
as it is not available by default.

Use multi-file upload

With JS only:

React.createElement(ibexa.modules.MultiFileUpload, {
    onAfterUpload: {Function},
    adminUiConfig: {
        multiFileUpload: {
            defaultMappings: [{
                contentTypeIdentifier: {String},
                contentFieldIdentifier: {String},
                contentNameIdentifier: {String},
                mimeTypes: [{String}, {String}, ...]
            }],
            fallbackContentType: {
                contentTypeIdentifier: {String},
                contentFieldIdentifier: {String},
                contentNameIdentifier: {String}
            },
            locationMappings: [{Object}],
            maxFileSize: {Number}
        },
        token: {String},
        siteaccess: {String}
    },
    parentInfo: {
        contentTypeIdentifier: {String},
        contentTypeId: {Number},
        locationPath: {String},
        language: {String}
    }
});

With JSX:

const attrs = {
    onAfterUpload: {Function},
    adminUiConfig: {
        multiFileUpload: {
            defaultMappings: [{
                contentTypeIdentifier: {String},
                contentFieldIdentifier: {String},
                contentNameIdentifier: {String},
                mimeTypes: [{String}, {String}, ...]
            }],
            fallbackContentType: {
                contentTypeIdentifier: {String},
                contentFieldIdentifier: {String},
                contentNameIdentifier: {String}
            },
            locationMappings: [{Object}],
            maxFileSize: {Number}
        },
        token: {String},
        siteaccess: {String}
    },
    parentInfo: {
        contentTypeIdentifier: {String},
        contentTypeId: {Number},
        locationPath: {String},
        language: {String}
    }
};

<MultiFileUploadModule {...attrs}/>

Properties list

The <MultiFileUpload /> module can handle additional properties. There are two types of properties: required and optional.

Required properties

All of the following properties must be used, otherwise the multi-file upload does not work.

• onAfterUpload {Function} - a callback to be invoked immediately after a file has been uploaded
• adminUiConfig {Object} - UI config object. It should keep the following structure:
  • multiFileUpload {Object} - multi file upload module config:
    • defaultMappings {Array} - a list of file type to content type mappings Sample mapping be an object and should follow the convention:
      • contentTypeIdentifier {String} - content type identifier
      • contentFieldIdentifier {String} - Field identifier
      • nameFieldIdentifier {String} - name Field identifier
      • mimeTypes {Array} - a list of file types assigned to a specific content type
    • fallbackContentType {Object} - a fallback content type definition. Should contain the following info:
      • contentTypeIdentifier {String} - content type identifier
      • contentFieldIdentifier {String} - Field identifier
      • nameFieldIdentifier {String} - name Field identifier
    • locationMappings {Array} - list of file type to content type mappings based on a Location identifier
    • maxFileSize {Number} - maximum file size allowed for uploading. It's a number of bytes
  • token {String} - CSRF token
  • siteaccess {String} - SiteAccess identifier
• parentInfo {Object} - parent Location meta information:
  • contentTypeIdentifier {String} - content type identifier
  • contentTypeId {Number} - content type ID
  • locationPath {String} - Location path string
  • language {String} - language code identifier

Optional properties

Optionally, the multi-file upload module can take a following list of properties:

• checkCanUpload {Function} - checks whether am uploaded file can be uploaded. The callback takes four params:
  • file {File} - file object
  • parentInfo {Object} - parent Location meta information
  • config {Object} - Multi-file Upload module config
  • callbacks {Object} - error callbacks list: fileTypeNotAllowedCallback and fileSizeNotAllowedCallback
• createFileStruct {Function} - a function that creates a ContentCreate struct. The function takes two params:
  • file {File} - file object
  • params {Object} - params hash containing: parentInfo and adminUiConfig stored under the config key
• deleteFile {Function} - a function deleting content created from a given file. It takes three params:
  • systemInfo {Object} - hash containing information about CSRF token and SiteAccess: token and siteaccess
  • struct {Object} - Content struct
  • callback {Function} - content deleted callback
• onPopupClose {Function} - function invoked when closing a Multi-file Upload popup. It takes one param: itemsUploaded - the list of uploaded items
• publishFile {Function} - publishes an uploaded file-based content item. Takes three params:
  • data {Object} - an object containing information about:
    • struct {Object} - the ContentCreate struct ()
    • token {String} - CSRF token
    • siteaccess {String} - SiteAccess identifier
  • requestEventHandlers {Object} - a list of upload event handlers:
    • onloadstart {Function} - on load start callback
    • upload {Object} - file upload events:
      • onabort {Function} - on abort callback
      • onload {Function} - on load callback
      • onprogress {Function} - on progress callback
      • ontimeout {Function} - on timeout callback
  • callback {Function} - a callback invoked when an uploaded file-based content has been published