locked
.netCore FileUpload with IFormFile , input box not grabbing user data RRS feed

  • Question

  • 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




    Monday, June 22, 2020 5:57 PM

All replies