Problem when publishing to production test server...

Last post 11-11-2011, 3:05 PM by markjason. 6 replies.
Sort Posts: Previous Next
  •  11-01-2011, 2:04 PM 70798

    Problem when publishing to production test server...

    I have been using ajax uploader within VS2010 to develop a new site.  Ajax Uploader was workging great.. I select a file which is automatically uploaded to  TempDirectory="~/UploaderTemp". Than onfileuploaded and onuploadcompleted fire where i than copy the file to a database set a asp:panel to visible=true  and the internal imageurl to point to the new added file where i can than perform cropping. 
     
    My problem is that when i published the project to production test server the application failed.  First error, was an except and seem to the results of what i had in the web.config.  My orginail web.config is seen below... I determine that VS2010 uses  <httpModules>
    and the production test server needs <system.webServer>. So, i removed the <httpModules> from the web.config on the production server and the except disappears and site works. However, Ajax Uploader is not functioning in the same.  It seems onfileuploaded and onuploadcompleted don't fire. However, the files are uploading to the temp directory and also the list that shows files add does not disappear after a uploaded is successful or fails.


    <configuration>

     

    <system.web>
           <httpModules>
          <
    add name="CuteWebUI.UploadModule" type="CuteWebUI.UploadModule,CuteWebUI.AjaxUploader"/>
       </
    httpModules>
    </system.web>

    <system.webServer>
       <
    modules>
          <
    add name="CuteWebUI.UploadModule" type="CuteWebUI.UploadModule,CuteWebUI.AjaxUploader"/>
       </
    modules>
    </
    system.webServer>

    </configuration>

      
  •  11-01-2011, 2:07 PM 70799 in reply to 70798

    Re: Problem when publishing to production test server...

    The code  

    <asp:UpdatePanel ID="UploadPanel" class="window" ClientIDMode="Static" UpdateMode="Conditional" runat="server" style="padding:25px; min-width:500px; width:auto; max-width:1000px; display:none; " >

    <ContentTemplate>

     

    <script type="text/javascript">

    function submitbutton_click() {

    alert("submitbutton_click");

    var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');

    var uploadobj = document.getElementById('<%=FileUploader1.ClientID %>');

    if (!window.filesuploaded) {

    if (uploadobj.getqueuecount() > 0) {

    uploadobj.startupload();

    } else {

    var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;

    if (uploadedcount > 0) {

    return true;

    }

    alert("Please browse files for upload");

    }

    return false;

    }

    window.filesuploaded = false;

    return true;

    }

    function CuteWebUI_AjaxUploader_OnSelect() {

    if (selectArea) {

    selectArea.cancelSelection();

    }

    }

    function CuteWebUI_AjaxUploader_OnPostback() {

    alert("OnPostBack");

    window.filesuploaded = true;

    var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');

    submitbutton.click();

    return false;

    }

    </script>

     

    <asp:Label ID="Uploader1_FileUploadedLabel" runat="server" Text="Label"></asp:Label>

    <asp:Label ID="Uploader1_UploadCompletedLabel" runat="server" Text="Label"></asp:Label>

    <h2 style="border:thin solid black; width:300px; ">Image Cropper</h2>

    <CuteWebUI:Uploader ID="FileUploader1" ClientIDMode="Static" MaxFilesLimit="1" runat="server" InsertButtonID='Uploader1Insert' ProgressCtrlID='Uploader1Progress' CancelButtonID='Uploader1Cancel' TempDirectory="~/UploaderTemp" ProgressPanelWidth="300" InsertText="Select Image" onuploadcompleted="Uploader1_UploadCompleted" onfileuploaded="Uploader1_FileUploaded" >

    <ValidateOption AllowedFileExtensions=".png,.jpg,.bmp,.jpeg,.gif, ," />

    <ValidateOption MaxSizeKB="1164" />

    </CuteWebUI:Uploader>

     

    <asp:Image runat="server" ID="Uploader1Insert" AlternateText="Upload File" ImageUrl="../Images/upload.png" Style="float:left; margin:0px;" /><br />

    <asp:Panel runat="server" ID="Uploader1Progress" BorderColor="Orange" BorderStyle="dashed" BorderWidth="2" Style="float:left; margin:0px; padding:0px; ">

    <asp:Label ID="Uploader1ProgressText" runat="server" ForeColor="Firebrick"></asp:Label><br />

    </asp:Panel><br />

    <asp:Image runat="server" ID="Uploader1Cancel" AlternateText="Upload File" ImageUrl="../Images/cancel.png" /> <br />

    <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()" Text="Submit" style="display:none;" />

     

    <br style="clear:both;" /> <br />

    <asp:Panel ID="ImagePanel" ClientIDMode="Static" runat="server" Visible="false" style="margin:20px; padding:20px; border:thick solid black; " >

    <div style="float:left; border:thin dashed orange; width:200px; ">

    <asp:Label ID="Label2" runat="server" Text="Image Name" CssClass="label" ></asp:Label><br />

    <asp:TextBox ID="ImageNameTextBox" CssClass="text_box" runat="server"></asp:TextBox><br />

    <asp:Label ID="ErrorLabel" ClientIDMode="Static" CssClass="error" runat="server" Text="* Field Required" style="display:none;" ></asp:Label><br />

    </div>

    <div id="Div1" style="float:right; margin-top:0px; border:thin dashed green;" >

    <label style="float:left;" class="label" >Button Preview</label><br />

    <div id="Image3Div" style="float:left; width:33px; height:33px; overflow:hidden; margin-top:0px; margin-left:0px; border:thin solid white;-moz-border-radius:5px; border-radius:5px; background-image:url(../images/workarea2.png); background-repeat:repeat-y;" ></div>

    <p class="label" style="float:left; margin:0px; margin-top:22px;">32px</p>

     

    <div id="Image2Div" style="float:left; width:24px; height:24px; overflow:hidden; margin-top:10px; margin-left:10px; border:thin solid white; -moz-border-radius:5px; border-radius:5px; background-image:url(../images/workarea2.png); background-repeat:repeat-y; "></div>

    <p class="label" style="float:left;margin:0px; margin-top:22px;">24px</p>

     

    <div id="Image1Div" style="float:left; width:16px; height:16px; overflow:hidden; margin-top:17px; margin-left:0px; border:thin solid white; -moz-border-radius:5px; border-radius:5px; background-image:url(../images/workarea2.png); background-repeat:repeat-y; "></div>

    <p class="label" style="float:left; margin:0px; margin-top:21px;">16px</p>

    </div>

     

    <br />

    <br style="clear:both; margin:0px;" />

    <p style="clear:both; margin:0px; margin-top:10px;" class="label" >Please select the area from the image you want to use for button</p>

    <div id="ImageDiv" style="padding:0px; border:thin solid red; background-image:url(../images/workarea.png); background-repeat:repeat-y;" >

    <asp:Image ID="resizebleImage" ClientIDMode="Static" ImageUrl="" runat="server" />

    </div>

     

     

    <br style="clear:both;" />

    </asp:Panel>

     

    <asp:ImageButton ID="CancelAddImage" ClientIDMode="Static" ImageUrl="~/Images/cancel.png" runat="server" style="float:left;" OnClientClick="CancelAddImage(); return false;" />

    <asp:ImageButton ID="SaveButton" ClientIDMode="Static" ImageUrl="~/Images/save.png" runat="server" Visible="false" style="float:right;" onclick="SaveButton_Click1" />

    <asp:ImageButton ID="ImageButton1" ClientIDMode="Static" ImageUrl="~/Images/continue.png" runat="server" style="float:right;" OnClientClick="ContinueAddImage(); return false;" />

     

     

     

    <br style="clear:both;" />

    <asp:HiddenField ID="SelectionX1" ClientIDMode="Static" runat="server" />

    <asp:HiddenField ID="SelectionY1" ClientIDMode="Static" runat="server" />

    <asp:HiddenField ID="SelectionWidth" ClientIDMode="Static" runat="server" />

    <asp:HiddenField ID="SelectionHeight" ClientIDMode="Static" runat="server" />

    <asp:HiddenField ID="CurrentFile" ClientIDMode="Static" runat="server" />

    <asp:HiddenField ID="ImageId" ClientIDMode="Static" runat="server" />

     

    </ContentTemplate>

     

    <Triggers>

    <asp:AsyncPostBackTrigger ControlID="SaveButton" EventName="Click" />

    </Triggers>

     

    </asp:UpdatePanel>

  •  11-02-2011, 8:07 AM 70895 in reply to 70799

    Re: Problem when publishing to production test server...

    Hi ScottDolan,
     
    1. Please refer to http://www.ajaxuploader.com/Deployment.htm stpe 2 to deploy the AjaxUploader httpModule.
     
    Note: please dont' use both on your web.config.  Integrated mode  and Classic mode is different, please only use one of them on your web.config.
     
     2.  Please try the example below, does the method work for you?
     
    <%@ Page Language="C#" %>

    <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">

        protected void uploader1_UploadCompleted(object sender, UploaderEventArgs[] args)
        {
            label2.Text = "upload completed!";
        }

        protected void uploader1_FileUploaded(object sender, UploaderEventArgs args)
        {
            label1.Text += args.FileName;
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>example</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <CuteWebUI:UploadAttachments ID="uploader1" runat="server" OnUploadCompleted="uploader1_UploadCompleted"
                OnFileUploaded="uploader1_FileUploaded">
            </CuteWebUI:UploadAttachments><br />
            FileUploaded method:
            <asp:Label ID="label1" runat="server"></asp:Label><br />
            UploadCompleted method:
            <asp:Label ID="label2" runat="server"></asp:Label>
        </form>
    </body>
    </html>
     
    Regards,
     
    Ken
  •  11-02-2011, 8:52 AM 70908 in reply to 70895

    Re: Problem when publishing to production test server...

    Ken,
          The method above you provided does not really work.  It does seem to upload the file and  fire OnUploadCompleted and OnFileUploaded events.  However, the ajax part of uploader does not work as it generates a full page postback..   I am using the code you gave me below within an updatepanel.  It works fine when i debug with VS2010 on my local machine. However, when i publish the code to my production test server it fails..  My production test server also requires i don't use <httpModules> in the web.config and use the <system.webServer> config.  
     

    <script type="text/javascript">

       function submitbutton_click() {
          alert(
    "submitbutton_click");
                  var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
          var uploadobj = document.getElementById('<%=FileUploader1.ClientID %>');
          if (!window.filesuploaded) {
             if (uploadobj.getqueuecount() > 0) {
                uploadobj.startupload();
             }
    else {
                               var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;
                if (uploadedcount > 0) {
                   return true;
                }
                alert(
    "Please browse files for upload");
             }
                        return false;
          }
          window.filesuploaded =
    false;
                 return true;
       }

       function
    CuteWebUI_AjaxUploader_OnPostback() {
          alert(
    "OnPostBack");
          window.filesuploaded =
    true;
          var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
          submitbutton.click();
          return false;
       }
    </script>

     

     

    <asp:UpdatePanel ID="UploadPanel" class="window" ClientIDMode="Static" ChildrenAsTriggers="true" UpdateMode="Conditional" runat="server" >

    <ContentTemplate>

     

    <CuteWebUI:Uploader ID="FileUploader1" ClientIDMode="Static" MaxFilesLimit="1" runat="server" InsertButtonID='Uploader1Insert' ProgressCtrlID='Uploader1Progress' CancelButtonID='Uploader1Cancel' TempDirectory="~/UploaderTemp" ProgressPanelWidth="300" InsertText="Select Image" onuploadcompleted="Uploader1_UploadCompleted" onfileuploaded="Uploader1_FileUploaded" >

    <ValidateOption AllowedFileExtensions=".png,.jpg,.bmp,.jpeg,.gif, ," />

    <ValidateOption MaxSizeKB="1164" />

    </CuteWebUI:Uploader>

     

    <asp:Image runat="server" ID="Uploader1Insert" AlternateText="Upload File" ImageUrl="../Images/upload.png" Style="float:left; margin:0px;" /><br />

    <asp:Panel runat="server" ID="Uploader1Progress" BorderColor="Orange" BorderStyle="dashed" BorderWidth="2" Style="float:left; margin:0px; padding:0px; ">

    <asp:Label ID="Uploader1ProgressText" runat="server" ForeColor="Firebrick"></asp:Label><br />

    </asp:Panel><br />

    <asp:Image runat="server" ID="Uploader1Cancel" AlternateText="Upload File" ImageUrl="../Images/cancel.png" /> <br />

    <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()" Text="Submit" style="display:none;" />

    </ContentTemplate>

     

    <Triggers>
       <asp:AsyncPostBackTrigger ControlID="SaveButton" EventName="Click" />
    </Triggers>

    </asp:UpdatePanel>

     
     
     
     
  •  11-02-2011, 9:33 AM 70912 in reply to 70908

    Re: Problem when publishing to production test server...

    Hi ScottDolan,
     
    Try the new examle below, it should works for you. Please use all the code of it and do not change anything of the page below.
     
    <%@ Page Language="C#" ValidateRequest="false" %>

    <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">

        protected void uploader1_UploadCompleted(object sender, UploaderEventArgs[] args)
        {
            label2.Text = "Upload completed!";
        }

        protected void uploader1_FileUploaded(object sender, UploaderEventArgs args)
        {
            label1.Text += args.FileName;
        }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>example</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <CuteWebUI:UploadAttachments ID="uploader1" runat="server" OnUploadCompleted="uploader1_UploadCompleted"
                            OnFileUploaded="uploader1_FileUploaded">
                        </CuteWebUI:UploadAttachments>
                        <div>
                            <asp:Label ID="label1" runat="server"></asp:Label><br />
                            <asp:Label ID="label2" runat="server"></asp:Label>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>
     
    Regards,
     
    Ken
  •  11-02-2011, 1:19 PM 70923 in reply to 70912

    Re: Problem when publishing to production test server...

    Ken,
        OK, i was able to fix the problem so it works are pure ajax uploader the solution is below.   However, i need to restrict it so only one file can be uploaded and i also need to hide the panel that shows you the files i uploaded. i will start another forum for them...  thanks
     
     <asp:ScriptManager ID="ScriptManager1" runat="server">
     </asp:ScriptManager>
     <asp:UpdatePanel ID="UploadPanel"  runat="server"  >
        <ContentTemplate>
     
     <script type="text/javascript">
         function submitbutton_click() {
             alert("submitbutton_click");
             var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
             var uploadobj = document.getElementById('<%=FileUploader1.ClientID %>');
             if (!window.filesuploaded) {
                 if (uploadobj.getqueuecount() > 0) {
                     uploadobj.startupload();
                 } else {
                     var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;
                     if (uploadedcount > 0) {
                         return true;
                     }
                     alert("Please browse files for upload");
                 }
                 return false;
             }
             window.filesuploaded = false;
             return true;
         }

       function CuteWebUI_AjaxUploader_OnPostback() {
             alert("OnPostBack");
             window.filesuploaded = true;
             var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
             submitbutton.click();
             return false;
         }
        </script>


     
        <CuteWebUI:UploadAttachments  ID="FileUploader1" ClientIDMode="Static"    MaxFilesLimit="1" runat="server"  TempDirectory="~/UploaderTemp"  OnUploadCompleted="Uploader1_UploadCompleted" OnFileUploaded="Uploader1_FileUploaded"     >
            <ValidateOption AllowedFileExtensions=".png,.jpg,.bmp,.jpeg,.gif, ," />
        </CuteWebUI:UploadAttachments >
                 
        <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()" Text="Submit" style="display:none;" />

        <asp:Label ID="Uploader1_FileUploadedLabel"     runat="server" Text="Label"></asp:Label><Br />
        <asp:Label ID="Uploader1_UploadCompletedLabel"  runat="server" Text="Label"></asp:Label>

      

    </ContentTemplate>

    <Triggers>

    <asp:AsyncPostBackTrigger ControlID="SubmitButton" EventName="Click" />

    </Triggers>


    </asp:UpdatePanel>

     
     
     
     
     
     
  •  11-11-2011, 3:05 PM 71347 in reply to 70923

    Re: Problem when publishing to production test server...

    But how can I do it on my machine?

    presentation folders
    custom folders
View as RSS news feed in XML