locked
Bootstrap 4 custom file input problem RRS feed

  • Question

  • User-1104215994 posted

    Hello,

    I am trying to select a file and upload it on my .net core MVC application.  But after browsing the file, it does not select and <g class="gr_ gr_162 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="162" data-gr-id="162">upload</g>. What is missing?

    @{
        ViewData["Title"] = "ImportExcel";
    }
    
    <h2>Import Games </h2>
    
    <form method="post"
          asp-action="Upload"
          asp-controller="GameBanks"
          enctype="multipart/form-data">
        <div class="input-group">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
                <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
            </div>
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Upload</button>
            </div>
        </div>
    </form>
    

    Here is the layout:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>@ViewData["Title"] - GameMonitor</title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css"/>
            <link rel="stylesheet" href="~/css/site.css"/>
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/r-2.2.2/sc-2.0.0/sl-1.3.0/datatables.min.css"/>
    
        </environment>
        <environment exclude="Development">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
                  asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
                  asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"/>
            <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>
        </environment>
    </head>
    <body>
    <nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
        <div class="container">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            </button>
            <a class="navbar-brand" href="/">Game Monitor</a>
            <div class="navbar-collapse collapse" id="navbarSupportedContent">
                <ul class="nav navbar-nav mr-auto">
                    <li class="nav-item">
                        <a asp-area="" asp-controller="GameBanks" asp-action="ImportExcel" class="nav-link">Upload Games</a>
                        
                    </li>
    
                </ul>
                @if (User.Identity.IsAuthenticated)
                {
                    <ul class="nav navbar-nav navbar-right mr-auto">
                        <li>
                            <a>Hello, @User.Identity.Name</a>
                        </li>
                    </ul>
                }
    
    
            </div>
        </div>
    </nav>
    
    <partial name="_CookieConsentPartial"/>
    
    <div class="container body-content">
        @RenderBody()
        <hr/>
        <footer>
            <p>&copy; 2019 - Game Monitor</p>
        </footer>
    </div>
    
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
    
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
    
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>
    
    @RenderSection("Scripts", required: false)
    </body>
    </html>
    

    Wednesday, September 11, 2019 6:16 AM

Answers

  • User-1104215994 posted

    This worked.

    <form method="post"
          asp-action="Upload"
          asp-controller="GameBanks"
          enctype="multipart/form-data">
        <div class="input-group">
            <div class="custom-file">
                <input type="file" class="custom-file-input" name="postedFile" id="postedFile" aria-describedby="inputGroupFileAddon04">
                <label class="custom-file-label" for="postedFile">Choose file</label>
            </div>
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="submit" id="inputGroupFileAddon04">Upload</button>
            </div>
        </div>
    </form>
    @section scripts {
        <script>
            $('#postedFile').on('change',
                function() {
                    //get the file name
                    var fileName = $(this).val();
                    //replace the "Choose a file" label
                    $(this).next('.custom-file-label').html(fileName);
                })
        </script>
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 11, 2019 10:45 AM
  • User475983607 posted

    For others reading this and trying to figure out the changes, the input element was missing the name attribute and the button needs to be a submit type. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 11, 2019 11:02 AM

All replies

  • User-1104215994 posted

    I added this script in order to get and post the file.

    <form method="post"
          asp-action="Upload"
          asp-controller="GameBanks"
          enctype="multipart/form-data">
        <div class="input-group">
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
                <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
            </div>
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="submit" id="postedFile">Upload</button>
            </div>
        </div>
    </form>
    @section scripts {
        <script>
            $('#inputGroupFile04').on('change',
                function() {
                    //get the file name
                    var fileName = $(this).val();
                    //replace the "Choose a file" label
                    $(this).next('.custom-file-label').html(fileName);
                })
        </script>

    But <g class="gr_ gr_53 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="53" data-gr-id="53">postedFile</g> gets null.

    public async Task<IActionResult> Upload(IFormFile postedFile)
            {
                if (postedFile == null || postedFile.Length == 0)
                {
                    return RedirectToAction("ImportExcel");
                }
    ...

    Wednesday, September 11, 2019 7:11 AM
  • User-1104215994 posted

    This worked.

    <form method="post"
          asp-action="Upload"
          asp-controller="GameBanks"
          enctype="multipart/form-data">
        <div class="input-group">
            <div class="custom-file">
                <input type="file" class="custom-file-input" name="postedFile" id="postedFile" aria-describedby="inputGroupFileAddon04">
                <label class="custom-file-label" for="postedFile">Choose file</label>
            </div>
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="submit" id="inputGroupFileAddon04">Upload</button>
            </div>
        </div>
    </form>
    @section scripts {
        <script>
            $('#postedFile').on('change',
                function() {
                    //get the file name
                    var fileName = $(this).val();
                    //replace the "Choose a file" label
                    $(this).next('.custom-file-label').html(fileName);
                })
        </script>
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 11, 2019 10:45 AM
  • User475983607 posted

    For others reading this and trying to figure out the changes, the input element was missing the name attribute and the button needs to be a submit type. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 11, 2019 11:02 AM