Hello,

 I am trying to use the FileImage API instead of DBImage. Did anyone used the FileImage? I am having problem with the FileImage_Edit field templates? If anyone can share their code for this user control I will be grateful.

Thanks,

Hi Tareq,

Please see this post Sample for Displaying Images from the Database using Dynamic Data by Scott Hunter (bear in mind that this is an old post and some of the Attributes have changed name and parameters)

Here is my metadata class for the table FileImageTest

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using Microsoft.Web.DynamicData;

[MetadataType(typeof(FileImageTestMD))]
public partial class FileImageTest : INotifyPropertyChanging, INotifyPropertyChanged
{
}
public class FileImageTestMD
{
	public object Id {get;set;}
	public object Description {get;set;}
	[UIHint("FileImage")]
	[ImageUrl("~/images/{0}.png")] 
	[ImageFormat(50,50)]
	public object filePath {get;set;}
}

Note: that there is NO edit facility in the FileImage at the moment. I've had an idea and will have a go and publish here and on my blog.

Another Note: there are two methods to do the edit:

1. Give a list of images from the specified folder [ImageUrl("~/images/{0}.png")] and let the user choose
2. Let the user upload the file to the [ImageUrl("~/images/{0}.png")] folder and the pass the filename to the DB field.

Hope this helps

Thank you for your response. I have already implemented displaying image  using FileImage as suggested in Scott Hunters Blog. It is the edit part that I am trying to figure out. If you have the edit functionality I would like to see that.

Thanks

I'm just working on it now hopefully I will have it soon to show you

sjnaughton:

Another Note: there are two methods to do the edit:

1. Give a list of images from the specified folder [ImageUrl("~/images/{0}.png")] and let the user choose
2. Let the user upload the file to the [ImageUrl("~/images/{0}.png")] folder and the pass the filename to the DB field.

This is option 1.

using System;
using System.Collections.Specialized;
using System.IO;
using System.Linq;
using System.Web.DynamicData;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.Web.DynamicData;

public partial class FileImage_Edit : FieldTemplateUserControl
{
	public override Control DataControl
	{
		get
		{
			return RadioButtonList1;
		}
	}

	protected override void OnDataBinding(EventArgs e)
	{
		base.OnDataBinding(e);

		//check if image exists
		if (FieldValue == null)
			return;

		//format image url
		string url;
		var metadata = MetadataAttributes.OfType<ImageUrlAttribute>().FirstOrDefault();
		if (metadata == null || String.IsNullOrEmpty(metadata.UrlFormat))
			return;

		// get images folder
		String imagesDir = metadata.UrlFormat.Substring(0, metadata.UrlFormat.LastIndexOf("/") + 1);

		// get a list of images in the ImageUrlAttribute folder
		var dirInfo = new DirectoryInfo(Server.MapPath(imagesDir));
		var imagesFolder = ResolveUrl(imagesDir);
		var files = dirInfo.GetFiles();


		int width = 50;
		int height = 50;
		var imageFormat = MetadataAttributes.OfType<ImageFormatAttribute>().FirstOrDefault();

		if (imageFormat != null)
		{
			width = imageFormat.DisplayWidth;
			height = imageFormat.DisplayHeight;
		}

		foreach (FileInfo file in files)
		{
			String fileName = file.Name.Substring(0, file.Name.LastIndexOf("."));
			String img = String.Format
				(
					"<img src='{0}' alt='{1}' width='{2}' height='{3}' />",
					imagesFolder + file.Name,
					fileName,
					width,
					height
				);
			var li = new ListItem(img, fileName);
			this.RadioButtonList1.Items.Add(li);
		}
	}

	protected override void ExtractValues(IOrderedDictionary dictionary)
	{
		dictionary[Column.Name] = RadioButtonList1.SelectedValue;
	}

	protected void RadioButtonList1_DataBound(object sender, EventArgs e)
	{
		if (FieldValue != null)
		{
			var selectedImage = ((String)FieldValue).Substring(0, ((String)FieldValue).LastIndexOf("."));

			for (int i = 0; i < RadioButtonList1.Items.Count; i++)
			{
				// set select image 
				if (selectedImage == RadioButtonList1.Items[i].Value)
				{
					RadioButtonList1.Items[i].Selected = true;
				}
			}
		}
	}
}

Above is the FileImage_Edit.ascx.cs

<%@ Control Language="C#" 
	AutoEventWireup="true" 
	CodeFile="FileImage_Edit.ascx.cs"
	Inherits="FileImage_Edit" %>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" 
	RepeatDirection="Horizontal"
	RepeatLayout="Flow">
</asp:RadioButtonList>

Above is the FileImage_Edit.ascx

Of course you will need a folder with some images in here is my Metadata also:

[MetadataType(typeof(FileImageTestMD))]
public partial class FileImageTest : INotifyPropertyChanging, INotifyPropertyChanged
{
}
public class FileImageTestMD
{
	public object Id {get;set;}
	public object Description {get;set;}
	[UIHint("FileImage")]
	[ImageUrl("~/images/{0}.png")] 
	[ImageFormat(50,50)]
	public object filePath {get;set;}
}

Hope this helps I'll blog a bit more about this and option two in the next few days

FileImage is only ready only in the DbImageAPI I have posted for displaying images off the harddrive. You would have to implement you own FileImage_Edit functionality. I see Steve has posted some code that might do that for you.

Thank you very much. I will try this and see if it works for me.

I've nearly got the file upload version done and will post it as soon as I have.

Thank you Steve. Appreciate the help. I will be looking forward to that post. I have to do this in VB so I will convert the code you posted.

Hi Tareq, I've posted the final bit upon my blog Dynamic Data: FileImage_Edit FieldTemplate hope this is what you were looking for.

Hi Steve,

This is just what I was looking for, and posted only 2 hours before I needed it, good timing! And a "local" too!

One small thing... there is a slight typo in your code listing for FileImageTypesAttribute where you have got DefaultExtansions rather than DefaultExtensions.

Many thanks,

Rob 

Yep I can't type, I must have spell checked some of the code when I posted it to my blog but not all of it; sorry I try harder next time

robroe:

there is a slight typo in your code listing for FileImageTypesAttribute where you have got DefaultExtansions rather than DefaultExtensions.

I just fixed it an reposted, Oh yeh and I can't spell either. [I wish this editor had a spell checker]

Hey Steve,

Thank you very much for the code. I think I am missing something. This project is available for download in several places and I am not sure which one is the latest version.

 I am getting errors:

The type or namespace name 'FileImage' could not be found (are you missing a using directive or an assembly reference?) 

I think I am missing a class file. Can you point me to the latest download or email me the the complete project.

Thanks again,

Tareq

Hi Tareq, e-mail me by clicking Send sjnaughton an email and I'll reply with the website file zipped up.

Hey Steve, thanks a lot. I finally got it to work in VB. Now for the next step I need to use this FileImage image API with a custom page. It don't seem to work if I turn off the autogeneraterow to false. Is there a easy way to configure the custom page to use this API?

Thanks,

Tareq