media.js

"use strict";
/**
 * This file is part of the Media (Image,Video,Audio) Element for formBuilder.
 * https://github.com/lucasnetau/formBuilder-plugin-media
 *
 * (c) James Lucas <james@lucas.net.au>
 *
 * @license MIT
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 *
 * To disable the default handler for files (convert to dataURI) configure this via controlConfig
 * ```
 * var renderOpts = {
 *    controlConfig: {
 *      'media.image': {
 *         default_change_handler: false
 *       }
 *       //Need to repeat config for media.video and media.image since Formbuilder does not load controlControl for parent type
 *    }
 * };
 */

var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "docroot/uploadifive.php",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    console.log(total);
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};


if (!window.fbControls) { window.fbControls = []; }
window.fbControls.push(function media(controlClass) {
    class controlMedia extends controlClass {

        /**
         * Load embedded Javascript
         */
        configure() {
            if (this.classConfig.default_change_handler ?? true) {
                const marker = 'controlMediaEmbedded';
                const cache = window.fbLoaded.js; //Reuse the FormBuilder cache to ensure we only load the media control JS once
                if (!cache.includes(marker)) {
                    $(document.body).on('change', '.form-builder .frm-holder .fld-media-file-upload', function () {
                        const input = $(this);
                        let reader = new FileReader();

                        //Async read of the uploaded file and convert to a DataURI. Detect mimetype and adjust mimetype attribute and control Subtype
                        reader.addEventListener("load", function () {
                            const regexp = /^data:((?:\w+\/(?:(?!;).)+)?)/;
                            const elementContainer = input.closest('.form-elements'); //The container for an element's configuration fields
                            const srcElement = elementContainer.find('.fld-src');
                            const dataUri = this.result;
                            const mediatype = dataUri.match(regexp);
                            if (null !== mediatype) {
                                elementContainer.find('.fld-mimetype').val(mediatype[1]);

                                let pluginSubtype;
                                if (mediatype[1].startsWith('image/')) {
                                    pluginSubtype = 'image';
                                } else if (mediatype[1].startsWith('video/')) {
                                    pluginSubtype = 'video';
                                } else {
                                    pluginSubtype = 'audio';
                                }
                                elementContainer.find('.fld-subtype').val(pluginSubtype);
                            }
                            srcElement.val(dataUri).trigger('change');
                            input.val("");
                        });


                        var file = input[0].files[0];
                        var upload = new Upload(file);

                        // maby check size or type here with upload.getSize() and upload.getType()

                        // execute upload
                        upload.doUpload();

                        //reader.readAsDataURL(input[0].files[0]);
                    });
                    cache.push(marker);
                }
            }
        }

        /**
         * Class configuration - return the icons & label related to this control
         * @return {object} definition
         */
        static get definition() {
            return {
                icon: '🖼️',
                i18n: {
                    default: 'Media',
                },
                defaultAttrs: {
                    'className': {
                        label: "Class",
                        value: 'img-fluid',
                        type: 'text',
                    },
                    'description': {
                        label: "Help Text",
                        value: '',
                        type: 'text',
                    },
                    'src': {
                        label: "Src",
                        value: '',
                        type: 'textarea', //text inputs do not handle large data URI strings, need to use textarea to ensure the browser doesn't hang
                    },
                    'mimetype': {
                        label: "Mime Type",
                        value: '',
                        type: 'text',
                        description: 'Mimetype of Media',
                        //readonly: true,
                    },
                    'media-file-upload': {
                        label: "File",
                        value: '',
                        type: 'file',
                        description: 'Upload a media file (Image, Audio, Video)',
                        accept:"image/*,video/mp4,video/x-m4v,video/*,audio/x-m4a,audio/*",
                    },
                    'width': {
                        label: "Width",
                        value: '200',
                        type: 'text',
                    },
                    'height': {
                        label: "Height",
                        value: 'auto',
                        type: 'text',
                    },
                    'subtype': {
                        label: 'Media Type',
                        options: {
                            'image': 'Image',
                            'video': 'Video',
                            'audio': 'Audio',
                        },
                    },
                },
            };
        }

        /**
         * Build the HTML5 attribute for the specified media type
         * @return {Object} DOM Element to be injected into the form.
         */
        build() {
            const {...attrs} = this.config;
            delete(attrs.type);

            switch(this.subtype) {
                case 'image':
                    let caption = this.markup('figcaption', this.label, {});
                    let img = this.markup('img', null, attrs);
                    let figure = this.markup('figure', [img, caption,], attrs);
                    return {
                        field: figure,
                        layout: 'noLabel',
                    };

                case 'video':
                    attrs.controls = true;
                    attrs.controlsList = "nodownload";
                    let videoSource = this.markup('source', null, {src: attrs.src, type: attrs.mimetype,});
                    return this.markup('video', [videoSource, '<p>Your browser does not support HTML5 video</p>',], attrs);

                case 'audio':
                    attrs.controls = true;
                    let audioSource = this.markup('source', null, {src: attrs.src, type: attrs.mimetype,});
                    return this.markup('audio', [audioSource, '<p>Your browser does not support HTML5 audio</p>',], attrs);
            }
        }

        /**
         * onRender callback
         */
        onRender() {

        }
    }

    // register this control for the following types & text subtypes
    controlClass.register('media', controlMedia);
    controlClass.register(['image','video','audio',], controlMedia, 'media');
    return controlMedia;
});