I tried add jQuery Upload File Plugin to Magento 2 and used requirejs but it doesn't work smooth. At first time has error:
Uncaught Error: Mismatched anonymous define() module: function ($) { "use strict"; /* Usage Note: ----------- Do not use both ajaxSubmit and ajaxForm on the same form. These functions are mutually exclusive. Use ajaxSubmit if you want to bind your own submit handler to the form. For example,
$(document).ready(function() {
$('#myForm').on('submit', function(e) {
e.preventDefault(); // <-- important
$(this).ajaxSubmit({
target: '#output'
});
});
});
Use ajaxForm when you want the plugin to manage all the event binding for you. For example,
$(document).ready(function() {
$('#myForm').ajaxForm({
target: '#output'
});
});
You can also use ajaxForm with delegation (requires jQuery v1.7+), so the form does not have to exist when you invoke ajaxForm:
$('#myForm').ajaxForm({
delegation: true,
target: '#output'
});
When using ajaxForm, the ajaxSubmit function will be invoked for you at the appropriate time.
My requirejs-config.js
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
/*eslint no-unused-vars: 0*/
var config = {
paths: {
'customuploadfile' : 'Magento_Sales/js/jqueryuploadfile'
},
"shim": {
'customuploadfile': {
deps: ['jquery']
}
}
};
My custom js:
require([
'jquery',
'customuploadfile'
], function ($,uploadFile) {
'use strict';
$(document).ready(function(){
$.ajaxSetup({
showLoader: true,
});
var url_anhang=$('#order_upload_anhang').val();
var anhang_uploadObj;
anhang_uploadObj = $("#anhanguploader").uploadFile({
url:url_anhang,
formData:{ form_key: FORM_KEY,order_id:$('#add_anhang_to_order').attr('value')},
fileName:"file",
cancelStr:"x",
autoSubmit:false,
dragDropStr : false,
showProgress:true,
showDone:false,
showAbort:false,
onSuccess:function(files,data,xhr)
{
var url=$('#order_anhang_save').val();
var order_id=$('#add_anhang_to_order').attr('value');
anhang_uploadObj.reset();
var aj = new Ajax.Request(
url, {
method:'get',
parameters:{
"order_id" : order_id,
"data" : data
},
onComplete: function (text)
{
$.get(window.location.pathname, function( data ) {
$('.anhang_show').html(jQuery(data).find('.anhang_show').html());
});
}
}
);
},
});
$(document).on( 'click', '#add_anhang_to_order',function(){
anhang_uploadObj.startUpload();
});
});
If reload page it work but sometime has error, please help me.