2

I am using file upload control at frontend using below code:

<div class="upload-wrapper" data-bind="scope: 'uploader'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
    {
       ".upload-wrapper": {
           "Magento_Ui/js/core/app": {
               "components": {
                   "uploader": {
                       "component": "Magento_Ui/js/form/element/file-uploader",
                       "template": "ui/form/element/uploader/uploader",
                       "previewTmpl": "MyCompany_Module/form/element/uploader/preview",
                       "dataScope": "custom.image",
                       "isLoading": true,
                       "maxFileSize": <?php echo $fileSize; ?>,
                       "isMultipleFiles": true,
                       "uploaderConfig": {
                       "url": "<?php echo $block->getUrl('router/image/upload', ['_current' => true, '_use_rewrite' => true]); ?>"
                       }
                   }
               }
           }
       }
    }
</script>

It was working fine with earlier Magento versions but creating issue with Magento 2.3.0. It shows attached error in console (Uncaught ReferenceError: Base64 is not defined)

enter image description here

I checked the same and found that in earlier versions, the processFile method in file-upoader.js (Magento_Ui/js/form/element/file-uploader) having below code:

processFile: function (file) {
    file.previewType = this.getFilePreviewType(file);

    this.observe.call(file, true, [
        'previewWidth',
        'previewHeight'
    ]);

    return file;
}

but its updated as below in Magento 2.3:

processFile: function (file) {
    file.previewType = this.getFilePreviewType(file);
    console.log(file.name);
    if (!file.id && file.name) {
        file.id = Base64.mageEncode(file.name); //Base64 is globally defined
    }

    this.observe.call(file, true, [
        'previewWidth',
        'previewHeight'
    ]);

    return file;
}

Please help me if someone has any idea on it.

4

I have managed to use my own file-uploader (MyPackage_Module/js/form/element/file-uploader), its exact copy of Magento_Ui/js/form/element/file-uploader along with required adjustments.

It would be working fine once we get Base64.mageEncode at frontend but I managed to set file.id without Base64 encoding, replaced below code:

processFile: function (file) {
    file.previewType = this.getFilePreviewType(file);

    if (!file.id && file.name) {
        file.id = Base64.mageEncode(file.name);
    }

    this.observe.call(file, true, [
        'previewWidth',
        'previewHeight'
    ]);

    return file;
}

With

processFile: function (file) {
    file.previewType = this.getFilePreviewType(file);

    if (!file.id && file.name) {
        file.id = file.name;
    }

    this.observe.call(file, true, [
        'previewWidth',
        'previewHeight'
    ]);

    return file;
}

However, better solutions are welcome. I am just updating what solution I applied.

  • Life Saver +1 from me !! :) – Vivek Feb 1 at 6:11
  • How did you override this file ? Can you suggest me ? Cause I'm having same issue. your answer solved my issue but can't able to override file-uploader. – Vivek Feb 4 at 6:59
  • You just need to create your own file with updated content and set that as file-uploader. We are not overriding the file but using same as Magento default with updated content for our own module. Magento default functionality would still be using default file instead of the file which created by us. – Himmat Paliwal Feb 4 at 11:07
3

Base64 is defined in ./lib/web/mage/adminhtml/tools.js. Try to load this JS lib directly in your page layout file for frontend (./view/frontend/layout/route_to_your_page.xml):

<?xml version="1.0"?>
<page ...>
    <head>
        <link src="mage/adminhtml/tools.js" type='text/javascript'/>
    </head>
    <body />
</page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.