Ticket T433500

Visible to All Users

ASPxGridView - How to upload an image in the edit form

Raffaele Vitiello 1

created 9 years ago

Hi,
i need to upload a description and image upload inside aspxGridView.
I found this article, but i see that's very oldest version and it's obsolete…
https://www.devexpress.com/Support/Center/Example/Details/E95

you can provide me an example for my new version in c#?

Thank you.

Answers approved by DevExpress Support

Lanette (DevExpress Support)

created 9 years ago (modified 9 years ago)

Hello,

In the latest version, 16.1, you can use the ASPxGridView built-in functionality to accomplish this task. Add a GridViewDataBinaryImageColumn to the grid and set its GridViewDataBinaryImageColumn.PropertiesBinaryImage.EditingSettings.Enabled property to True to activate this feature. In this case, an upload control is shown in the edit form automatically as an editor for this column. Please refer to the ASP.NET Data Grid - Binary Image Editor (Coming soon in v15.1) blog post and the Binary Image Column Editing demo for more information.
Let us know if this approach meets your requirements.

Show previous comments (7)

Raffaele Vitiello 1 9 years ago

I follow your example, but my image not display and not load into grid…see the video…and this is the code:

C#
<dx:ASPxGridView ID="ASPxGridViewImmaginiGomme" runat="server" Width="50%"  OnRowValidating="ASPxGridViewImmaginiGomme_RowValidating" CssClass="border" Theme="Moderno"  
        AutoGenerateColumns="False" KeyFieldName="id"  
        OnInitNewRow="ASPxGridViewImmaginiGomme_InitNewRow"  
        OnStartRowEditing="ASPxGridViewImmaginiGomme_StartRowEditing"  
        OnRowUpdating="ASPxGridViewImmaginiGomme_RowUpdating"  
        OnRowDeleting="ASPxGridViewImmaginiGomme_RowDeleting"  
        OnRowInserting="ASPxGridViewImmaginiGomme_RowInserting" >  
        <SettingsEditing EditFormColumnCount="3" UseFormLayout="False">  
        </SettingsEditing>  
        <SettingsBehavior AllowEllipsisInText="True" ColumnResizeMode="NextColumn" />  
        <SettingsCommandButton>  
            <NewButton ButtonType="Button" Text="Nuovo">  
            </NewButton>  
            <UpdateButton ButtonType="Button" Text="Conferma">  
            </UpdateButton>  
            <CancelButton ButtonType="Button" Text="Cancella">  
            </CancelButton>  
            <EditButton ButtonType="Button" Text="Modifica">  
            </EditButton>  
            <DeleteButton ButtonType="Button" Text="Elimina">  
            </DeleteButton>  
        </SettingsCommandButton>  
        <Columns>  
            <dx:GridViewCommandColumn ShowDeleteButton="True" ShowEditButton="True"  
                ShowNewButtonInHeader="True" VisibleIndex="0" Width="15%">  
            </dx:GridViewCommandColumn>  
            <dx:GridViewDataTextColumn Caption="Id" FieldName="id" Name="id"  
                VisibleIndex="1" Width="5%" ReadOnly="True">  
            </dx:GridViewDataTextColumn>  
            <dx:GridViewDataTextColumn Caption="Descrizione" FieldName="descrizione"  
                Name="descrizione" VisibleIndex="2" Width="35%" ReadOnly="False"  
                ToolTip="Descrizione">  
            </dx:GridViewDataTextColumn>  
            <dx:GridViewDataTextColumn Caption="Nome file" FieldName="immagine"  
                Name="immagine" VisibleIndex="3" Width="25%">  
                <EditFormSettings Visible="False" />  
            </dx:GridViewDataTextColumn>  
            <dx:GridViewDataBinaryImageColumn FieldName="corpofile" Name="corpofile" Caption="Immagine" Width="20%" PropertiesBinaryImage-IsPng="True" Settings-AllowDragDrop="True">  
                <PropertiesBinaryImage ImageHeight="170px" ImageWidth="160px">  
                    <EditingSettings Enabled="true"  
                        UploadSettings-UploadValidationSettings-MaxFileSize="4194304">  
<UploadSettings>  
<UploadValidationSettings MaxFileSize="4194304"></UploadValidationSettings>  
</UploadSettings>  
                    </EditingSettings>  
                </PropertiesBinaryImage>  

