Yes I know both solution. My suggestion is to use the second one because the first one take a lot of memory resources.
We need to validate 4 things:
Make sure the user upload something
Make sure the user upload an image (.gif or .jpg or .png)
Make sure the user upload an image not more than 20kb
Make sure the user upload an image with a width not more than 50px and height not more than 50px
The 20kb and 50px are just examples, you can change those values.
Now you need to decide the name of the uploaded image. Because your forum users must be authenticated to edit their profile and upload image and because the image name must be unique, my suggestion is to use their username using "User.Identity.Name", this will create something like:
Curt.gif
toto.gif
Sam.jpg
Or you can update their profile in your database using the Guid to create a random 6 char, this will create something like:
9c8225.gif
abg3ue.jpg
7fk28s.gif
Here is below the variable fileNameOnServer for both above solutions, choose the solution that you prefer:
string fileNameOnServer = Guid.NewGuid().ToString().Substring(0, 6) + fileExtension;
string fileNameOnServer = User.Identity.Name.ToString() + fileExtension;
In the below code, edit the folder path using the serverPath variable:
string serverPath = Server.MapPath("avatars/");
I made the code in C#, just let me know if you prefer vb.net
<%@ Page Language="C#" %>
<%@ import Namespace="System.IO" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btUpload_Click(object sender, EventArgs e)
{
//Make sure the user upload something
if (FileUpload1.HasFile)
{
string serverPath = Server.MapPath("avatars/");
string fileToUpload = FileUpload1.PostedFile.FileName;
string fileExtension = Path.GetExtension(fileToUpload);
string fileNameOnServer = Guid.NewGuid().ToString().Substring(0, 6) + fileExtension;
//string fileNameOnServer = User.Identity.Name.ToString() + fileExtension;
string fileContentType = FileUpload1.PostedFile.ContentType;
int fileSize = FileUpload1.PostedFile.ContentLength;
//Make sure the user upload an image (.gif or .jpg or .png)
if (fileContentType.ToLower().IndexOf("image") == -1)
{
string errMsg = "Error, only .gif .jpg or .png are allowed.";
lblMsg.Attributes.Add("style", "color:Red;");
lblMsg.Text = errMsg;
AlertMsg.Display(this.Page, "ErrorContentType", errMsg);
return;
}
//Make sure the user upload an image not more than 20kb
if (fileSize > 20000)
{
string errMsg = "Error, 20 kb maximum.";
lblMsg.Attributes.Add("style", "color:Red;");
lblMsg.Text = errMsg;
AlertMsg.Display(this.Page, "ErrorContentLength", errMsg);
return;
}
try
{
FileUpload1.SaveAs(serverPath + fileNameOnServer);
}
catch (Exception ex)
{
lblMsg.Attributes.Add("style", "color:Red;");
lblMsg.Text = ex.Message.ToString();
AlertMsg.Display(this.Page, "ErrorException", ex.Message.ToString());
}
System.Drawing.Image img;
System.IO.FileStream fs = new System.IO.FileStream(serverPath + fileNameOnServer, System.IO.FileMode.Open);
img = System.Drawing.Image.FromStream(fs);
fs.Close();
int width = img.Width;
int height = img.Height;
//Make sure the user upload an image with a width not more than 50px
//and height not more than 50px
if (width > 50 | height > 50)
{
string errMsg = "Error, your image must be 50px X 50px maximum.";
lblMsg.Attributes.Add("style", "color:Red;");
lblMsg.Text = errMsg;
AlertMsg.Display(this.Page, "ErrorContentLength", errMsg);
FileInfo f;
f = new FileInfo(serverPath + fileNameOnServer);
f.Delete();
return;
}
lblMsg.Attributes.Add("style", "color:Black;");
lblMsg.Text = "We received your image, thank you!";
}
else
{
string errMsg = "Error, Please browse and select a file to upload.";
lblMsg.Attributes.Add("style", "color:Red;");
lblMsg.Text = errMsg;
AlertMsg.Display(this.Page, "ErrorEmpty", errMsg);
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Upload Image</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" AlternateText="You cannot upload files" />
<asp:Button ID="btUpload" runat="server" OnClick="btUpload_Click" Text="Upload" />
<br />
<asp:Label ID="lblMsg" runat="server" Font-Bold="True"></asp:Label>
</div>
</form>
</body>
</html>
I added the below class utility AlertMsg.cs to display javascript alert message. You need to create a folder "App_Code" and place that file inside that folder:
AlertMsg.cs
using System.Text;
public class AlertMsg
{
public static void Display(System.Web.UI.Page aspxPage, string strKey, string msg)
{
string strUniqueScriptName = strKey;
StringBuilder OutputString = new StringBuilder();
OutputString.Append("<script type=\"text/javascript\">" + "\n");
OutputString.Append("<!--" + "\n");
OutputString.Append("alert('" + msg + "');" + "\n");
OutputString.Append("//-->" + "\n");
OutputString.Append("</script>" + "\n");
if (aspxPage.IsPostBack & !(aspxPage.ClientScript.IsStartupScriptRegistered(strUniqueScriptName)))
{
aspxPage.ClientScript.RegisterStartupScript(aspxPage.GetType(), strUniqueScriptName, OutputString.ToString());
}
}
}