6

I am uploading the Image from frontend using the 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",
               "allowedExtensions": ["png", "jpg", "jpeg", "gif"],
               "uploaderConfig": {
                    "url": "<?php echo $block->getUrl('customer/account/family'); ?>"
               }
            }
        }
   }
 }
}
</script>

Image uploading is working from controller. From Controller I am passign the new uploaded image full path so that I can show the image on particular location.

My question is: how can I access the response from server side ?

I have also checked the file-uploader.js, there we have the event done: this.onFileUploaded.bind(this), But not sure how to call this here:

done: function (e, data) { 
    alert('uploaded');
} 

Please help.

4
+50

There're 2 possible ways to solve this. You can either opt to update the component, and thus get an access to it. Or, you can use your own element that extends the standard Magento_Ui/js/form/element/file-uploader.

In the example below, we'll describe the second option, as it's more flexible and easier to implement.

Create a file:

app/code/Vendor/Module/view/frontend/web/js/form/element/custom-file-uploader.js


define([
    'Magento_Ui/js/form/element/file-uploader'
], function (Element) {
    'use strict';

    return Element.extend({
        defaults: {
            fileInputName: ''
        },

        /**
         * Handler of the file upload complete event.
         *
         * @param {Event} e
         * @param {Object} data
         */
        onFileUploaded: function (e, data) {
            this._super(e, data);
            console.log(e); // test 
            console.log(data); // test 
            var response = data.result; // Here the response data are stored 
        }
    });
});

And make these changes in the component configuration:

<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": {
               "dataScope": "custom.image",
               "component": "Vendor_Module/js/form/element/custom-file-uploader",
               "template": "ui/form/element/uploader/uploader",
               "allowedExtensions": ["png", "jpg", "jpeg", "gif"],
               "uploaderConfig": {
                    "url": "<?php echo $block->getUrl('mageworx_shippingrules/zone/upload'); ?>" 
               }
            }
        }
   }
 }
}
</script>

This will let you gain access to server response, as well as to any method of the file uploader.

enter image description here

  • Thanks for your detailed answer. Could you explain about this "dataScope": "custom.image", – Pankaj Pareek Jun 12 '17 at 5:13
  • Can I have multiple upload wrapper ? I am trying to separate using two class but both going on same URL. Also if possible can you just guide how can we use this with uploader component for multiple option like Add more – Pankaj Pareek Jun 12 '17 at 13:08
  • Thanks I am able to solve that multiple wrapper. Only having issue with this only: how can we use this with uploader component for multiple option like Add more – Pankaj Pareek Jun 12 '17 at 13:15
  • do you have any idea to use uploader component with add more option ? I am keep trying on this but still stuck – Pankaj Pareek Jun 14 '17 at 11:32
  • use "isMultipleFiles": true, for Multiple upload – Saurabh Taletiya Aug 24 '17 at 12:08

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.