<Settings AllowDragDrop="True"></Settings>  
            </dx:GridViewDataBinaryImageColumn>  
        </Columns>  
<EditFormLayoutProperties ColCount="3">  
            <Items>  
                <dx:GridViewColumnLayoutItem ColumnName="corpofile" RowSpan="4" ShowCaption="True" HelpText="Estensioni consentiti:JPG, GIF e PNG. La dimensione massima del file è 4MB." Width="180px"/>  
                <dx:GridViewColumnLayoutItem ColumnName="descrizione"/>  
                <dx:EmptyLayoutItem/>  
                <dx:EditModeCommandLayoutItem ShowCancelButton="true" ShowUpdateButton="true" HorizontalAlign="Right" />  
            </Items>  
        </EditFormLayoutProperties>  
    </dx:ASPxGridView>

Image.avi

Raffaele Vitiello 1 9 years ago

About this video, if is possible i want to ask another question about another problem…i don't know if it's better to create a new ticket…
…If you see, in edit mode i must see the id field in the readonly mode (but it's ugly to see the id in edit mode).
If i set to visible = false in edit mode the id field, when i take the value of this in RowInserting or RowUpdating i have null value…
You can help me also on this issue?

Thank you so much for you assistance.

Lanette (DevExpress Support) 9 years ago

Hello,

I've created a separate ticket on your behalf (T434096: ASPxGridView - Hidden column's values are null on editing) regarding the problem with hidden columns. It has been placed in our processing queue and will be answered shortly.

Regarding the problem with image uploading, I've examined your code snippet but don't see any problems that may cause this behavior. Would you please send us a full sample project so that we can examine your full scenario and reproduce the issue? In addition, clarify if there are any errors in the browser console when you're trying to upload an image and clarify what is the type of the datasource field to which you're binding GridViewDataBinaryImageColumn.

Raffaele Vitiello 1 9 years ago

About image upload problem, i see in the console this message error:
File not found

http://localhost:49978/ASPxUploadProgressHandlerPage.ashx?DXProgressHandlerKey=29194950a6d84e0088dfebb96e86a3ab&DXHelperUploadingCallback=MainContent_ASPxGridViewImmaginiGomme_DXEditor4_DXUploadEditor

And this is the html response

HTML
<!DOCTYPE html>  
<html>  
    <head>  
        <title>Impossibile trovare la risorsa.</title>  
        <meta name="viewport" content="width=device-width" />  
        <style>  
         body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;}  
         p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}  
         b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}  
         H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }  
         H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }  
         pre {font-family:"Consolas","Lucida Console",Monospace;font-size:11pt;margin:0;padding:0.5em  
;line-height:14pt}  
         .marker {font-weight: bold; color: black;text-decoration: none;}  
         .version {color: gray;}  
         .error {margin-bottom: 10px;}  
         .expandable { text-decoration:underline; font-weight:bold; color:navy; cursor:hand; }  
         @media screen and (max-width: 639px) {  
          pre { width: 440px; overflow: auto; white-space: pre-wrap; word-wrap: break-word; }  
         }  
         @media screen and (max-width: 479px) {  
          pre { width: 280px; }  
         }  
        </style>  
    </head>  

    <body bgcolor="white">  

            <span><H1>Errore server nell'applicazione '/'.<hr width=100% size=1 color=silver></H1>  

            <h2> <i>Impossibile trovare la risorsa.</i> </h2></span>  

            <font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif ">  

            <b> Descrizione: </b>HTTP 404. La risorsa che si sta cercando (o una delle sue dipendenze  
) potrebbe essere stata rimossa, rinominata o non essere temporaneamente disponibile. Verificare che  
 l'URL riportato di seguito sia stato digitato correttamente.  
            <br><br>  

            <b> URL richiesto: </b>/ASPxUploadProgressHandlerPage.ashx<br><br>  

            <hr width=100% size=1 color=silver>  

            <b>Informazioni di versione:</b>&nbsp;Versione di Microsoft .NET Framework:4.0.30319; Versione  
 di ASP.NET:4.0.30319.34209  

            </font>  

    </body>  
