User-2006371901 posted
I'm trying to integrate a fileupload module and input box to my CRUD operation in a .net3.1 Blazor app, it works on another vs project .netcore3.1 i have tested, but with the one in question, the input box is not receiving the user input nor is the control
not firing when you click on the Browse button to look in users FileManager to choose a file/graphic. All the namespaces are correct, and the CarsViewModel.cs is assigned the correct way with Pic property being an IFormFile model type. The form action must
reside in the _Host.cshtml template, as that's the layout page.
////////////////_Host.cshtml:
<body>
<app>
<component
type="typeof(App)"
render-mode="ServerPrerendered"
/>
</app>
<!--try form call for upload integ. here-->
<form
enctype="multipart/form-data"
asp
-
action="_Host">
<div
id="blazor-error-ui">
<environment
include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment
include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a
href=""
class="reload">Reload</a>
<a
class="dismiss"></a>
</div>
@section
scripts{
<script
type="text/javascript">
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change",
function
() {
var
fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
}
<!-- -->
<script
src="_framework/blazor.server.js"></script>
</form>
<!-- -->
</body>
/////*
FetchData.razor, section of the form that houses one of the inputs (one accepting input for a Price)
and the input for the file upload with custom-file-input bootstrap class */
<h6
style="font-weight:700;">Price</h6>
<input
class="form-control"
type="text"
placeholder="Price"
@bind="objCarInventorySho.PriceCurr"
/>
@*
profilepic input module here*@
<h6
style="font-weight:700;">Pic</h6>
<div
class="custom-file">
<input
asp-for="Pic"
class="custom-file-input"
id="customFile"
@bind="objCarInventorySho.ProfilePicture">
<label
class="custom-file-label"
for="customFile">Choose
file</label>
</div>
/////////////////////
FetchData.razor.cs
method
/// profilepicture fileupload
integ.try making this public instead of private
public
string UploadedFile(CarViewModel
car)
{
string
uniqueFileName = null;
if
(car.Pic != null)
{
string
uploadsFolder = Path.Combine(webHostEnvironment.WebRootPath, "carpics");
uniqueFileName = Guid.NewGuid().ToString() +
"_" + car.Pic.FileName;
string
filePath = Path.Combine(uploadsFolder, uniqueFileName);
using
(var fileStream
= new FileStream(filePath,
FileMode.Create))
{
car.Pic.CopyTo(fileStream);
}
}
return
uniqueFileName;
}
///
/////////////////////
CarViewModel.cs
using
System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
/// for upload integ.
using Microsoft.AspNetCore.Http;
namespace EndToEnd.Data.EndToEnd
{
public
class
CarViewModel
{
public
IFormFile Pic { get;
set; }
}
}
??
thanks in advance for all help/suggests
Ned
