Upload Image and Save to Database in Asp Mvc

Collecting image information or any other file format data is equally important as collecting textual information. Although collecting textual data is more simple than collecting an epitome or whatever other file format data, the choice for storing the image or any other file format data is the most difficult part, but, it entirely depends on ane's business & system requirement.

Today, I shall exist demonstrating uploading of the image file into the database on ASP.Internet MVC5 platform. This article is non specific to image files only, you can apply the provided solution with any type of file format as well.

Before moving to the coding part, let us observe some of the advantages and disadvantages of uploading an image or any other file format information into the database.

Advantages (Pros)

1. Sensitive images or whatsoever other file format data is fully secure as it is only accessible via organization/software. Files are non attainable via links.
2. Storing of the uploaded file is guaranteed.
3. Images/Files shop on database do not require actress backups.
4. Transnational integrity is guaranteed as yous won't be locked into typical reader/author problem and deleting the entry in the database means the file is really deleted, you practise not demand extra precautions to delete the file i.eastward. ensuring that file is deleted from both database and file system.
5. Epitome replication is piece of cake (if needed).
6. In load-balanced spider web servers or distributed environments, dealing with synchronizing images across multiple file systems is hard specially in a spider web application where a new server may exist added whatever fourth dimension.

Disadvantages (Cons)

1. Database storage becomes expensive for many and large file storage.
2. There will be a functioning penalty as latency to retrieve image/file is slower and database lookup is slower than filesystem lookup.
3. Boosted code is needed to extract and stream files.
4. You cannot straight edit the files, especially images files, as you can not direct employ image edit features such equally file resize and file cropping.
5. At that place will be more load on the database.
6. Web server bandwidth will increase which adds additional costs.

Prerequisites

Following are some prerequisites before you proceed whatsoever farther in this tutorial:

1. Cognition of ASP.Net MVC5.
2. Knowledge of HTML.
3. Knowledge of Bootstrap.
4. Cognition of C# Programming.

You tin can download the complete source lawmaking for this tutorial or you can follow the step by step discussion below. The sample code is existence developed in Microsoft Visual Studio 2015 Enterprise.

Let'due south begin now.

Step one

First, create your SQL server database and name it "db_img". Then execute following script into your SQL server database i.e.

1. Apply [db_img]
2. Become
3. /****** Object:  StoredProcedure [dbo].[sp_insert_file]    ScriptEngagement : 11/18/2018 12:27:55 AM ******/
4. DROP Process  [dbo].[sp_insert_file]
5. Become
6. /****** Object:  StoredProcedure [dbo].[sp_get_file_details]    ScriptDate : 11/18/2018 12:27:55 AM ******/
7. Drib PROCEDURE  [dbo].[sp_get_file_details]
8. GO
9. /****** Object:  StoredProcedure [dbo].[sp_get_all_files]    ScriptAppointment : 11/18/2018 12:27:55 AM ******/
10. DROP Procedure  [dbo].[sp_get_all_files]
11. Become
12. /****** Object:Tabular array  [dbo].[tbl_file]    Script Date : 11/18/2018 12:27:55 AM ******/
13. DROP TABLE  [dbo].[tbl_file]
14. Become
15. /****** Object:Table  [dbo].[tbl_file]    Script Engagement : 11/xviii/2018 12:27:55 AM ******/
16. Set up  ANSI_NULLS ON
17. Go
18. Set up  QUOTED_IDENTIFIER ON
19. GO
20. CREATE Tabular array  [dbo].[tbl_file](
21.  [file_id] [int ] IDENTITY(one,1) Not NULL ,
22.  [file_name] [nvarchar](max ) NOT NULL ,
23.  [file_ext] [nvarchar](max ) Not NULL ,
24.  [file_base6] [nvarchar](max ) Non NULL ,
25. CONSTRAINT  [PK_tbl_file] Primary KEY  Clustered
26. (
27.  [file_id]ASC
28. )WITH  (PAD_INDEX = OFF , STATISTICS_NORECOMPUTE = OFF , IGNORE_DUP_KEY = OFF , ALLOW_ROW_LOCKS = ON , ALLOW_PAGE_LOCKS = ON ) ON  [ PRIMARY ]
29. )ON  [ PRIMARY ] TEXTIMAGE_ON [ Primary ]
31. Go
32. /****** Object:  StoredProcedure [dbo].[sp_get_all_files]    ScriptDate : 11/18/2018 12:27:55 AM ******/
33. SET  ANSI_NULLS ON
34. GO
35. SET  QUOTED_IDENTIFIER ON
36. GO
42. CREATE PROCEDURE  [dbo].[sp_get_all_files]
44. AS
45. Begin
46. /****** Scriptfor  SelectTopNRows command from  SSMS  ******/
47. SELECT  [file_id]
48.     ,[file_name]
49.     ,[file_ext]
50. FROM  [db_img].[dbo].[tbl_file]
51. End
53. Go
54. /****** Object:  StoredProcedure [dbo].[sp_get_file_details]    ScriptEngagement : 11/eighteen/2018 12:27:55 AM ******/
55. SET  ANSI_NULLS ON
56. GO
57. SET  QUOTED_IDENTIFIER ON
58. GO
64. CREATE Procedure  [dbo].[sp_get_file_details]
65.  @file_idINT
66. As
67. Brainstorm
68. /****** Scriptfor  SelectTopNRows control from  SSMS  ******/
69. SELECT  [file_id]
70.     ,[file_name]
71.     ,[file_ext]
72.     ,[file_base6]
73. FROM  [db_img].[dbo].[tbl_file]
74. WHERE  [tbl_file].[file_id] = @file_id
75. Cease
77. Go
78. /****** Object:  StoredProcedure [dbo].[sp_insert_file]    ScriptDate : 11/18/2018 12:27:55 AM ******/
79. Gear up  ANSI_NULLS ON
80. Become
81. Fix  QUOTED_IDENTIFIER ON
82. GO
88. CREATE Procedure  [dbo].[sp_insert_file]
89.  @file_name NVARCHAR(MAX ),
90.  @file_ext NVARCHAR(MAX ),
91.  @file_base64 NVARCHAR(MAX )
92. Every bit
93. Begin
94. /****** Scriptfor  SelectTopNRows control from  SSMS  ******/
95. INSERT INTO  [dbo].[tbl_file]
96.            ([file_name]
97.            ,[file_ext]
98.            ,[file_base6])
99. VALUES
100.            (@file_name
101.            ,@file_ext
102.            ,@file_base64)
103. END
105. Become
     

