File Upload not Rendering Text Properly in Modal

Question

I am using a Modal in Twitter Bootstrap in ASP.NET MVC which allows the user to upload an Image.

I am using a file upload control which can be found here: https://github.com/blueimp/jQuery-File-Upload

The following is a snippet of code showing the 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> tag but that's the main part.

The following shows the file upload control and the letter 'N' next to it. The letter N is actually a string that says "No file chosen". But for some reason it seems like there is something overlapping the entire control.

Does anyone know where I am going wrong?

Answer 1

It seems you have not jquery.fileupload-ui.css on your view, because you must not have 'choose file' and 'no file chosen'. There must be just 'Upload Image' button.

First make sure you have link to jquery.fileupload-ui.css on your view then add btn class to the div which contains input. If you have the style sheet, the fileinput-button class must have been override by other style sheet. check it by firebug or Chrome developer tools.

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