locked
Remove or Hide the upload button on the ajax file upload control. RRS feed

  • Question

  • User2089553522 posted

    I would like to use the AJAX file upload control from the toolkit. The control works great but I would like to slightly change its behavior.  I want the user  to choose all the files that they will be loading - a total of 10 , but I don't want them to upload  the files to the server until my entire form is submitted which also is being submitted through Ajax. Therefore I  need help two fold. I need to figure out what function the "Upload" button triggers or what event is attached to the button and I also need to remove the standard button that comes with the control. Does anyone have any clue on how to do this. I have spent two days trying to solve this issue with no success.

     I appreciate  any help you guys can offer.

    Thanks.

    Monday, November 23, 2015 3:20 PM

All replies

  • User2103319870 posted

    Remove or Hide the upload button on the ajax file upload control.

    You can hide the Upload button from AjaxFileUpload like given below

     <script>
                //Call the function on pageload
                window.onload = function () {
                    //Hide the upload button
                    document.getElementsByClassName('ajax__fileupload_uploadbutton')[0].style.display = 'none';
                };
            </script>

    Monday, November 23, 2015 4:15 PM
  • User2089553522 posted

    That didn't work at all. I have try different variations of this already. When I click select and then choose at-least one file. I immediately get the control back thats because the javacript in the control is setting that div to visible.

    see image

    http://s7.postimg.org/qlhgjz4mz/Control.png

    Monday, November 23, 2015 4:27 PM
  • User61956409 posted

    Hi mlov83,

    If you check the html code using F12 developer tools, you will find the upload button is in “AjaxFileUpload1_Footer” div.

    You could select and hide it using the following code.

    <script>
        $(function () {
            $("#AjaxFileUpload1_Footer").hide();
        })
    </script> 
    

    Best Regards,

    Fei Han

    Tuesday, November 24, 2015 7:15 AM
  • User2089553522 posted

    Fei Han,

    Thanks so much for the reply. Now that I have that button removed I now need to be able to call the function that the button would have called if clicked. I have poured over and over the javascript code but I can't seem to figured out how to make it work. I have tried setting the class on another button like 

    $('#mybutton').removeClass().addClass('ajax__fileupload_uploadbutton').


    do you have any clues on how to accomplish that?

    Tuesday, November 24, 2015 11:38 AM
  • User2089553522 posted

    Does anyone have any Ideas? Bump

    Wednesday, November 25, 2015 2:36 PM
  • User-159888409 posted

    This is what worked for me:

            $(function () {
                $("#MainContent_AjaxFileUpload1_Footer").hide();
            })


    Once you select one file press right click over the upload button and select inspect element, there you will see that the upload button is inside the footer div.

    Tuesday, March 1, 2016 4:11 AM
  • User938407991 posted

    add style to your page

    <style>
        .ajax__fileupload_uploadbutton{
            display:none;
        }
        </style>

    Thursday, October 11, 2018 2:24 AM