Step 2

Create a new MVC web project and proper name it "ImgSaveDb".

Step 3

Open the "Views->Shared->_Layout.cshtml" file and supervene upon post-obit code in it i.e.:

1. <!DOCTYPE html >
2. < html >
3. < caput >
4. < meta charset = "utf-viii" />
5. < meta name = "viewport" content = "width=device-width, initial-calibration=1.0" >
6. < title > @ViewBag.Championship </ title >
7.     @Styles.Return("~/Content/css")
8.     @Scripts.Render("~/bundles/modernizr")
11. < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-crawly/4.4.0/css/font-awesome.min.css" />
13. </ head >
14. < body >
15. < div class = "navbar navbar-inverse navbar-fixed-top" >
16. < div grade = "container" >
17. < div class = "navbar-header" >
18. < push type = "push" class = "navbar-toggle" data-toggle = "collapse" data-target = ".navbar-collapse" >
19. < span course = "icon-bar" > </ span >
20. < span class = "icon-bar" > </ span >
21. < span class = "icon-bar" > </ bridge >
22. </ push button >
23. </ div >
24. </ div >
25. </ div >
26. < div form = "container body-content" >
27.         @RenderBody()
28. < hour />
29. < footer >
30. < eye >
31. < p > < strong > Copyright © @DateTime.Now.Year - < a href = "http://wwww.asmak9.com/" > Asma's Blog </ a > . </ stiff >  All rights reserved. </ p >
32. </ center >
33. </ footer >
34. </ div >
36.     @*Scripts*@
37.     @Scripts.Render("~/bundles/jquery")
39.     @Scripts.Render("~/bundles/jqueryval")
40.     @Scripts.Return("~/bundles/bootstrap")
42.     @RenderSection("scripts", required: fake)
43. </ body >
44. </ html >
    

In the above lawmaking, I have but created a basic default layout folio and linked the required libraries into it.

Step 4

Create a new "Helper_Code\Objects\ImgObj.cs" file and supervene upon the following code in it i.eastward.:

8. namespace  ImgSaveDb.Helper_Code.Objects
9. {
10. using  System;
11. using  System.Collections.Generic;
12. using  System.Linq;
13. using  System.Web;
18. public class  ImgObj
19.     {
20.         #region Backdrop
25. public int  FileId { become ; set ; }
30. public string  FileName { get ; set ; }
35. public string  FileContentType { get ; set ; }
37.         

Share this post