Adding jQuery plugin to Magento 2 does not work

Question

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.

Answer 1

magento 2 already add "jquery/file-uploader" lib ready for use Why do you need another one?

In your js code just require it

require(['jquery',"jquery/file-uploader"], function() {
  // Write your logic here
});

You can see more jquery plugins in lib folder in root directory