locked
Where Can I Find a Multi Image Upload with Previews Plugin for ASP.Net Core RRS feed

  • Question

  • User-939035612 posted

    I originally posted this question on Stack Overflow but they deleted it saying "We don’t allow questions seeking recommendations for books, tools, software libraries, and more. Edit the question so it can be answered with facts and citations" That question was as follows:

    I am trying to replicate the functionality of this plugin https://www.codehim.com/demo/jquery-image-uploader-preview-and-delete/ in an ASP.Net Core web application, but with some slight changes. I need the ability to add a unique name to each image, the file uploaded to the file system should preserve its original filename unless one with the same name already exists in which case the last character before the file extension is changed to a unique integer, and each image needs to be bound to a new entry in an EF model that is bound to a table used to store image data in a database.

    Saving the images to the file system using AJAX, jQuery, etc. is not an option because the plugin needs to be added to a larger form used to add articles to a website by creating new entries in a SQL Server database that stores articles. I already have a feature for saving a single image in the form which I use for header images, but now I need something that can be used to add multiple images by dragging, dropping, and inserting a name for each image.

    If the plugin I cited as an example were sufficient each new image would also come with a little input to type in an image name, the file names would not be changed to random GUIDs, and each pair of images/inputs would have unique ids that could be retrieved, used to create new IFormFile objects within an array, and also save values like file name, image name, etc. in the images table.

    Thursday, October 29, 2020 1:46 AM

All replies

  • User1312693872 posted

    Hi,CopBlaster

    I need the ability to add a unique name to each image, the file uploaded to the file system should preserve its original filename unless one with the same name already exists in which case the last character before the file extension is changed to a unique integer, and each image needs to be bound to a new entry in an EF model that is bound to a table used to store image data in a database.

    You can store the file to the database like 'fileID,  fileName,  fileOriginalName' . The fileName is used to prevent conflicts between files with the same name. fileName can use GUID to get a unique name like 'filename.txt' to 'filename_03af7e7b-8fe8-4559-b98d-0f057ca92f11.txt'. Then reflect the fileName to the fileOriginName, so it can display 'filename.txt' to users. 

    Best Regards,

    Jerry Cai

    Friday, October 30, 2020 5:35 AM
  • User-939035612 posted

    Thanks, I'm working on a solution that seems work so far. Will update when done. I decided not use GUID for the unique image name because that creates a really long and ugly file name. Instead I check to file systems to see if a file name matches and if there is a hyphen followed by an integer is appended to the file name right before the extension. That integer increases by one if the match already has an integer appended:

    string fileext = Path.GetExtension(HeaderImage.FileName);
    					string uniqueFileName = linkgenerator.newimgname(himgname) + fileext;
    					string filePath = Path.Combine(uploadsFolder, uniqueFileName);
    					int itr = 1;
    					while (System.IO.File.Exists(filePath))
    					{
    						uniqueFileName = string.Concat(linkgenerator.newimgname(himgname), "-", itr, fileext);
    						filePath = Path.Combine(uploadsFolder, uniqueFileName);
    						itr += 1;
    					}

    Sunday, November 1, 2020 1:25 AM
  • User-939035612 posted

    Seems like the biggest problem I have at this point is validation. I have a regex that blocks files without the right extension, but it only works on single files. If I have multiple files and any one of them is valid then it considers them all to be valid. Apparently the RegularExpression annotation does not validate every single file individually.

    [BindProperty]
    		[Display(Name = "Images (Optional):")]
    		[DataType(DataType.Upload)]
    		[RegularExpression(@"([a-zA-Z0-9\s_\\.\-:])+(.png|.jpg|.gif}.jpeg|.bmp)$", ErrorMessage = "Invalid File Extension: Must Be .jpg, .jpeg, .png, .gif, or .bmp!")]
    		public List<IFormFile> FormFiles { get; set; }

    Sunday, November 1, 2020 3:09 AM