jquery fileupload input box doubling up

Question

People with experience using BlueImp's Jquery FileUpload plugin only please

using Razor/C#/MVC/Blueimp's Jquery FileUpload, the jqueryUI version

So I wanted an image to be my 'select file' button. I wrapped the input in a <span class="fileinput-button"> and instead of using a button element, I use an img element. It seems to work, pulls up the file selection dialogue, sets the value of the input just fine. So I size the input to match the image size. All good so far.

I notice that the pointer is acting funny so I inspect the element and find that there are actually two input boxes on top each other. One is perfect, right over the img...but the second is something like 139px by 33px and sits over the image as well (top-left aligned) but

I used inspect-element, highlighted each input and they both lead to the same exact spot in the code...that's what I can't figure out, I inspect element, highlight the 139px input and it takes me here to the 54px element...they both lead here.

<span class="fileinput-button">
  <img class="clickable" src="~/Images/section/section49.png" width="54" height="54">
  <input type="file" name="file" value="" style="height:54px; width: 54px;">
</span>

Has anyone else ran across this?

I know this isn't much to go on but the code is all pretty straight-forward. The only other info I can think of to add is 1. the span is inside a table cell, and 2. all of this is in a modal dialogue...don't think that matters tho...let me know if any extra info is needed for clarity.

thanks

(just to help visualize, the image below is Chrome highlighting said 139px wide element...clicking on it leads to the above 54px wide element. I've never seen element inspector act this way. There is no CSS in the list that would affect this perhaps is something to do with the way the blueimp plugin behaves?)

Answer 1

Here's what I did instead:

did away with trying to use JQueryFileUpload plugin's "fileinput-button" span multiple times in a modal

instead I put a class="clickable" on each image, added a data- attribute with the extra info I needed. Then attached a click event to each "clickable" class and manually fired the plugin's input...from there, JQueryFileUpload plugin takes over and acts as normal.

In the plugin's form section, looks as it would normally

<input id="file" type="file" name="file" value=""/>

A button opens the modal which contains multiple slots, user clicks the image (represents a slot to which the files will be uploaded).

<img class="clickable" data-asset-type="@AssetType.Slot23" src=...etc

Because the modal is rendered from the page that the plugin is also in, I can just use jquery to toss the info over to the plugin and let it handle things as normal

$(".clickable").click(function () {
        var assetType = $(this).attr('data-asset-type');
        $('input[name="AssetType"]').val(assetType); // the hidden field
        $('#modal-container').fadeOut(300);
        $('input#file').click();
        return false;
    });

The result is a modal window with multiple file upload buttons all sending back to one spot with the data acquired from the modal window. And once the user selects a file, JQFileUpload acts as normal, showing the file in the queue and all the nice extras that plugin offers.