Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

CotDropzone Class

A wrapper class implementing the 3rd party DropzoneJS object.

Constructor

var cdz = new CotDropzone();
Creates a new CotDropzone object.

Property(ies)

dropzone

var dz = cdz.dropzone;

Dropzone object type. After the render method is called, the new Dropzone object is assigned to the dropzone property.

Method(s)

render(options)

var options = {
    url: 'http://maserati.corp.toronto.ca:9097/c3api_upload/upload/apptest/ref'
};

cdz.render(options);

Accepts an object type options argument. The options argument contains properties as defined by DropzoneJS.

The class property defaultOptions is used to fill in missing properties. When a preset is defined (which is defined as "default" in defaultOptions), the preset will also fill in the missing properties.

addFile(file)

var file = { name: 'file.txt', size: 1000, type: 'text/plain' }

var cdz = new CotDropzone();
cdz.render(...);
cdz.addFile(file);

Accepts a Dropzone File type file argument. Calls the current the preset's addFile function property. This is used to add a file correctly into the dropzone object.

addFiles(...files)

var file1 = { name: 'file1.txt', size: 1000, type: 'text/plain' }
var file2 = { name: 'file2.txt', size: 1000, type: 'text/plain' }

var cdz = new CotDropzone();
cdz.render(...);
cdz.addFiles(file1, file2);

Accepts one or more Dropzone File type file argument. Calls the current the preset's addFiles function property. This is used to add multiple files correctly into the dropzone object.

addInitialFile(file)

var file = { name: 'file.txt', size: 1000, type: 'text/plain' }

var cdz = new CotDropzone();
cdz.render(...);
cdz.addInitialFile(file);

Accepts a Dropzone File type file argument. Calls the current the preset's addInitialFile function property. This is used to add an initial file correctly into the dropzone object.

addInitialFiles(...files)

var file1 = { name: 'file1.txt', size: 1000, type: 'text/plain' }
var file2 = { name: 'file2.txt', size: 1000, type: 'text/plain' }

var cdz = new CotDropzone();
cdz.render(...);
cdz.addInitialFiles(file1, file2);

Accepts one or more Dropzone File type file argument. Calls the current the preset's addInitialFiles function property. This is used to add multiple initial files correctly into the dropzone object.

Static Property(ies)

defaultOptions

Object type. Defines the initial option for all new CotDropzone object used by the render method.

Static Method(s)

mergeFunctions(...funcs)

var oldFunction = function() { ... };
var ignore = null;
var newFunction = function() { ... }

oldFunction = CotDropzone.mergeFunctions(oldFunction, ignore, newFunction);

Accepts one or more function type arguments. Function type return value. A helper function used to combine one or more functions into a single function.

When the new function is called, all the argument functions are called in the order they are passed in. Non-function arguments are not called.

This can be used to override existing function without loosing the original function.

Presets

Present are pre-defined dropzone options and custom implementations. Some properties are intended to be overwritten for custom implementation.

Common Preset

Provides common implementations for common dropzone options.

init()

Function type. Dropzone initialiation function. Common preset implementation contains accessibility hooks.

announce(message)

CotDropzone.presets.common.announce('Message to announce');

Function type. Accepts a string type message argument. Announces the message to screen reader.

addFile(file)

Function type. Accepts a Dropzone file type file argument.

addFiles(...files)

Function type. Accepts one or more Dropzone file type file arguments.

addInitialFile(file)

Function type. Accepts a Dropzone file type file argument.

addInitialFiles(...files)

Function type. Accepts one or more Dropzone file type file arguments.

thumbnailDataUris

var wordDocThumbnail = CotDropzone.presets.common.thumbnailDataUris['application']['msword'];

Nested object type. Defines default thumbnail images for common mime types as svg datauris.

Default Preset

Dropzone options used by CotDropzone by default. Some options refers to the common presets options. Any default preset options can be over written by user provided options.

autoQueue

Boolean type. Set to the value of false. Part of DropzoneJS options.

thumbnailHeight

Number type. Set to the value of 48. Part of DropzoneJS options.

thumbnailWidth

Number type. Set to the value of 48. Part of DropzoneJS options.

previewTemplate

String type. Defines the HTML string used for rendering newly added files. Part of DropzoneJS options.

init()

Function type. A merge of CotDropzone.presets.common.init function and a custom function. Custom function adds the description and the top and bottom buttons, attach dropzone event handlers and update the UI on changes. Part of DropzoneJS options.

announce(message)

Function type. The same as CotDropzone.presets.common.announce.

thumbnailDataUris

Nested object type. The same as CotDropzone.presets.common.thumbnailDataUris.

fields

var options = {
    fields: [{
        name: 'field1',
        title: 'Field One',
        prehelptext: 'Pre help text',
        posthelptext: 'Post help text',
        type: 'text',
        required: true,
        validators: {
            regexp: {
                regexp: /^[^<>']*$/
                message: 'Must not contain invalid characters'
            }
        }
    }],

    preset: 'default'
}

var cdz = new CotDropzone();
cdz.render(options);

Array of object type. Set to an empty array. Should be overwritten. Used to configure the fields that will be added to the previewTemplate. Field values will be stored on to the associated Dropsone file object inside the fields property.

The field object can contain the following properties

  • name - String type. The field's name and is used to determine the field's id attribute.
  • id - String type. Same as name.
  • title - String type. The field's label.
  • prehelptext - String type. Help text that appears below the label and above the form field.
  • posthelptext - String type. Help text that appears below the label and below the form field.
  • type - String type. The field type. Valid values are 'text' and 'textarea'
  • required - Boolean type. Uses CotForm's required validation. Only implemented when CotDropzone is used inside a CotForm.
  • validators - Object type. FormValidation.io's validators. Only implemented when CotDropzone is used inside a CotForm.

onFieldChange(file, files)

var cdz = new CotDropzone();
var options = {
    fields: [{ name: 'field1', title: 'Field One', type: 'text' }],

    onFieldChange: function(file, files) {
        console.log('FIELD CHANGED')
    },

    preset: 'default'
};
cdz.render(options);

Function type. Should be overwritten. Is called after the field element triggers the change event and the value is stored inside the dropzone file object.

getFieldsTemplate()

Function type. Returns string type value.

setFieldsTemplate(file, row)

Function type.

getSid()

getNasLink(file)

getLink(file)

setLink(file)

addFile(file)

addFiles(...files)

addInitialFile(file)

addInitialFiles(...files)

valueMapFromFiles(file)

valueMapToFiles(data)

Dropzone Field in Cot Form

var model = new CotModel();

var definition = {
    useBinding: true,

    success: function(event) {
        event.preventDefault();
        alert('SUCCESS');
        return false;
    },

    sections: [{
        rows: [{
            fields: [{
                options: {
                    fields: [{
                        title: 'Text Input',
                        name: 'field01',
                        type: 'text',
                        required: true
                    }, {
                        title: 'Text Input',
                        name: 'field02',
                        type: 'textarea'
                    }],

                    maxFilesize: 10,
                    maxFiles: 20,

                    preset: 'default',

                    url: 'http://maserati.corp.toronto.ca:9097/c3api_upload/upload/apptest/ref',
                },

                id: 'dz',
                bindTo: 'dz',

                title: 'test',
                posthelptext: 'post help text',
                prehelptext: 'pre help text',
                
                type: 'dropzone',
                ignoreUploadError: true,
                allowFormsubmitionWithUploadError: true
            }]
        }]
    }]
};

var cotForm = new CotForm(formDefinition);
cotForm.setModel(model);
cotForm.render({ target: '#targetElement' });
  • No labels