The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Input type file not working

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #177732

    I don´t know if this question goes here, cause I cant seem to find the root of the problem, but here it goes.

    I have a input file that is inside a div which is hidden at first. Then when clicked on. The box opens and reveals a form which is to change the information inside. This has an input file which does not work when I try clicking on it directly or by click it with a jquery() .click or .trigger(“click”). I tryed to put as much code I have in the next jsfiddle. So you can see more or less what is Im working on.

    In the example I use a button to toggle the disable on all the other inputs. With all the test Ive run. The problem has to be on the div that opens up which would be the div with class=”rb-overlay” this class has the next properties:

    clip: rect(0px, 1349px, 657px, 0px);
        opacity: 1;
        pointer-events: auto;
        z-index: 100; 

    This toggles on when the box is clicked. If I position the input file outside the <li> I can click the input and the file explorer does open. But if the input file is inside I can make the file explorer appear. If in the input file I put a onclick="alert("this")“. The alert will show, but the file explorer wont open. Also I tried to have the form outside the rb-overlay div so I van have the input outside the <li>, but then I cant click the box to open the rb-overlay. I have about a week with his problem. And Im not sure either how to work around it or fix this. Ill be really greatfull to the person that helps me with this hehehe. If you have any questions about something I didnt explain please ask. Thanks in advance for your help.


    Ok Ive got first:
    I have a list of <li> which are append by an ajax. This <li> contains two boxes, one which is the one that has to be clicked for the other one to appear. The one who appears is kind of like a shadowbox.

    Second: This div, the one that opens up, has a form inside which is the one I want to submit to change the information on the inputs. Everything works fine: The inputs ,the buttons, etc. All except the input type=File. This input file is hidden and can be clicked by a onclick function I gave to the image I put in the form. But the input file explorer wont open. It does know it is being clicked on, but the event which opens up the file explorer wont open.

    Third: I tried many ways of making the file explorer open. The one that worked for me, was taking the input file outside the <li>. this way when I clicked on the image and the file explorer does open. The problem with this is that I need the input file to be inside the <li> cause there is where the form is. I cant put the form around the list item cause then the second box wont open.

    So I need a solution or reason why I cant call the event from the input file to open up the file explorer.


    Still in the jsfiddle the input file opens the file explorer. But in my project it wont. The jsfiddle is to give a idea of the code I have. But I cant recreate whats happening to me on my project on jsfiddle. the onchangefile function is on my project but it wont even get there cause I cant open the file explorer to change the file. I know this might be a bit stressing but I cant recreate exactly whats happening on my project.


    Thats the problem the console does not throw any error. I checked with breaking points and alerts in the image onclick and on the input file onclick ant they both throw a alert if clicked, but no error. The only thing not running is the input file event to open the file explorer. Something is unbinding the input file event to open the file explorer I think.


    Look you can take a look from where Im taking the part of code.
    Just open up the index and on the Servicios tab you can see the boxes I have. By clicking on them you open the boxes. If you put a input file in those boxes that open, the input file wont fire the event file explorer.


    You my friend are a genius :D. Thanks so much for your help! I just change the return to true and it works perfectly. But I’m not sure if this might cause problems on the long run. Is there a way to see way to see what is making the event to single out the event from the input file?


    can you share the solution. can’t see here in the post


    I can confirm some of my older replies (although not on this thread) disappeared as well.
    Is this a known issue @paulie_d @chriscoyier ? I can show some example threads, if needed.


    We occasionally see post going missing when added usually for having too many links or, perhaps other anti-spam measures. I think some JS in posts has issues too!

    We also had issues with 5EO questions auto-flagging although I think that’s fixed now.

    Perhaps when Chris did an update some older posts got flagged for whatever new criteria they meet.


    Thanks for the info, I recognise the issue with the first example given, but I think it would more likely be something like the latter example which messes with some of those posts on older threads, for they went through with no problem at the moment of posting.

    I just think it’s a pity that some of those conversations on older threads now have become incomprehensible, and find this a bit demotivating as well to be honest. Although I recognise it’s a balance with filtering/flagging and none of this stuff is bulletproof or easy.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.