</html>  
<!--  
[HttpException]: The controller for path &#39;/ASPxUploadProgressHandlerPage.ashx&#39; was not found  
 or does not implement IController.  
   in System.Web.Mvc.DefaultControllerFactory.GetControllerInstance(RequestContext requestContext, Type  
 controllerType)  
   in System.Web.Mvc.DefaultControllerFactory.CreateController(RequestContext requestContext, String  
 controllerName)  
   in System.Web.Mvc.MvcHandler.ProcessRequestInit(HttpContextBase httpContext, IController& controller  
, IControllerFactory& factory)  
   in System.Web.Mvc.MvcHandler.<>c__DisplayClass6.<BeginProcessRequest>b__2()  
   in System.Web.Mvc.SecurityUtil.<>c__DisplayClassb`1.<ProcessInApplicationTrust>b__a()  
   in System.Web.Mvc.SecurityUtil.<GetCallInAppTrustThunk>b__0(Action f)  
   in System.Web.Mvc.SecurityUtil.ProcessInApplicationTrust(Action action)  
   in System.Web.Mvc.SecurityUtil.ProcessInApplicationTrust[TResult](Func`1 func)  
   in System.Web.Mvc.MvcHandler.BeginProcessRequest(HttpContextBase httpContext, AsyncCallback callback  
, Object state)  
   in System.Web.Mvc.MvcHandler.BeginProcessRequest(HttpContext httpContext, AsyncCallback callback,  
 Object state)  
   in System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.BeginProcessRequest(HttpContext context  
, AsyncCallback cb, Object extraData)  
   in System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute  
()  
   in System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)  
-->

Lanette (DevExpress Support) 9 years ago

Hello,

Thank you for your clarification.
This issue may occur when the file uploading is used and if the ASPxUploadProgressHttpHandler element is not registered in the Web.config. Please define it manually according to the instructions from the ASPxUploadProgressHttpHandler > Registration help topic.
Let us know if this approach helps.

Raffaele Vitiello 1 8 years ago

Hi, good start of week…

About my problem, i already have this in my web.config

XML
<httpHandlers>  
        <add verb="GET,POST" path="ASPxUploadProgressHandlerPage.ashx" type="DevExpress.Web.ASPxUploadProgressHttpHandler, DevExpress.Web.v15.2, Version=15.2.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/>  
        <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v15.2, Version=15.2.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET" path="DX.ashx" validate="false"/>  
</httpHandlers>

Lanette (DevExpress Support) 8 years ago

Hello,

Thank you for your response.
I've examined your code snippet and found that you missed the "validate="false" setting in the ASPxUploadProgressHandler registration. I suggest you modify it as suggested in the ASPxUploadProgressHttpHandler topic.
Let us know if this registration helps. Otherwise, send us your sample project for further examination.

Raffaele Vitiello 1 8 years ago

Nothing to do…
not work.

this is the actual state:

XML
<httpHandlers>  
            <add verb="GET,POST" path="ASPxUploadProgressHandlerPage.ashx" validate="false" type="DevExpress.Web.ASPxUploadProgressHttpHandler, DevExpress.Web.v15.2, Version=15.2.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"/>  
      <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v15.2, Version=15.2.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" verb="GET" path="DX.ashx" validate="false"/>  
    </httpHandlers>

I'm trying to create a new simple c# project and include my grid into it…and work fine…
i don't understand where is the problem.

Raffaele Vitiello 1 8 years ago

The problem is the same …

Don't found this file: ASPxUploadProgressHandlerPage.ashx

But this is a phisical file?

Lanette (DevExpress Support) 8 years ago

Hello,

I suggest you also use the recommendations from the ASPxUploadControl / MVC UploadControl - FAQ article (see the "7. Why may the "Not Found" error message appear?" paragraph) and the MVC UploadControl stopped working after upgrading to version 11.4 ticket and add an exception for the standard route to the RegisterRoutes method in the global.asax file.

C#
protected void Application_Start() {  
    ...  
    RegisterRoutes(RouteTable.Routes);  
}  

public static void RegisterRoutes(RouteCollection routes) {  
    routes.Ignore("{resource}.ashx/{*pathInfo}");  
    ...  
}

In addition, I recommend you check if the ASPxUploadProgressHandler is available by navigating to the following page in your application: http://localhost:49978/ASPxUploadProgressHandlerPage.ashx. Ensure that an empty xml is returned on this page and the corresponding request has status 200.

Created: September 29, 2016 10:14 AM

Modified: October 4, 2016 1:51 PM

Platform: ASP.NET Web Forms

Product: ASPxGridView

Build: 16.1.5

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

ASPxGridView - How to upload an image in the edit form

Answers approved by DevExpress Support

Recently viewed tickets