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.

Improve this question
1

2 Answers 2

Reset to default
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.

Improve this answer
4
  • Life Saver +1 from me !! :)
    – anonymous
    Commented Feb 1, 2019 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.
    – anonymous
    Commented Feb 4, 2019 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
    Commented Feb 4, 2019 at 11:07
  • @HimmatPaliwal, can you please look this? magento.stackexchange.com/questions/319701/…
    – Sunny Rahevar
    Commented Aug 13, 2020 at 9:53
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>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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