Angular 8 to upload an image file (jpg, etc,) - a second approach - sql

Question

I want to use Angular 8 with an Asp.Net Web Api to upload an image file and store it into a SQL server database table where the image column is defined as varbinary(max).
Note: I can do this using an ASP.Net web form just fine - it adds the image and I can display it accordingly. (I included the adding of the image code below). So I am trying to mimic that web form upload but using Angular as the front-end.
For uploading a file in Angular 8, I used this advice: https://www.academind.com/learn/angular/snippets/angular-image-upload-made-easy/
I send the selected image file to the Web Api as binary.
After clicking the button, I get an error on the server-side.
Http failure response for http://localhost:50454/Api/Image/AddImage/: 500 Internal Server Error. Body was: [object Object]
I am able to make the selected image file appear on the page.
Here is all the code. Note: not all the code is included for simplicity.
My SQL server table definition - where by the image is defined as varbinary:
CREATE TABLE [dbo].[tblImages]
(
[ImageId] [int] IDENTITY(1,1) NOT NULL,
[ImageData] [varbinary](max) NOT NULL
CONSTRAINT [PK_Image] PRIMARY KEY CLUSTERED
(
[ImageId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
My SQL server insert stored procedure:
CREATE procedure [dbo].[InsertImages]
#ImageData varbinary(max)
AS
BEGIN
SET NOCOUNT ON;
INSERT INTO dbo.tblImages (
ImageData )
VALUES (
#ImageData )
RETURN 0
END
The Angular html:
<input type="file" (change)="onFileChanged($event)">
<img [src]="imgURL" height="200" *ngIf="imgURL">
The Angular component method code:
onFileChanged(event) {
// Get the file selected.
const selectedFile = event.target.files[0];
// To display the selected image before deciding to upload it.
let reader = new FileReader();
// Gets a 'base64' representation of an image.
reader.readAsDataURL(event.target.files[0]);
reader.onload = (event2) => {
// Sets the html <img> tag to the image.
this.imgURL = reader.result;
};
// Call the service to use the web api to add the image to the database.
this.imageService.addImage(selectedFile).subscribe(
event => {
console.log(event);
});
}
My Angular Image service method:
private data: any;
// The Asp.Net Web Api endpoint.
url = "http://localhost:50454/Api/Image";
addImage(image: Image): Observable<Image> {
const httpOptions = {
headers: new HttpHeaders({ "Content-Type": "application/json" })
};
// Call the ASP.NET 2.1 MVC Web API.
return this.http
.post<Image>(this.url + "/AddImage/", image, httpOptions)
.pipe(
tap(data => data),
catchError(this.handleError)
);
}
My Angular Model class:
export class Image {
ImageData: Binary[]; <--- Is this correct?
}
My Asp.Net Web Api data model:
namespace PrototypeWebApi2.Models
{
public class Image
{
public byte[] ImageData { get; set; } <--- Is this correct?
}
}
My Asp.Net Web Api method:
[HttpPost]
[Route("AddImage")]
public IHttpActionResult PostImage(Image data)
{
try
{
return Ok(dataaccesslayer.AddImage(data));
}
catch (Exception)
{
throw;
}
}
My Asp.Net Web Api data access layer method:
public int AddImage(Image image)
{
try
{
using (SqlConnection con = new SqlConnection(connectionString))
{
SqlCommand cmd = new SqlCommand("InsertImages", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Clear();
cmd.Parameters.AddWithValue("#ImageData", image.ImageData);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
return 1;
}
catch
{
throw;
}
}
My Asp.Net Web form code that uploads an image file and works fine:
HTML:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AdminPage.aspx.cs" Inherits="Media.Admin.AdminPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<h1>Administration</h1>
<hr />
<h3>Add Image:</h3>
<table>
<tr>
<td><asp:Label ID="LabelAddImageFile" runat="server">Image File:</asp:Label></td>
<td>
<asp:FileUpload ID="MediaUploadFile" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Text="* Image file path required." ControlToValidate="MediaUploadFile" SetFocusOnError="true" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
<p></p>
<asp:Button ID="AddMediaButton" runat="server" Text="Add Media" OnClick="AddMediaButton_Click" CausesValidation="true" CssClass="btn btn-primary"/>
<asp:Label ID="LabelAddStatus" runat="server" Text=""></asp:Label>
<p></p>
</asp:Content>
Code behind:
protected void AddMediaButton_Click(object sender, EventArgs e)
{
string strErrorMessage = "";
string fileExtension = "";
int fileSize = 0;
Boolean fileOK = false;
// Get the image file that was selected. References the ASP.Net control.
HttpPostedFile postedFile = MediaUploadFile.PostedFile;
fileExtension = Path.GetExtension(fileName).ToLower();
....
if (fileOK)
{
Stream stream = postedFile.InputStream;
BinaryReader binaryReader = new BinaryReader(stream);
// Read the file into a array of bytes.
Byte[] bytes = binaryReader.ReadBytes((int)stream.Length);
try
{
....
cmd.Parameters.Add("#ImageData", SqlDbType.VarBinary).Value = bytes;
cmd.ExecuteNonQuery();
.....
}
catch (Exception ex)
{
}
finally
{
dbFunc.CloseDB();
}
}
else
{
....
}
}

Answer 1

The object type that you pull from event.target.files[0] is File but you pass it into the addImage function which expects an Image type. I'm guessing its assumed to be any so Typescript doesn't catch the mismatch.
Next, when posting the file to the server I've always had better success using a FormData object.
uploadFiles(files: File[]) {
const formData = new FormData();
files.forEach(file => {
formData.append(file.name, file, file.name);
});
return this.http.post(`/api/files`, formData);
}
Angular's HttpClient service automatically set Content-Type: multipart/form-data header for that.
Then on the WebApi side I use System.Web.HttpContext.Current.Request.Files to access the actual file binaries. From there you should be able to use some form of IO.Stream to save the file.
Hope this helps!

Answer 2

This is confused and has errors on passing data
1) you have missed "this" key word for selectedFile.
2)Form submitting must be done inside onSubmit() method but no in onChanged() method.
3) Parameters have used to catch a formData in service method is wrong.
Change the variable type as followa
selectedFile: any;
Change the codes as follows
onSubmit(){
let form = new FormData;
form.append("ImageData", this.selectedFile, this.selectedFile.name);
this.imageService.addImage(form).subscribe(
event => {
console.log(event);
});
}
Service method as,
addImage(image: FormData): Observable<Image> { //changed
const httpOptions = {
headers: new HttpHeaders({ "Content-Type": "application/json" })
};
// Call the ASP.NET 2.1 MVC Web API.
return this.http
.post<Image>(this.url + "/AddImage/", image, httpOptions)
.pipe(
tap(data => data),
catchError(this.handleError)
);
}
Export class
export class Image {
selectedFile: string; <--- Is this correct?
}
in ASP.net,
namespace PrototypeWebApi2.Models
{
public class Image
{
public byte[] selectedFile { get; set; } <--- name changed
}
}
And finally change the queries according to this changed property name.