Bootstrap 4 custom file input problem
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>© 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>
