• Documentation >
• Extend Back Office >
• Multi-file upload

Multi-file upload

You can use the multi-file upload module in the editorial interface of Ibexa DXP. 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(eZ.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