Image Uploading in ManageCategories.aspx

alfinmass · August 21st, 2009, 12:06 PM

The design of the functionality for the image uploading in the categories management page baffles me. We have a text box for the image url and separately a file uploader user control. So we can do the file upload and then we have to copy and paste the url into the text box?

Hey, I'm a Spaniard, you know we're lazy by nature, so that seemed like a lot of work to me. Why not just have the url show in the text box once the file is succesfully uploaded? I still don't know why we couldn't have the file uploader in the Image part of the details view control, but hey, at least this would be taken care of.

So my solution was to create an event in the file uploader user control that would be called from the upload button click event once the file was uploaded. To do that I created a delegate and the event. At the same time, I created a public property in the user control to hold the fileUrl. Then in the ManageCategories page I handled the event by setting the text property of the txtImageUrl control to the FileUrl property from the control.

The code for the control event creation is the following:

Code:

public delegate void FileUploadedEventHandler(object sender, EventArgs e);

public partial class FileUploader : System.Web.UI.UserControl
{
	private string _fileUrl = String.Empty;
	public string FileUrl
	{
		get { return _fileUrl; }
		private set { _fileUrl = value; }
	}

	public event FileUploadedEventHandler FileUploaded;
        ....... // Other code
}

The code for the btnUpload OnClick event handler within the File Uploader user control would be

Code:

protected void btnUpload_Click(object sender, EventArgs e)
{
	if (filUpload.PostedFile != null && filUpload.PostedFile.ContentLength > 0)
	{
		try
		{
			// Create the folder if it doesn't exist.
			string dirUrl = String.Format("{0}Uploads/{1}", ((BasePage)this.Page).BaseUrl, this.Page.User.Identity.Name);
			string dirPath = Server.MapPath(dirUrl);
			if (!Directory.Exists(dirPath))
				Directory.CreateDirectory(dirPath);
			string fileUrl = String.Format("{0}/{1}", dirUrl, Path.GetFileName(filUpload.PostedFile.FileName));
			filUpload.PostedFile.SaveAs(Server.MapPath(fileUrl));
			this.FileUrl = fileUrl;

			lblFeedbackOK.Visible = true;
			lblFeedbackOK.Text = String.Format("File successfully uploaded: {0}", fileUrl);

			if (FileUploaded != null)
				FileUploaded(this, e);
		}
		catch (Exception exc)
		{
			lblFeedbackKO.Visible = true;
			lblFeedbackKO.Text = exc.Message;
		}
	}
}

Finally in the ManageCategories Page the event handler for the FileUploaded event:

Code:

protected void filUpload_FileUploaded(object sender, EventArgs e)
{
	((TextBox)dvwCategory.FindControl("txtImageUrl")).Text = filUpload.FileUrl;
}

Let me know if you have an easier way of handling this. I was wondering if creating a custom web event and raising it... but I'm not really sure how that works.

alfinmass · August 21st, 2009, 03:29 PM

I went a step further with this and instead of counting on a control's property, I created a specific event arguments class for this event called FileUploadEventArgs that descends from Event Args. That way what i do is have the property in that object and pass it along to the event handler. Somehow this seemed more appropriate.

The arguments class:

Code:

/// <summary>
/// Class to contain file uploading event data.
/// </summary>
public class FileUploadEventArgs : EventArgs
{
	private string _fileUrl;
	/// <summary>
	/// Gets the uploaded file's URL.
	/// </summary>
	public string FileUrl
	{
		get { return _fileUrl; }
		private set { _fileUrl = value; }
	}

	public FileUploadEventArgs(string fileUrl)
	{
		this.FileUrl = fileUrl;
	}
}

I removed the FileUrl property related code in the FileUploader code behind file (definition of the property and setting its value in the btnUpload_Click event handler). The call to the event in the btnUpload_Click event handler is now

Code:

if (FileUploaded != null)
	FileUploaded(this, new FileUploadEventArgs(fileUrl));

Finally in filUpload_FileUploaded event handler I call the property of the FileUploadEventArgs object I passed, instead of the property from the control (which I removed).

Code:

protected void filUpload_FileUploaded(object sender, FileUploadEventArgs e)
{
	((TextBox)dvwCategory.FindControl("txtImageUrl")).Text = e.FileUrl;
}

Since I created the FileUploadEventArgs in the same namespace than the FileUploader user control, I had to add using MB.TheBeerHouse.UI.Controls to the top of the ManageCategories code behind file.

yevi · August 26th, 2009, 04:20 PM

Great solution,
I've implemented similar module and, as you suggested, made it a part of details view control.

To be more specific, upload button in the details view near the image url text box, clicking on it will show a popup frame where you upload the file, with rotating animated gif to show the use that something is happening.

After that it sends an event to fill the textbox in details view control.

alfinmass · August 28th, 2009, 10:28 AM

Yes I agree completely with you that the file uploader should be within the details view. It just beats me why it isn't. Another suggestion is to include an image in the details view that will be visible if there is a value to the path. At the same time with Ajax, you can even include the animated gif on the right of the file uploader control instead than in a popup.

So basically what would happen would be that you click on the browse button to select the image, when you click on the upload button it will first show the rotating gif, then save the file, show the loaded image in the image control and hide the rotating gif. I wonder if that would work nicely.

One other thing that I don't understand why the author does not suggest is to check for the uploaded file type before saving it in the server. We are expecting image types, so we could at least if the mime type of the uploaded file is what we're expecting.

Best!!!

yevi · September 1st, 2009, 11:15 AM

This is how i implement it: http://aspspider.info/yevis/admin/testing.aspx

It's not a final solution (it has some bugs and need some improvements), i just try different things.

(This is demo so no files are actually uploaded and database can't be altered )