uploader.phtml

Go to the documentation of this file.

<?php
// @codingStandardsIgnoreFile
?>
<?php
?>

<div id="<?= $block->getHtmlId() ?>" class="uploader">
    <span class="fileinput-button form-buttons">
        <span><?= /* @escapeNotVerified */ __('Browse Files') ?></span>
        <input id="fileupload" type="file" name="<?= /* @escapeNotVerified */ $block->getConfig()->getFileField() ?>"
            data-url="<?= /* @escapeNotVerified */ $block->getConfig()->getUrl() ?>" multiple>
    </span>
    <div class="clear"></div>
    <script id="<?= $block->getHtmlId() ?>-template" type="text/x-magento-template">
        <div id="<%- data.id %>" class="file-row">
            <span class="file-info"><%- data.name %> (<%- data.size %>)</span>
            <div class="progressbar-container">
                <div class="progressbar upload-progress" style="width: 0%;"></div>
            </div>
            <div class="clear"></div>
        </div>
    </script>
</div>

<script>
require([
    'jquery',
    'mage/template',
    'jquery/file-uploader',
    'domReady!',
    'mage/translate'
], function ($, mageTemplate) {

    $('#fileupload').fileupload({
        dataType: 'json',
        formData: {
            isAjax: 'true',
            form_key: FORM_KEY
        },
        sequentialUploads: true,
        maxFileSize: <?= /* @escapeNotVerified */ $block->getFileSizeService()->getMaxFileSize() ?> ,
        add: function (e, data) {
            var progressTmpl = mageTemplate('#<?= $block->getHtmlId() ?>-template'),
                fileSize,
                tmpl;

            $.each(data.files, function (index, file) {
                fileSize = typeof file.size == "undefined" ?
                    $.mage.__('We could not detect a size.') :
                    byteConvert(file.size);

                data.fileId = Math.random().toString(36).substr(2, 9);

                tmpl = progressTmpl({
                    data: {
                        name: file.name,
                        size: fileSize,
                        id: data.fileId
                    }
                });

                $(tmpl).appendTo('#<?= $block->getHtmlId() ?>');
            });

            $(this).fileupload('process', data).done(function () {
                data.submit();
            });
        },
        done: function (e, data) {
            var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
            $(progressSelector).css('width', '100%');
            if (data.result && !data.result.hasOwnProperty('errorcode')) {
                $(progressSelector).removeClass('upload-progress').addClass('upload-success');
                MediabrowserInstance.handleUploadComplete();
            } else {
                $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
            }
        },
        progress: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
            $(progressSelector).css('width', progress + '%');
        },
        fail: function (e, data) {
            var progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
            $(progressSelector).removeClass('upload-progress').addClass('upload-failure');
        }
    });

});
</script>