Uploading Image With ASP.NET(Razor-WebImage)

In Uploading File In ASP.NET(Razor) post i explained how to upload file in asp.net. File means any thing even image file also. Today's post i will explain how to upload images in ASP.NET web app. But this time instead of using FileUpload helper. We will use WebImage helper. You may think why WebImage?
WebImage is a special helper to manipulate Images on Web. We can do different operations like flipping, cropping, re-sizing, watermarking,etc.. with this WebImage helper. I will write how to do these operations in later posts. In today's post we will only focus on how to upload an image in ASP.NET with the help of web image helper.
Uploading Image With ASP.NET(Razor-WebImage).png "Uploading Image With ASP.NET(Razor-WebImage)")

You need to install Visual studio Express for web 2012 for this post. You can download it for free from http://www.microsoft.com/visualstudio/eng/downloads.
I am assuming you have installed Visual studio Express for web 2012. Now follow the following steps.
1)Open your VS Express For Web(go all programs search for vs express for web).
2)Create a New Web Site Under File Menu.
Uploading Image With ASP.NET(Razor-WebImage) 3)Add New Content Page(Razor v2) to website and name it as uploadimage.cshtml.
Uploading Image With ASP.NET(Razor-WebImage) 4)Right Click on your website and select Manage Nuget Packages.
Uploading Image With ASP.NET(Razor-WebImage) 5)Search with keyword helper in top right search box, from the result install ASP.NET Web Helper Library
Uploading Image With ASP.NET(Razor-WebImage) 6)Next step it will ask for Licence Acceptance, You have to click on I agree button.
Uploading Image With ASP.NET(Razor-WebImage) 7)Now open your uploadimage.cshtml and copy past the following code.

@{ 
Page.Title = "Image Upload using WebImage Helper";  
Layout = "~/_SiteLayout.cshtml";  
var path = "";  
if (IsPost)  
{ 
WebImage photo = WebImage.GetImageFromRequest();  
if (photo != null)  
{ 
var imgname =Path.GetFileName(photo.FileName);  
path = @"Uploads\" + imgname;  
photo.Save(@"~\" + path);  
} 
} 
} 

<div>  
<h1>Upload Image</h1>  
<form action="" method="post" enctype="multipart/form-data">  
<fieldset>  
<legend> Upload Image </legend>  
<label for="Image">Image</label>  
<input type="file" name="Image" />  
<br/>  
<input type="submit" value="Submit" />  
</fieldset>  
</form>  
@if(path != ""){ 
<div class="result">  
<img src="@path" alt="Thumbnail image" />  
</div>  
} 
</div> 

8)Final output is as below.
Uploading Image With ASP.NET(Razor-WebImage)

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.