Anyone know how to use the FileImageAPI Edit Funtionality?

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,

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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:

Give a list of images from the specified folder [ImageUrl("~/images/{0}.png")] and let the user choose
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 [:D]

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

I'm just working on it now hopefully I will have it soon to show you [:)]

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

sjnaughton

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

Give a list of images from the specified folder [ImageUrl("~/images/{0}.png")] and let the user choose
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
				(
					"&lt;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

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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.

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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.

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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 [:D]

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] [;)]

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

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

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

To use Dynamic Data with autogenerate turned off you have two options:

1) Put a DynamicField into the list of columns for the GridView/DetailsView and specify the fieldname.

2) Create a TemplateField and put a DynamicControl into the list of columns for the GridView/DetailsView and specify the fieldname.

If this doesn't answer your question then show us an example of your data control with autogenerate turned off.

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

Tareq
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?

It will not work if you set AutogenerateRow to false you must set up the columns using DynamicControl or DynamicField this allows the the GridView etc to put the correct FieldTemplate in place. To do this on a new page you will need to add an DynamicDataManager and point it at the the GridView etc control see below.

DynamicDataManager1.RegisterControl(GridView1, true /*setSelectionFromUrl*/);

whether your customising a page or creating a completely new page it's the same after that you must add the columns you want to display as in a normal customised gridview but replace the normal controls in the ItemTemplate/EditTemplate etc with DynmaicField/DynamicControl see below for an example of the columns collection.

<Columns>
	<asp:TemplateField>
		<ItemTemplate>
			<asp:HyperLink ID="EditHyperLink" runat="server" NavigateUrl='<%# table.GetActionPath(PageAction.Edit, GetDataItem()) %>' Text="Edit" />&nbsp;				 
			<asp:LinkButton ID="DeleteLinkButton" runat="server" CommandName="Delete" CausesValidation="false" Text="Delete" OnClientClick='return confirm("Are you sure you want to delete this item?");' />&nbsp;				 
			<asp:HyperLink ID="DetailsHyperLink" runat="server" NavigateUrl='<%# table.GetActionPath(PageAction.Details, GetDataItem()) %>' Text="Details" />
		</ItemTemplate>
	</asp:TemplateField>
	<asp:TemplateField>
		<ItemTemplate>
			<asp:DynamicControl ID="DynamicControl1" runat="server" Mode="ReadOnly" DataField="Description">
			</asp:DynamicControl>
		</ItemTemplate>
	</asp:TemplateField>
	<asp:TemplateField>
		<ItemTemplate>
			<asp:DynamicControl ID="DynamicControl2" runat="server" Mode="ReadOnly" DataField="filePath">
			</asp:DynamicControl>
		</ItemTemplate>
	</asp:TemplateField>
</Columns>

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

Thanks guys. That resolved the issue. You guys are awesome.

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

Hey Guys,

I stumbled on another issue. Due to the line in insert.aspx

FileImageHelper.DisablePartialRenderingForUpload(Me, table) is creating issue for me to to do a partial update on a template field inside the detailsview. More details of this post is posted here:

http://forums.asp.net/t/1288000.aspx

Whenever I try to update another updatepanel it keeps refreshing the main updatepanel. Any ideas how this can be resolved?

Thanks again,

Tareq

Re: Anyone know how to use the FileImageAPI Edit Funtionality?

The FileImageHelper.DisablePartialRenderingForUpload(Me, table) line disables partial rendering whenever there is a DBImage or FileImage FieldTemplate on the page due to the FileUpload having a security issue with partial render, so it's by design that the main updatepanel updates.