locked
Show/hide image upload button if image is selected RRS feed

  • Question

  • User-1104215994 posted

    Hi guys,

    I am trying to make an MVC page which basically uploads an image and then send this image to a REST <g class="gr_ gr_174 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="174" data-gr-id="174">api</g>. Is there a way to show/hide my upload button depends on image selection? If <g class="gr_ gr_306 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="306" data-gr-id="306">image</g> is selected upload button will show and it is hidden if there is no image selected.

    Here is my <g class="gr_ gr_148 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="148" data-gr-id="148">html</g> portion;

    @{
        WebImage photo = null;
        var newFileName = "";
        var imagePath = "";
    
        if (IsPost)
        {
            photo = WebImage.GetImageFromRequest();
            if (photo != null)
            {
                newFileName = Guid.NewGuid().ToString() + "_" +
                              Path.GetFileName(photo.FileName);
                imagePath = @"images\" + newFileName;
    
                photo.Save(@"~\" + imagePath);
            }
        }
    }
    
    <div class="jumbotron">
        <h3>Upload Image</h3>
        <p class="lead">
            <form action="" method="post" enctype="multipart/form-data">
                <fieldset>
                   
                    <input class="btn btn-primary btn-lg" type="file" name="Image" />
                    <br />
                    <br />
                    <input class="btn btn-primary btn-lg" type="submit" value="Upload &raquo;" />
                </fieldset>
            </form>
    
            @if (imagePath != "")
            {
                <div class="result">
                    <img src="@imagePath" alt="image" />
    
                </div>
            }
        </p>
        
    </div>

    Best Regards.

    Sunday, December 30, 2018 6:21 PM

Answers

  • User1724605321 posted

    Hi cenk1536 ,

    You can achieve that via Jquery . You can check whether the input has value to show/hide the button . Something like :

    <form action="" method="post" enctype="multipart/form-data">
                <fieldset>
    
                    <input class="btn btn-primary btn-lg" type="file" name="Image" id="select_id" onchange="SelectChange()" />
                    <br />
                    <br />
                    <input class="btn btn-primary btn-lg" type="submit" value="Upload &raquo;" id="upload_id" />
                </fieldset>
    </form>
    

    Javascript :

    $(function() {
        $("#upload_id").hide();
    
    });
    
    function SelectChange () {
    
        if ($("#select_id").val() == "")
        {
           $("#upload_id").hide();
        }
        else {
             $("#upload_id").show();
        }
    }
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 31, 2018 7:48 AM

All replies

  • User1724605321 posted

    Hi cenk1536 ,

    You can achieve that via Jquery . You can check whether the input has value to show/hide the button . Something like :

    <form action="" method="post" enctype="multipart/form-data">
                <fieldset>
    
                    <input class="btn btn-primary btn-lg" type="file" name="Image" id="select_id" onchange="SelectChange()" />
                    <br />
                    <br />
                    <input class="btn btn-primary btn-lg" type="submit" value="Upload &raquo;" id="upload_id" />
                </fieldset>
    </form>
    

    Javascript :

    $(function() {
        $("#upload_id").hide();
    
    });
    
    function SelectChange () {
    
        if ($("#select_id").val() == "")
        {
           $("#upload_id").hide();
        }
        else {
             $("#upload_id").show();
        }
    }
    

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 31, 2018 7:48 AM
  • User-1104215994 posted

    Hi Nan Yu,

    Thanks for your reply. I am new to MVC and Razor. How can I add your jquery into Razor? Should I put in between javascript tags?

    Best Regards.

    Monday, December 31, 2018 11:41 AM
  • User-1104215994 posted
    @section Scripts{
        <script type="text/javascript">

    the code above did the trick :)

    Monday, December 31, 2018 1:06 PM