1

I need my users to be able to upload some files from the backend, with the functionality of a preview image, abort button, multiple files uploadable, etc.

And since Magento already uses the blueimp/jQuery-File-Upload Plugin for the backend, I think it would be the best to use it for my frontend as well.

But when I try to add files I always get this error:

TypeError: that is undefined

Triggered by the following code in magento/lib/web/jquery/fileUploader/jquery.fileupload-ui.js:

var that = $(this).data('fileupload'),

Here is my implementation:

uploader.phtml (template file)

<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">

    <div class="row fileupload-buttonbar">
            <span class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" class="btn btn-primary start">
                <span>Start upload</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <span>Cancel upload</span>
            </button>
            <button type="button" class="btn btn-danger delete">
                <span>Delete</span>
            </button>
            <input type="checkbox" class="toggle">
            <span class="fileupload-process"></span>
    </div>

    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

</form>

<script type="text/x-magento-init">
{
    "#fileupload": {
        "fileUploader":{}
    }
}
</script>

fileuploader.js (defined in requirejs-config.js)

define([
    'jquery',
    'underscore',
    'jquery/fileUploader/jquery.fileupload-ui',
    'jquery/fileUploader/jquery.iframe-transport',
    'jquery/fileUploader/load-image',
    'jquery/fileUploader/canvas-to-blob'
], function($, _) {
    "use strict";

    return function() {

        $('#fileupload').fileupload({
            url: '/upload/ajaxupload/'
        });
    };   

});

Where am I wrong? I gotta admit, I never did that much with jquery widgets.

0
 var that = $(this).data('fileupload'),

Element dos't have attribute

 data-fileupload=""

https://api.jquery.com/data/#data-html5

https://johnresig.com/blog/html-5-data-attributes/

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.