Download files Introduction
Is image uploading different from simply file uploading? No, but when creating an image uploading functionality you usually have to perform more operation, than if you application were to receive text files only. Basically, when making an image uploading form, you have to implement the following things:
- Check if the uploaded file is an image
- Check if the uploaded file doesn't exceed a certain size
- Resize the uploaded images without changing the proportions of the picture
- Save the image
In this particular tutorial, I'll tell you how to perform the 3 operations, while I'll explain how to check the file size in the next part.
Form
First, we need to create a form where a user can pick up a file to upload. This form must accept files, thus the enctype attribute should be "multipart/form-data". We can set it directly in the .aspx file.
<form id="form1" runat="server" enctype="multipart/form-data">
However, if we have a master page, we don't probably want it always to have that enctype value, so in this case, we can set it in the code-behind of a particular form:
protected void Page_Load(object sender, EventArgs e)
{
Form.Enctype = "multipart/form-data";
}
Then, we need to create a form element that is used for choosing a file, this element is a simply HTML input with type="file" and runat="server":
<input id="fileImage" runat="server" type="file" />
After that, we add a CustomValidator that will validate the file type and a submit button:
<asp:CustomValidator ID="valFileType" runat="server"
ErrorMessage="This isn't not an image"
onservervalidate="valFileType_ServerValidate" /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Upload"
onclick="btnSubmit_Click" />
Validation
Since, we cannot access the file input with JavaScript, we can perform only server-side validation. There are two ways of validating the file type, the first one is to check the extension and the second one is to check the mime/type. The first one isn't very reliable, because a smart user can change the file extension, besides there are lot of extensions of JPEG images - .jpg, .jpeg, .jpe, while the mime/type is the only - "image/jpeg". So, we'll be using the second way, i.e. we will be checking the mime type. Here is the code we should write:
protected void valFileType_ServerValidate(object source, ServerValidateEventArgs args)
{
string[] acceptedTypes = new string[]
{
"image/bmp",
"image/jpeg",
"image/tiff",
"image/gif",
"image/png"
};
if (!acceptedTypes.Contains(fileImage.PostedFile.ContentType))
{
args.IsValid = false;
}
}
There is an interesting thing in this code, we use the Contains() extension method, that checks if a string belongs to a collection.
Processing Image Upload
In order to process image uploading we should simply add some code to the submit button click event handler:
protected void btnSubmit_Click(object sender, EventArgs e)
{
if (IsValid)
{
Bitmap image = ResizeImage(fileImage.PostedFile.InputStream, 200, 400);
image.Save(Server.MapPath("~/Photos/") + Guid.NewGuid().ToString() + ".jpg", ImageFormat.Jpeg);
}
}
Here we invoke the ResizeImage() method (we will write it later) that accepts the input stream and the size constrains, i.e., the maximum allowed image with and the maximum allowed image height.
Resizing
This is the most interesting part of the tutorial. We won't simply resize images, but we also retain their proportions. Here is the code:
private Bitmap ResizeImage(Stream streamImage, int maxWidth, int maxHeight)
{
Bitmap originalImage = new Bitmap(streamImage);
int newWidth = originalImage.Width;
int newHeight = originalImage.Height;
double aspectRatio = (double)originalImage.Width / (double)originalImage.Height;
if (aspectRatio <= 1)
{
newWidth = maxWidth;
newHeight = (int)Math.Round(newWidth / aspectRatio);
}
else
{
newHeight = maxHeight;
newWidth =
newWidth = (int)Math.Round(newHeight * aspectRatio);
}
return new Bitmap(originalImage, newWidth, newHeight);
}
Now, you can compile the project and test it by uploading some of new images and seeing the resized ones on the server.
Conclusion
Image uploading is very common problem. ASP.NET provides great tools for developers to accomplishing this task. In the next part, I'll show you how to validate the file size that can be very tricky sometimes.
Download files