locked
Anyone know how to use the FileImageAPI Edit Funtionality? RRS feed

  • Question

  • User93497449 posted

    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,

     

    Wednesday, July 2, 2008 9:21 AM

Answers

  • User-330204900 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 3, 2008 8:36 AM
  • User660823006 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 8, 2008 7:07 PM
  • User-330204900 posted

    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>
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 8, 2008 7:37 PM

All replies

  • User-330204900 posted

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

    Wednesday, July 2, 2008 10:50 AM
  • User93497449 posted

    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

    Wednesday, July 2, 2008 10:56 AM
  • User-330204900 posted

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

    Wednesday, July 2, 2008 11:09 AM
  • User-330204900 posted

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

    Wednesday, July 2, 2008 12:23 PM
  • User660823006 posted

    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.

    Wednesday, July 2, 2008 12:27 PM
  • User93497449 posted

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

    Wednesday, July 2, 2008 2:54 PM
  • User-330204900 posted

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

    Wednesday, July 2, 2008 3:14 PM
  • User93497449 posted

    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.

    Wednesday, July 2, 2008 9:36 PM
  • User-330204900 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 3, 2008 8:36 AM
  • User-418270074 posted

    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 

    Thursday, July 3, 2008 12:10 PM
  • User-330204900 posted

    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]

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

    Thursday, July 3, 2008 1:28 PM
  • User93497449 posted

    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

    Monday, July 7, 2008 9:13 AM
  • User-330204900 posted

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

    Monday, July 7, 2008 10:01 AM
  • User93497449 posted

    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

    Tuesday, July 8, 2008 6:37 PM
  • User660823006 posted

    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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 8, 2008 7:07 PM
  • User-330204900 posted

    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>
     
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 8, 2008 7:37 PM
  • User93497449 posted

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

    Tuesday, July 8, 2008 9:20 PM
  • User93497449 posted

    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

     

    Thursday, July 10, 2008 3:34 PM
  • User-330204900 posted

    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.

    Thursday, July 10, 2008 3:44 PM
  • User-797310475 posted

    Hi Tareq,

    you cannot have a FileUpload control inside of an update panel that has partial updating enabled. By default, the Dynamic Data page templates are contained inside an UpdatePanel. What the DisablePartialRenderingForUpload method does is disable partial updating for the whole page if Dynamic Data would display a column with a FileUpload control. Are you sure that you are not seeing the whole page refresh?

    You could remove the call to the DisablePartialRenderingForUpload method but you would have to place all Dynamic Data data controls (like the DetailsView) outside of UpdatePanels.

    Thursday, July 10, 2008 3:52 PM
  • User93497449 posted

    I am seeing the whole refresh but I want only partial refresh.

    Thursday, July 10, 2008 4:00 PM
  • User-797310475 posted

    As I said, you cannot have a FileUpload inside of an active UpdatePanel. It is simply impossible for them to work together.

    Thursday, July 10, 2008 4:09 PM
  • User660823006 posted

    Here is a blog post by one of our fellow ASP.NET team members that explains in detail why FileUpload does not work inside of an UpdatePanel: http://weblogs.asp.net/leftslipper/archive/2007/03.aspx

    Thursday, July 10, 2008 5:53 PM
  • User93497449 posted

    I think I am not getting your advice here and still doing something wrong. I removed the main updatepanel and it still is not working for partial update. Do I have to remove the updatepanel outside of the detailsview as well for it to work. I kept the upload control ouside of the updatepanel and placed the update panel inside of detailsview template. Here is my current code:

    <asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsDataSource"

    DefaultMode="Insert" OnItemCommand="DetailsView1_ItemCommand"

    OnItemInserted="DetailsView1_ItemInserted" CssClass="detailstable"

    FieldHeaderStyle-CssClass="bold" AutoGenerateRows="False" DataKeyNames="id">

    <FieldHeaderStyle CssClass="bold" />

    <Fields>

     

    <asp:DynamicField DataField="submitted_by_name" HeaderText="Name"

    SortExpression="submitted_by_name" />

    <asp:DynamicField DataField="submitted_by_email" HeaderText="Email"

    SortExpression="submitted_by_email" />

     

    <asp:DynamicField DataField="filename" HeaderText="Select Image"

    SortExpression="filename" />

    <asp:DynamicField DataField="keywords" HeaderText="Keywords"

    SortExpression="keywords" />

    <asp:DynamicField DataField="location" HeaderText="Location"

    SortExpression="location" />

     

     

    <asp:DynamicField DataField="image_credits" HeaderText="Image Credits" SortExpression="image_credits"

    />

    <asp:TemplateField HeaderText="Project Related"

    SortExpression="project_related">

     

    <InsertItemTemplate>

    <asp:CheckBox ID="chkProjectRelated" runat="server" AutoPostBack="True"

    Checked='<%# Bind("project_related") %>'

    oncheckedchanged="chkProjectrelated_CheckedChanged" Text="Project Related" />

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

    <asp:Panel ID="projectinfo" runat="server" Visible="false">

    <asp:DynamicControl ID="DynamicControl1" runat="server"

    DataField='project_name' Mode="Insert"

    ></asp:DynamicControl> <br />

    <asp:DynamicControl ID="DynamicControl2" Mode="Insert" runat="server" DataField="project_number"

    ></asp:DynamicControl> <br />

    <asp:DynamicControl ID="DynamicControl3" Mode="Insert" runat="server" DataField="project_manager"

    ></asp:DynamicControl> <br />

    <asp:DynamicControl ID="DynamicControl4" Mode="Insert" runat="server" DataField="IndustryCategory" ></asp:dynamiccontrol><br />

     

    <asp:DynamicControl ID="DynamicControl5" Mode="Insert" runat="server" DataField="FacilityCategory" ></asp:dynamiccontrol> <br />

     

     

    <asp:DynamicControl ID="DynamicControl6" Mode="Insert" runat=server DataField="project_client"></asp:DynamicControl>

    </asp:Panel>

    </ContentTemplate>

    <Triggers>

    <asp:AsyncPostBackTrigger ControlID="chkProjectRelated"

    EventName="chkProjectRelated_CheckedChanged" />

    </Triggers>

    </asp:UpdatePanel>

    </InsertItemTemplate>

    </asp:TemplateField>

     

     

     

     

    <asp:CommandField ButtonType="Button" DeleteText="" EditText=""

    InsertText="Submit Image" NewText="" SelectText="" ShowInsertButton="True"

    UpdateText="" />

     

     

    </Fields>

    </asp:DetailsView>

    What am i still doing wrong?

     

    Thanks,

    Tareq

    Friday, July 11, 2008 11:40 AM
  • User93497449 posted

    Hi,

    Has anyone implemented a image handler to handle the image size? I was trying to tie it to the personal starter kits image handler but not able to.

    Monday, July 14, 2008 10:36 PM
  • User-330204900 posted

    Has anyone implemented a image handler to handle the image size? I was trying to tie it to the personal starter kits image handler but not able to.

    Hi Tareq I don't know if this is the sort of thing you mean, have a look at this Dynamic Data: Part 2 - FileImage_Edit FieldTemplate

    Hope this helps [:D]

    Tuesday, July 15, 2008 12:40 AM
  • User660823006 posted

    If you are loading images from the database you can try the Dynamic Data Futures which has support for images in the database. It contains an ImageFormat attribute which allows for scaling of images.

    Tuesday, July 15, 2008 12:04 PM
  • User-1759624489 posted

    I havent been able to make it work. FileUpload COntrol.  Filename is always empty no matter if I choose a file

     

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

     

    Please help

     

    I am trying to upload only a  pdf file-

     

     

    Tuesday, September 9, 2008 1:03 PM
  • User-330204900 posted

    Have you had a look at this article Dynamic Data: Part 2 - FileImage_Edit FieldTemplate of mine it does everything you want but works with images I'm sure it could be modified to do files and just show filename and a fieltype image [:D]

    Tuesday, September 9, 2008 1:52 PM
  • User-1664849873 posted

    Anyone can post the source code in VB. Thank you.

    Tuesday, October 7, 2008 10:33 PM
  • User-330204900 posted

    Hi Icebits, Bill on http://www.myvbprof.com/2007_Version/Dynamic_Data_Tutorial.aspx Is working on converting some of my samples to VB for his tutorials and videos I don't know how far he's got yet but you could e-mail him and ask if he's doning a conversion.

    Hope this helps [:D]

    Wednesday, October 8, 2008 4:01 AM