File Upload Form Control

👉 Upload files API should return array of objects as shown below.

// Upload file should return this type of response.
[{
    "originalName": "photo1.jpeg",
    "uploadPath": "/dev/profiles"
}, {
    "originalName": "photo2.jpeg",
    "uploadPath": "/dev/profiles"
}];

👉 Download file API should return base64 of file. This API will also be used for file preview.
👉 Remove file API should remove file from storage. It will receive below type of object.

// Remove file request payload.
{
    "originalName": "photo1.jpeg",
    "uploadPath": "/dev/profiles"
}

Example

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [
            [{
                label: 'Profile Photo',
                control: T.EDBMasterFormControl.file_upload,
                path: 'profile_photo',
                fileUploadSettings: {
                    // :userPath = it will be replaced with admin user path by master page automatically.
                    // :beHostPort = it will be replaced with API Maker backend's protocol and host and port automatically. ex : https://example.com
                    uploadApiUrl: ':beHostPort/api/custom-api/:userPath/upload-file-test?category=profile_photo',
                    downloadApiUrl: ':beHostPort/api/custom-api/:userPath/download-file-test?category=profile_photo',
                    removeApiUrl: ':beHostPort/api/custom-api/:userPath/remove-file-test?category=profile_photo',
                    multiple: true,

                    fileLimit: 3,
                }
            }]
        ]
    }
};

Interface Documentation

export interface IDBMasterConfigFormField {
    /** It is used to find element. */
    hiddenId?: string;
    label?: string;

    /** This text will be displayed under control in small. HTML supported. */
    helpText?: string;

    path?: string;
    control: EDBMasterFormControl;

    /** if true, that control will take focus automatically. */
    autofocus?: boolean;

    /** if true, control will be disabled. If string provides, it will evaluate that string and enable/disable based on that. */
    disabled?: boolean | string;

    /** if true or undefined, control will be visible. If string provides, it will evaluate that string and make it visible/invisible based on that. */
    visible?: boolean | string;

    validations?: Pick<IPropertyValidation, 'required'>;
    validationErrors?: {
        required?: string;
    };

    fileUploadSettings?: {
        /** Give style object in angular style. */
        style?: any;

        /** custom CSS class to assign to control */
        cssClass?: string,

        /** Default : false, When enabled, upload begins automatically after selection is completed. */
        auto?: boolean;

        /**
         * API URL which will be used to upload files.<br/>
         * API should return array of objects in below format.<br/>
         * You can have other properties and below properties are required.
         * [{
         *     originalName: string,
         *     uploadPath: string,
         * }]
         * API Maker's custom API will accept files in "files" form data field.
         *
         * */
        uploadApiUrl: string;
        /** API URL which returns content of file in base64 format. */
        downloadApiUrl?: string;
        removeApiUrl?: string;

        /** Allow to select multiple files or not */
        multiple?: boolean;

        /** ex : image/* */
        accept?: string;

        /** Maximum file size allowed in bytes. Default : 10000000 (10MB) */
        maxFileSize?: number;

        /** Maximum number of files that can be uploaded. */
        fileLimit?: number;

        /** Internal use property to show/hide upload button on UI control. */
        _showUploadButton?: boolean;

        /** internal use only */
        _fileSelectEvent?: any;
    };

}


export interface IPropertyValidation {
    required?: boolean; // Allowed Types : *
    min?: number; // Allowed Types : number | date
    max?: number; // Allowed Types : number | date
    minLength?: number; // Allowed Types : string
    maxLength?: number; // Allowed Types : string
    unique?: boolean;
    email?: boolean; // Allowed Types : string
    validatorFun?: Function;
}


export enum EDBMasterFileUploadAppendTo {
    visible = 'visible',
    disabled = 'disabled',
}


export enum EDBMasterFormControl {
    input = 'input',
    inputNumber = 'inputNumber',
    inputMask = 'inputMask',
    inputOtp = 'inputOtp',
    password = 'password',
    date_picker = 'date_picker',
    textarea = 'textarea',
    checkbox = 'checkbox',
    radio = 'radio',
    color_picker = 'color_picker',
    dropdown = 'dropdown',
    file_upload = 'file_upload',
    grid = 'grid',
    divider = 'divider',

    // Field holder controls
    accordion = 'accordion',
    tab_view = 'tab_view',

    // utility controls
    button = 'button',
    image = 'image',
    customHTML = 'customHTML',
}