Magento 2: Frontend file uploader (jquery)

Question

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.

Answer 1

 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/