locked
How Do I Bind jQuery Generated Images to a Form in a Razor Page? RRS feed

  • Question

  • User-939035612 posted

    I am new to .Net Core and my previous work was with Web Forms. I am trying to bind a jQuery plugin for uploading and previewing multiple image files to a form in a Razor page. The plugin can be found at https://www.codehim.com/demo/jquery-image-uploader-preview-and-delete/ and it works great on the client side, but I am not sure how to bind the images added to it to the from for an insert via Entity Framework.

    A couple issues that complicate the matter include the jQuery plugin working with div elements and not input element, and needing to insert an array of images to an images table with a post id after inserting the post to the posts table.

    Some sample code from my from is as follows:

    <form id="newpost" method="post" enctype="multipart/form-data">
    //Code for Adding a New Post Goes Here
    
    <div class="form-group">
                <div class="input-field">
                    <label class="active">Images</label>
                    <div class="input-images" style="padding-top: .5rem;"></div>
                </div>
            </div>
    <button type="submit" value="Create" class="btn btn-primary">Submit Application</button>
    </form>

    I have found examples for binding file uploads to a database via EF when there is just one file upload. They seem fairly simple, but this is complicated by the fact that I store images in a separate table. I have a posts table with individual post data and then an images table with a foreign key relationship with the posts table on post id, then other fields for image url, image name, and image category. A post can have two types of images. One header image and multiple slideshow images. 

    Tuesday, October 13, 2020 11:35 PM

All replies

  • User-2054057000 posted

    They seem fairly simple, but this is complicated by the fact that I store images in a separate table. I have a posts table with individual post data and then an images table with a foreign key relationship with the posts table on post id, then other fields for image url, image name, and image category. A post can have two types of images. One header image and multiple slideshow images. 

    You can use Reference Navigation Properties to move to a related table to fetch it's records. I suggest you to take a look to Xaero – Entity Framework Core Advanced Project which tells many of the common and advanced EF core techniques including using Reference Navigation Properties.

    Wednesday, October 14, 2020 5:56 AM
  • User-939035612 posted

    It looks like I need to try getting the src attribute values of every image inside the div tag generated by this script. The div tags lack any id or class attributes, but according to my Chrome inspection tool they can all be found in a dynamically generated div that has an class="uploaded" attribute.

    From that I would like have an array of images that I can then run through a foreach loop. In that loop I will create a new IFormFile object, bind the src attribute value minus the "blob:" part to an images table in my DB, and save each image as a file.

    Wednesday, October 28, 2020 11:23 PM
  • User-939035612 posted

    Another problem is that this plugin is not keeping the original file names of the images. Instead it assigns some random GUID. For SEO reasons I need to keep the original file names.

    Wednesday, October 28, 2020 11:51 PM
  • User-939035612 posted

    I am trying to replicate this example https://github.com/dotnet/AspNetCore.Docs/blob/master/aspnetcore/mvc/models/file-uploads/samples/3.x/SampleApp/Pages/BufferedMultipleFileUploadPhysical.cshtml.cs but when I try to replicate the foreach statement it says iformfile does not contain a public instance definition for 'getenumerator'

    The code from the form in the view is as follows:

     <div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
                        <input asp-for="ProductImages" id="uploads" type="file" multiple class="form-control border-0">
                        <label asp-for="ProductImages" id="uploads-label" for="uploads" class="font-weight-light text-muted">Images (Optional)</label>
                        <div class="input-group-append">
                            <label for="uploads" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose files</small></label>
                        </div>
                        <span class="text-danger" asp-validation-for="ProductImages"></span>
                    </div>

    The code behind relevant to this is as follows:

    [BindProperty]
    		[Display(Name = "Images (Optional)")]
    		[DataType(DataType.Upload)]
    		public IFormFile ProductImages { get; set; }
    Then inside of an async task I have 
    
    if(ProductImages != null)
                    {
    					foreach(var productImage in ProductImages)
                        {
    
                        }
                    }
    			}

    Thursday, October 29, 2020 1:43 AM
  • User1312693872 posted

    Hi,CopBlaster

    but when I try to replicate the foreach statement it says iformfile does not contain a public instance definition for 'getenumerator'

    This mistake means you should use List to define the ProductImages because you used the foreach.

    I followed that link and use  List<IFormFile> to define the ProductImages, then mistake will gone.

    [BindProperty]
            [Display(Name = "Images (Optional)")]
            [DataType(DataType.Upload)]
            public List<IFormFile> ProductImages { get; set; }

    Best Regards,

    Jerry Cai

    Wednesday, November 4, 2020 1:27 AM