Skip to content

Extending Multi-file Upload

The Multi-file Upload module is meant to be used as a part of editorial interface of eZ Platform. 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.

How to use it?

With vanilla JS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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 2 types of properties: required and optional. All of them are listed below.

Required properties

Without all the following properties the Multi-file Upload will not work.

  • onAfterUpload {Function} - a callback to be invoked just 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 prop:

  • checkCanUpload {Function} - checks whether am uploaded file can be uploaded. The callback takes 4 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 2 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 3 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 3 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.
Read the Docs