I have a custom content type with file field as one of the fields. For theming/UI purposes I should make this file field as clickable button. And only when user clicks on it, he/she gets modal window with upload/file browse or file name if there already is a file uploaded.

I’ve accomplished this with using jQuery Update module and from there with help of jQurey UI Dialog (https://jqueryui.com/dialog/) and custom module with JS code:

(function ($) { Drupal.behaviors.module_custom = { attach: function (context, settings) { //appending button var $inputButton = $('<input type="button" value="Līgums" id="open_modal" />'); $inputButton.insertAfter($(".field-name-field-file")); //hiding file upload wrapper div $('.field-name-field-file').hide();   //initializing modal dialog window    $( ".field-name-field-file" ).dialog({   autoOpen: false,   show: {     effect: "blind",     duration: 1000   },   hide: {     effect: "explode",     duration: 1000   },   width: 500 });  //launching modal dialog when button is clicked $( "#open_modal" ).click(function() {   $( ".field-name-field-file" ).dialog( "open" ); });    });   }   };     }(jQuery)); 

This all works from UI/theming perspective but it brakes file upload. When modal window opens and file is uploaded I got error “An unrecoverable error occurred. The uploaded file likely exceeded the maximum file size (8 MB) that this server supports.” no matter how small file is (event if it is 1 KB). I suppose this issue is related how AJAX upload is handled. Any ideas what is issue here?