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.