Uploading files without displaying text correctly in Modal

Question

I am using Modal on Twitter Bootstrap in ASP.NET MVC, which allows the user to upload an image.

I use the file upload control, which can be found here: https://github.com/blueimp/jQuery-File-Upload

The following is a code snippet showing a file upload control:

<div class="modal-body"> <form id="imageUpload" action="@Url.Content("~/Listing/ReturnBase64Data")" method="POST" enctype="multipart/form-data"> @Html.HiddenFor(m => m.ListingGuid) <div class="fileupload-buttonbar"> <div class="progressbar fileupload-progressbar" id="progressbar"> </div> <div class="fileinput-button">Upload Image <input type="file" id="fileupload" name="image"/> </div> </div> @if (Model.SelectedImage == null) { <div id="show_image"> </div> } else { <div id="show_image"> <img style="height:200px ! important;" src="data:image/png;base64, @Model.SelectedImage.Content"/> </div> } <div id="show_error" > </div> </form> 

There is more code after the </form> , but the main part.

Below is the file upload control and the letter "N" next to it. The letter N is actually a string that says: "No file selected." But for some reason, it seems like something is overlapping the entire control.

Does anyone know where I am going wrong?

Answer 1

It seems you do not have jquery.fileupload-ui.css in your view, because you should not have “select file” and “no file selected”. There should be a button "Download Image".

First, make sure you have a link to jquery.fileupload-ui.css in your view, then add the btn class to the div that contains the input. If you have a stylesheet, the fileinput-button class must be overridden by another stylesheet. check it out with firebug or Chrome Developer Tools.

  <div class="btn fileinput-button">Upload Image <input type="file" id="fileupload" name="image"/> </div>