0

I am trying to make this input file work but when I try to use it on a div that opens up when called. It wont work. But I have another input file on the page which is working normaly. I have a js that clicks the file I need to be clicked. And the action is done but the file wont open. Any ideas why? Ill leave here the JS and the HTML. The firebug does not catch any error. Im using Firefox.

Im doing this in Visual Studio. So this is the view without the header and footer. I have another form with a input which is working. The diference with this one is that the div inside opens up a box, kind of like a modal.

HTML

<form target'UploadTarget' name='ImgFormE' method='post' id='ImgFormE' enctype='multipart/form-data' action='/Merchant/ModifyReward'>
<input type='hidden' name='id' id='idReward' value=''/>
<li id='test1' class='next-bg-two'>
    <h3>" + Name + "</h3>
    <span class='rb-temp'>
        <p>Promo Comienza:" + startdate + "</p>
        <p>Promo Termina: " + enddate + "</p>
    </span>
    <img alt='' title='' class='service-thumb' src='images/services/02.png'/>
    <div class='rb-overlay'>
        <span class='rb-close'>close</span>
        <div class='rb-week clearfix next-bg-two'>
            <div class='service-matter'>
                <input class='rMerchant' id='nameE' name='name' type='text' placeholder='Nombre de la Promocion' value='" + Name + "'required/>
                <div id='service-carousel-02' class='carousel slide'>
                    <div class='carousel-inner'>
                        <div class='item active'>
                            <img id='fileE"+i+"' name='file' alt='' title='' class='service-spec-img' onClick='changeImg(this.id)' src='@Url.Content("~")Uploads/Rewards/" + url + "'>
                            <input style='display:none; position:absolute; top:-100px;' name='file' type='file' class='image' id='imageE"+i+"' />
                            <div class='carousel-caption'>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class='service-info'>
                <h5 class='service-spec'>Promocion</h5>
                <h3 style='margin-bottom:0;'>Fecha Inicio:
                    <input style = 'width:80%; float:left;' id='fechaIniE' name='fechaIni' class='rMerchant' type='text' readonly='' value='" + startdate + "' size='16' />
                </h3>
                <h3 style='text-align:right;'>Fecha Fin:
                    <input style = 'width:80%; float:left;' id='fechaFinE' name='fechaFin' class='rMerchant' type='text' readonly='' value='" + enddate + "' size='16' />
                </h3>
                <textarea cols='50' rows='5' id='txtDescriptionRewardE' class='rMerchant' name='rewardDescription' placeholder='Descripcion de Promocion' required >
                    " + description + "
                </textarea>
                <p>Mega Puntos</p>
                <input class='rMerchant' id='pointsE' name='points' type='text' placeholder='Mega Puntos' value='"+puntos+"' />
                <button type='button' value='Crear Promocion' onclick='UploadImageE()' class='btn btn-success' id='btnRegRewardE'>Editar Promocion</button>
                <a class='scroll-link btn btn-danger' data-soffset='0' href='#'>Borrar Promoción</a>
            </div>
        </div>
    </div>
</li>

Here is the JS where I simulate the click on the file using the image. The image is doing the right click. I also tried clicking directly on the input. But it wont open the file explorer. 

function changeImg(id) {
    var num = id.split("fileE");
    $("#imageE"+num[1]).click();
}

Im calling for a list of rewards. and the post works just fine. As do the printing of each member of the list. Also the HTML is made by a ajax which gives the missing information. I was thinking maybe cause its an ajax, the input somehow does not work fine?

thanks for the help in advance.

Jurgen Feuchter
  • 544
  • 1
  • 7
  • 29
  • It is not possible to programmatically "click" on a file input type in all browsers. See this question for the reasons and some workarounds: http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input – hotforfeature Jul 29 '14 at 15:48
  • @abmitchell But Im using that very js on another image to click another input file and it works. Also I took off all properties that could make an error happen. And clicked on the input file directly. But it wont open the file explorer. – Jurgen Feuchter Jul 29 '14 at 15:56
  • Right now it's not possible to click on the input file tag, since it is hidden and set to a position off the screen... I'm not sure what you're clicking on – hotforfeature Jul 29 '14 at 15:58
  • @abmitchell I take off the styles which make the input not visible. And its just not visible. Its not disabled. When I take off the styles I click on the input file button, but nothing happens. If I do this with another input file I have in the same page that does work. Notice this block of code is append by a Ajax I have. I have a theory that it might be causing the trouble. But I havent found anything yet. – Jurgen Feuchter Jul 29 '14 at 16:05
  • When I put your code in a fiddle and remove the input file styles, I can click on it just fine and open an explorer prompt – hotforfeature Jul 29 '14 at 16:12
  • @abmitchell yea I tried that too and it does work on jsfiddle. But I still dont know why it wont work on my page. – Jurgen Feuchter Jul 29 '14 at 16:22

0 Answers0