easyzuddin
New Member
Does anyone have experience in implementing Uploadifive in a Bootstrap modal. I have the upload aspect working correctly, it's the masking of the File upload button that is creating issues. If the modal window is opened and closed the mask is drawn again creating:\[code\]<div id="uploadifive-file_upload" class="uploadifive-button btn-primary" style="height: 30px; line-height: 30px; overflow: hidden; position: relative; text-align: center;"> Step 1: Select Files <div id="uploadifive-file_upload" class="uploadifive-button btn-primary" style="height: 30px; line-height: 30px; overflow: hidden; position: relative; text-align: center;"> Step 1: Select Files <input id="file_upload" name="file_upload" type="file" multiple="true" style="display: none;"><input type="file" style="opacity: 0; position: absolute; z-index: 999;" multiple="multiple"> </div><input type="file" style="opacity: 0; position: absolute; z-index: 999; left: -78.5px; top: -7.899993896484375px;" multiple="multiple"></div>\[/code\]As you can see \[code\]#uploadifive-file_upload\[/code\] is getting appended. I have tried on modal close to bind \[code\]html('');\[/code\] but this removes the reference to uploadifive file upload and the mask is not added.\[code\]//hidden bindings to modal $('#myModal').bind('hidden', function () { $('#uploadifive-file_upload').html(''); });\[/code\]Tracked down the jQuery in jquery.uploadifive.js where the button is created\[code\]// Check if HTML5 is available if (window.File && window.FileList && window.Blob && (window.FileReader || window.FormData)) { // Assign an ID to the object settings.id = 'uploadifive-' + $this.attr('id'); // Wrap the file input in a div with overflow set to hidden $data.button = $('<div id="' + settings.id + '" class="uploadifive-button btn btn-primary">' + settings.buttonText + '</div>'); if (settings.buttonClass) $data.button.addClass(settings.buttonClass); // Style the button wrapper $data.button.css({ 'height' : settings.height, 'line-height' : settings.height + 'px', 'overflow' : 'hidden', 'position' : 'relative', 'text-align' : 'center', // 'width' : settings.width });\[/code\]Any ideas on how to address this issue?