Blueimp jQuery-File-Upload basic plugin shows unwanted submit button in ASP.NET MVC view
I have a task to edit one of our older companny asp.NET MVC app, where we uploading files using flash (uploadify) to this times. But now, we want to use Blueimp jQuery-File-Upload basic plugin.
Everything works perfect, but there is problem with unwanted submit button, which is generated (I believe) from plugin script itself.
Do you have any ideas, how to prevent genereting of this button?
Screenshot from app:
Blue area = span (class fileInputButton) which I use as a button for opening file browser window
Green area = unwanted submit button, which is generated from blueimp script
When I'm searching element on the page in browser, the result is that green area is #file-upload-button button type and come from fileupload input which is in partial cshtml view:
<div class="fileMenu">
@*<div class="FileMenuItem">
<input id="file_upload" name="file_upload" type="file" multiple="true">
</div>*@
<div class="FileMenuItem">
<span class="FileInputButton">
<span>PŘIDAT SOUBORY</span>
<input id="fileupload" type="file" name="files" multiple>
</span>
</div>
<div id="progress" style="position: relative; clear: both; padding-left: 19px; display: none">
<img src="~/Images/ajax-loader.gif" />
</div>
@*Other non-important elements...*@
</div>
The CSS I'm using:
.FileInputButton {
position: relative;
background: url(../Images/add-file-16.png) 3px 5px no-repeat;
color: red;
font: 12px Arial, Helvetica, sans-serif;
width: 100%;
padding-left: 25px;
cursor: pointer;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fileMenu {
display: block;
float: left;
margin-top: 30px;
}
.fileMenu .FileMenuItem {
color: #E20B08;
display: block;
float: left;
padding-left: 10px;
width: 137px;
font-size: 13px;
}
Function for file upload, which I have in main view Index.cshtml:
$('#fileupload').fileupload({
url: '@Url.Action("UploadFiles", "Case")',
dataType: 'json',
autoUpload: true,
multipart: true,
singleFileUploads: false
}).on('fileuploaddone', function (e, data) {
var errorFiles = '';
$.each(data.files, function (index, file) {
var fileName = file.name;
if (file.error) {
errorFiles = errorFiles + '\n' + fileName + ', viz: ' + file.error;
} else {
//Some own non-important code...
try {
//Another non-important own code...
} catch (err) {
errorFiles = errorFiles + '\n' + fileName + ', viz: ' + err.message;
}
}
});
if (errorFiles !== '') {
alert('Error while uploading files:' + errorFiles);
}
}).on('fileuploadadd', function (e, data) {
data.submit();
}).on('fileuploadstop', function (e, data) {
$('#progress').hide();
}).on('fileuploadstart', function (e, data) {
$('#progress').show();
}).on('fileuploadfail', function (e, data) {
alert('File upload error');
}).prop('disabled', !$.support.fileInput)
.parent().addClass($.support.fileInput ? undefined : 'disabled');
Scripts and CSS that I have loaded for this view in shared _Layout.csthml:
<link href="~/Content/jmenu.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" /> @*This one contains the .FileMenu, .FilemenuItem and .FileInputButton*@
<link href="~/Content/checkboxes.css" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker-cs.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/JQuery/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/JQuery/jquery.fileupload.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/JQuery/jquery.iframe-transport.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/JStorage/jstorage.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/PDFObject/pdfobject.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Mask/jquery.mask.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/Validation/CustomFieldValidator.js")" type="text/javascript"></script>
I believe that this is not important, but to be complete, the controller upload method
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UploadFiles(List<HttpPostedFileBase> files)
{
List<string> fileNames = new List<string>();
try
{
//Non-important own code
return Json(
new
{
ProcessedFiles = fileNames
});
}
catch (Exception ex)
{
return Json(
new
{
ProcessedFiles = fileNames,
Exception = ex.Message
});
}
}
I tried lot of things, but to be honest, I'm new in ASP.NET, jquery, html etc. So I believe it's something banal for someone who knows this area.
Thanks to comment by @Rory McCrossan I have a solution. All what I had to do was edit my CSS for hiding original file input and aply that CSS in partial cshtml.
So changes...
Partial cshtml
<div class="fileMenu">
@*<div class="FileMenuItem">
<input id="file_upload" name="file_upload" type="file" multiple="true">
</div>*@
<div class="FileMenuItem">
<span class="fileinput-button fileinput-overlap">
<span>PŘIDAT SOUBORY</span>
<input id="fileupload" type="file" name="files" multiple>
</span>
</div>
<div id="progress" style="position: relative; clear: both; padding-left: 19px; display: none">
<img src="~/Images/ajax-loader.gif" />
</div>
@*Other non-important elements...*@
</div>
And new CSS
.fileinput-button {
position: relative;
overflow: hidden;
display: inline-block;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
font-size: 200px !important;
direction: ltr;
cursor: pointer;
}
.fileinput-overlap {
background: url(../Images/add-file-16.png) 3px 5px no-repeat;
background-position: left 0px top 6px;
color: #E20B08;
font: 12px Arial, Helvetica, sans-serif;
width: 127px;
padding-left: 20px;
padding-top: 9px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}