How To Upload multiple pics At a time in Asp.net core razor pages and save It to Database?

Question

Making a form in EF core Razor pages. I did the file uploading thing from below link reference .But I want to choose multiple JPEG file only at a time. What to change or implement In this code?

upload-image-to-aspnet-razor-page.html
This is the link from where I took reference but I want to Upload multiple pic At a time and it will select only JPEG format while browsing .How do I do that?

Answer 1

Hi, @Arnab

Here is a simple demo about how to upload multiple images in Razor Page, You can refer to it.

Model:

public class AppFile  
    {  
        public int Id { get; set; }  
        public string FileName { get; set; }  
        public byte[] Content { get; set; }  
    }  

public class FileViewModel  
    {  
        public List<IFormFile> FormFile { get; set; }  
    }  

DbContext:

public class ApplicationDbContext: DbContext  
    {  
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options) : base(options)  
        {  
  
        }  
  
        public DbSet<AppFile> File { get; set; }  
    }  

Index.cshtml.cs:

public class IndexModel : PageModel  
    {  
        private readonly ILogger<IndexModel> _logger;  
        private readonly ApplicationDbContext _context;  
        
         
  
        public IndexModel(ILogger<IndexModel> logger, ApplicationDbContext context)  
        {  
            _logger = logger;  
            _context = context;  
        }  
      
  
        [BindProperty]  
        public FileViewModel uploadfile{ get; set; }  
  
          
  
        public void OnGet()  
        {  
  
        }  
  
        public async Task<IActionResult> OnPostAsync()  
        {  
              
            //..other code....  
            foreach (var file in uploadfile.FormFile)  
            {  
                if (file.Length>0)  
                {  
                    using (var memorySteam = new MemoryStream())  
                    {  
                        await file.CopyToAsync(memorySteam);  
                          
                            var File = new AppFile()  
                            {  
                                FileName = file.FileName,  
                                Content = memorySteam.ToArray()  
                            };  
                            _context.File.Add(File);  
                            await _context.SaveChangesAsync();  
                         
                    }  
                }  
                 
            }  
  
            return Page();  
        }  
}  

Index.cshtml:

Now, When you select multiple images and click upload, The Images will be saved into Database.

-----------------------------------------------------------------------------------------------------------------

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Xinran Shen