question

Arnab-7575 avatar image
0 Votes"
Arnab-7575 asked XinranShen-MSFT answered

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

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?




dotnet-aspnet-core-blazordotnet-entity-framework-core
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@ZhiLv-MSFT Plz Can you Take a Look?

0 Votes 0 ·

1 Answer

XinranShen-MSFT avatar image
0 Votes"
XinranShen-MSFT answered

Hi, @Arnab-7575

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:

243385-image.png

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





image.png (38.7 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.