Customize "Upload" button behavior in Insert Image dialog box

Last post 11-24-2011, 6:57 AM by Kenneth. 1 replies.
Sort Posts: Previous Next
  •  11-23-2011, 1:25 PM 71606

    Customize "Upload" button behavior in Insert Image dialog box

    Hi,
     
    We are using CuteEditor.net6.6. I need to modify the onclick behavior for "Upload" button.
     
    When a user clicks a "Upload" button in "Insert Image" dialog box, the following should happen:
    1) normal upload as what the "upload" button is doing now. (It works well now.)
    2) change the upload file name to a different name.
    3) add the upload file to a DB.
     
    Is there a way to achieve this? There are a few functions in InsertImage.aspx, but I am not sure which one to use since I don't have the .js file or the code behind.
     
    Thanks, Qian 
    Filed under:
  •  11-24-2011, 6:57 AM 71610 in reply to 71606

    Re: Customize "Upload" button behavior in Insert Image dialog box

    Hi qsun,
     
    The code below shows you how to handle the click envet of the upload button. And how to change the upload file name.
     
    The red code is what I added into the "insert image" dialog page
     
    <%@ Page Language="C#" Inherits="CuteEditor.Dialogs.FileBrowserPage" EnableViewState="true" %>
    <%@ Register TagPrefix="CE" Assembly="CuteEditor" Namespace="CuteEditor" %>
    <script runat="server">
    override protected void OnInit(EventArgs args)
    {
         
        if(Context.Request.QueryString["Dialog"]=="Standard")
        {
            if(Context.Request.QueryString["IsFrame"]==null)
            {
                string FrameSrc="InsertImage.Aspx?IsFrame=1&"+Request.ServerVariables["QUERY_STRING"];
                CuteEditor.CEU.WriteDialogOuterFrame(Context,"[[InsertImage]]",FrameSrc);
                Context.Response.End();
            }
        }
        base.OnInit(args);
        
        InputFile.ValidateOption.MaxSizeKB=secset.MaxImageSize;
        InputFile.ValidateOption.AllowedFileExtensions=string.Join(",",(string[])secset.ImageFilters.ToArray(typeof(string)));
    }


    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server" ID="Head1">
            <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)" />
            <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.1)" />
            <meta http-equiv="Cache-Control" content="no-cache" />
            <meta http-equiv="Pragma" content="no-cache" />
            <title>[[InsertImage]]</title>
            <meta http-equiv="EXPIRES" content="0" />
            <link href='Load.ashx?type=themecss&file=dialog.css&theme=[[_Theme_]]' type="text/css" rel="stylesheet" />
            <!--[if IE]>
                <link href="Load.ashx?type=style&file=IE.css" type="text/css" rel="stylesheet" />
            <![endif]-->
            <script type="text/javascript" src="Load.ashx?type=dialogscript&verfix=1006&file=DialogHead.js"></script>
            <script type="text/javascript">
            function PostBackAction()
            {
                <%=Page.ClientScript.GetPostBackEventReference(hiddenAction,"")%>
            }
            </script>
            <style type="text/css">    
                #browse_Frame{border-top:1px solid #a0a0a0;border-left:1px solid #a0a0a0;border-bottom:1px solid #ffffff;border-right:1px solid #ffffff;width:280px;height:250px;overflow:auto;background-color:white;}
                #divouter{border-top:1px solid #a0a0a0;border-left:1px solid #a0a0a0;border-bottom:1px solid #ffffff;border-right:1px solid #ffffff;vertical-align: top; overflow: auto; width:300px;height:250px; background-color:white;text-align:center}
                #divpreview{background-color:white;height:100%;width:100%;}
                #bordercolor_Preview{margin-bottom:-3px}
                .row {}
                .cb { vertical-align: middle }
                .itemimg { vertical-align: middle }
                .editimg { vertical-align: middle }
                .cell1 { vertical-align: middle }
                .cell2 {
                    vertical-align: middle;
                    white-space: pre-wrap; /* css-3 */
                    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
                    white-space: -pre-wrap; /* Opera 4-6 */
                    white-space: -o-pre-wrap; /* Opera 7 */
                    word-wrap: break-word; /* Internet Explorer 5.5+ */
                    overflow: hidden;
                    break-word: break-all;
                }
                .cell3 {vertical-align: middle; text-align:right}
                #FolderList {
                    /* for Firefox, Opera and others: */
                    max-width: 220px;
                }
                .image-align{vertical-align:middle;margin:3px;}
                html, body,#ajaxdiv,#Form1 {height: 100%;}
            </style>
            <!--[if gte IE 5]>
            <style type="text/css">
            #FolderList {
                    /* For Internet Explorer: */
                width: expression(Math.min(parseInt(this.offsetWidth), 220 ) + "px");
            }
            </style>
            <![endif]-->
        </head>
        <body>
            <form runat="server" enctype="multipart/form-data" id="Form1">
            <asp:Label ID=label1 runat=server></asp:Label>
                <div runat="server" id="ajaxdiv">
                    <!-- start hidden -->
    <input type="hidden" runat="server" id="hiddenDirectory" name="hiddenDirectory" />
    <input type="hidden" runat="server" id="hiddenFile" name="hiddenFile" />
    <input type="hidden" runat="server" enableviewstate="false" id="hiddenAlert" name="hiddenAlert" />
    <input type="hidden" runat="server" enableviewstate="false" id="hiddenAction" onserverchange="hiddenAction_ServerChange" name="hiddenAction" />
    <input type="hidden" runat="server" enableviewstate="false" id="hiddenActionData" name="hiddenActionData" />
                    <!-- end hidden -->
                    <table border="0" cellspacing="0" cellpadding="0" width="100%">
                        <tr>
                            <td style="width:20px">
                                <asp:image id="Image1" Runat="server" ImageUrl="../Load.ashx?type=image&file=openfolder.gif"></asp:image>
                            </td>
                            <td style="width:240px" class="normal">
                                <asp:label Runat="server" id="FolderDescription"></asp:label>
                                <asp:dropdownlist Runat="server" ID="FolderList" Visible="False" />
                            </td>
                            <td>
    <asp:imagebutton id="CreateDir" BorderWidth="1" Runat="server" AlternateText="[[Createdirectory]]" ImageUrl="../Load.ashx?type=image&file=newfolder.gif" OnClick="CreateDir_Click" />
    <asp:imagebutton id="Copy" BorderWidth="1" Runat="server" AlternateText="[[Copyfiles]]" ImageUrl="../Load.ashx?type=image&file=Copy.gif" OnClick="Copy_Click" />
    <asp:imagebutton id="Move" BorderWidth="1" Runat="server" AlternateText="[[Movefiles]]" ImageUrl="../Load.ashx?type=image&file=move.gif" OnClick="Move_Click" />
    <img id="btn_zoom_in" src="../Load.ashx?type=image&file=zoom_in.gif" onclick="Zoom_In();" title="[[ZoomIn]]" class="cursor dialogButton" />
    <img id="btn_zoom_out" src="../Load.ashx?type=image&file=zoom_out.gif" onclick="Zoom_Out();" title="[[ZoomOut]]" class="cursor dialogButton" />
    <img id="btn_bestfit" src="../Load.ashx?type=image&file=bestfit.gif" onclick="BestFit();" title="[[BestFit]]" class="cursor dialogButton" />
    <img id="btn_Actualsize" src="../Load.ashx?type=image&file=Actualsize.gif" onclick="Actualsize();" title="[[ActualSize]]" class="cursor dialogButton" />
    <img id="img_AutoThumbnail" src="../Load.ashx?type=image&file=resize.gif" onclick="AutoThumbnail();" title="[[AutoThumbnail]]" class="cursor dialogButton" />
                            <% if(secset.AllowModify) {%>
    <img class="cursor dialogButton" id="img_ImageEditor" src="../Load.ashx?type=image&file=imageeditor.gif" onclick="ImageEditor();" title="[[ImageEditor]]" />
                            <%
                            }
                            else
                            {
                            %>
                                <img class="CuteEditorButtonDisabled" id="img1" src="../Load.ashx?type=image&file=imageeditor.gif"
                                    title="[[ImageEditor]]" />
                                <%
                            }
                            %>
                            </td>
                        </tr>
                    </table>
                    <table border="0" cellspacing="0" cellpadding="0" width="100%" style="margin:2px 0 2px 0;">
                        <tr>
                            <td style="white-space:nowrap; width:280px">
                                <div id="browse_Frame">
    <asp:table id="FoldersAndFiles" Runat="server" CellSpacing="1" CellPadding="0" Width="100%" CssClass="sortable">
        <asp:tablerow BackColor="#f0f0f0">
            <asp:tableheadercell Width="17px">
                <asp:imagebutton id="Delete" Runat="server" AlternateText="[[Deletefiles]]" ImageUrl="../Load.ashx?type=image&file=s_cut.gif" OnClick="Delete_Click" />
            </asp:tableheadercell>
            <asp:tableheadercell Width="20px">
                <asp:imagebutton id="DoRefresh" Runat="server" AlternateText="[[Refresh]]" ImageUrl="../Load.ashx?type=image&file=s_refresh.gif" OnClick="DoRefresh_Click" />
            </asp:tableheadercell>
            <asp:tableheadercell id="name_Cell" Wrap="True" Width="140px" CssClass="filelistHeadCol" Font-Bold="False">[[Name]]</asp:tableheadercell>
            <asp:tableheadercell id="size_Cell" Width="52px" CssClass="filelistHeadCol" Wrap="False" Font-Bold="False">[[Size]]</asp:tableheadercell>
            <asp:tableheadercell id="op_Cell" Width="16px" BorderColor=red>&nbsp;</asp:tableheadercell>
        </asp:tablerow>
    </asp:table>
                            </div>
                            
                            </td>
                            <td>
                                <div id="divouter">
                            
                                    <div id="divpreview">
                                        <img id="img_demo" alt="" src="../Load.ashx?type=image&file=1x1.gif" />
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <table border="0" cellspacing="0" cellpadding="0" width="97%">
                        <tr>
                            <td style="vertical-align: top">
                                <fieldset>
                                    <legend>[[Layout]]</legend>
                                    <div style="padding:3px;">
                                    <table border="0" cellpadding="2" cellspacing="0" class="normal">
                                        <tr>
                                            <td style="width:72px;white-space:nowrap">[[Alignment]]:</td>
                                            <td style="text-align:left">
                                                <select name="ImgAlign" style="width:80px;" id="Align" onchange="do_preview()" onpropertychange="do_preview()">
                                                    <option id="optNotSet" selected="selected" value="">[[Notset]]</option>
                                                    <option id="optLeft" value="left">[[Left]]</option>
                                                    <option id="optRight" value="right">[[Right]]</option>
                                                    <option id="optTexttop" value="textTop">[[Texttop]]</option>
                                                    <option id="optAbsMiddle" value="absMiddle">[[Absmiddle]]</option>
                                                    <option id="optBaseline" value="baseline">[[Baseline]]</option>
                                                    <option id="optAbsBottom" value="absBottom">[[Absbottom]]</option>
                                                    <option id="optBottom" value="bottom">[[Bottom]]</option>
                                                    <option id="optMiddle" value="middle">[[Middle]]</option>
                                                    <option id="optTop" value="top">[[Top]]</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>[[Bordersize]]:</td>
                                            <td style="text-align:left">
    <input type="text" size="2" name="Border" onchange="do_preview()" onpropertychange="do_preview()" onkeypress="return CancelEventIfNotDigit()" style="width:80px;" id="Border" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>[[BorderColor]]:</td>
                                            <td style="text-align:left;">
    <input type="text" id="bordercolor" name="bordercolor" size="7" /> <img alt="" src="../Load.ashx?type=image&file=colorpicker.gif" id="bordercolor_Preview" class="cursor" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <table border="0" cellpadding="0" cellspacing="0" class="normal">
                                                    <tr>
                                                        <td style="width:90px;">[[Width]]:</td>
                                                        <td>
    <input type="text" size="2" id="inp_width" onkeyup="checkConstrains('width');" onkeypress="return CancelEventIfNotDigit()" style="width:80px;" />
                                                        </td>
                                                        <td rowspan="3" align="right" style="vertical-align:middle">
    <img src="../Load.ashx?type=image&file=locked.gif" id="imgLock" width="25" height="32" title="[[ConstrainProportions]]" />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2" style="height:3px;">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>[[Height]]:</td>
                                                        <td>
    <input type="text" size="2" id="inp_height" onkeyup="checkConstrains('height');" onkeypress="return CancelEventIfNotDigit()" style="width:80px;" />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2" style="height:3px;">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2">
    <input type="checkbox" id="constrain_prop" checked="checked" onclick="BLOCKED SCRIPTtoggleConstrains();" /> [[ConstrainProportions]]
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    </div>
                                </fieldset>
                                <fieldset>
                                    <legend>[[Spacing]]</legend>
                                    <div style="padding:3px;">
                                    <table border="0" cellpadding="2" cellspacing="0" class="normal">
                                        <tr>
                                            <td style="width:90px;">[[Horizontal]]:</td>
                                            <td>
    <input type="text" size="2" name="HSpace" onchange="do_preview()" onpropertychange="do_preview()" onkeypress="return CancelEventIfNotDigit()" style="width:80px;" id="HSpace" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td valign="middle">[[Vertical]]:</td>
                                            <td>
    <input type="text" size="2" name="VSpace" onchange="do_preview()" onpropertychange="do_preview()" onkeypress="return CancelEventIfNotDigit()" style="width:80px;" id="VSpace" /></td>
                                        </tr>
                                    </table>
                                    </div>                                
                                </fieldset>
                            </td>
                            <td style="width:2px"></td>
                            <td style="vertical-align:top">
                                <fieldset>
                                    <legend>[[Insert]]</legend>
                                    <div style="padding:3px;">
                                    <table border="0" cellpadding="1" cellspacing="0" class="normal">
                                        <tr>
                                            <td valign="middle">
                                                [[Url]]:</td>
                                            <td colspan="3">
                                                <input type="text" id="TargetUrl" onchange="do_preview()" onpropertychange="do_preview()"
                                                    size="43" name="TargetUrl" runat="server" /></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td valign="middle">[[Alternate]]:</td>
                                            <td valign="middle"><input type="text" id="AlternateText" size="22" name="AlternateText" /></td>
                                            <td style="white-space:nowrap">&nbsp;[[ID]]:</td>
                                            <td><input type="text" id="inp_id" size="12" /></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td style="white-space:nowrap">[[longDesc]]:</td>
                                            <td colspan="3"><input type="text" id="longDesc" size="43" name="longDesc" /></td>
                                            <td><img alt="" src="../Load.ashx?type=image&file=Accessibility.gif" /></td>
                                        </tr>
                                    </table>
                                    </div>                                        
                                </fieldset>
                                <fieldset id="fieldsetUpload">
                                    <legend>
                                    [[Upload]] ([[MaxFileSizeAllowed]]
                                    <%= CuteEditor.Impl.FileStorage.FormatSize(secset.MaxImageSize * 1024)%>
                                    )</legend>
                                    <div id="uploader">
                                        <ce:uploader id="InputFile" runat="server"></ce:uploader>
                            <CE:Uploader id="anotheruploader" runat=server OnFileUploaded="anotheruploader_FileUploaded"></CE:Uploader>
                                    </div>                                
                                    <table>
                                        <% if(secset.RestrictUploadedImageDimension) {%>
                                        <tr>
                                            <td><img class="image-align" alt="" src="../Load.ashx?type=image&file=colorfocus.gif" /></td>
                                            <td>[[MaxImagedImension]]
                                            <%= secset.MaxImageWidth%>
                                            x
                                            <%= secset.MaxImageHeight%>
                                            [[pixels]].</td>
                                        </tr>
                                        <tr><td><img class="image-align" alt="" src="../Load.ashx?type=image&file=colorfocus.gif" /></td><td>[[AutomaticImageResizeOnOff]]
                                            <%= secset.AutoResizeUploadedImages? "[[on]]":"[[off]]" %>.</td></tr>
                                        <%}%>
                                        <tr><td><img class="image-align" alt="" src="../Load.ashx?type=image&file=colorfocus.gif" /></td>
                                        <td>
                                            <%if(secset.MaxImageFolderSize>0){%>
                                            <table border="0" cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td style="margin:0;padding:0">[[MaxFolderSizeAllowed]]: <%= CuteEditor.Impl.FileStorage.FormatSize(secset.MaxImageFolderSize * 1024)%>.</td>
                                                    <td>&nbsp; [[Used]]: <%= CuteEditor.Impl.FileStorage.FormatSize(RootDirectorySize) %></td>
                                                    <td>
                                                        <div class="progress-container">
                                                            <div id="progress_bar" style="width:<%= GetUsedPercent() %>%"></div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>
                                            <%}%>
                                        </td>
                                        </tr>                                
                                    </table>                    
                                </fieldset>
                                <div style="padding-top:12px;" align="center">
                                    <input class="formbutton" type="button" value="[[Insert]]" onclick="do_insert()"
                                        id="Button1" /> &nbsp;&nbsp;&nbsp; <input class="formbutton" type="button" value="[[Cancel]]" onclick="do_Close()" id="Button2" />
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                    </form>
        </body>
        <script type="text/javascript" src="Load.ashx?type=dialogscript&verfix=1006&file=DialogFoot.js"></script>
        <script type="text/javascript" src="Load.ashx?type=dialogscript&verfix=1006&file=Dialog_InsertImage.js"></script>
    </html>
    <script runat="server">
        
        protected override void InitOfType()
        {
            this.Context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            string folder=secset.ImageBrowserPath;
            if(folder==null||folder=="")folder=secset.ImageGalleryPath;
            
            string[] flist=folder.Split('|');
            if(flist.Length<2)
            {
                fs.VirtualRoot=CuteEditor.EditorUtility.ProcessWebPath(Context,null,folder).TrimEnd('/')+"/";
                return;
            }
            
            _multiplefolderlist=flist;
            
            //just set display to none, maybe javascript need it.
            FolderDescription.Style["display"]="none";
            
            for(int i=0;i<flist.Length;i++)
            {
                flist[i]=CuteEditor.EditorUtility.ProcessWebPath(Context,null,flist[i]).TrimEnd('/')+"/";
            }
            
            FolderList.DataSource=flist;
            FolderList.DataBind();
            FolderList.Visible=true;
            FolderList.AutoPostBack=true;
            FolderList.SelectedIndexChanged+=new EventHandler(FolderList_SelectedIndexChanged);
            Page.Load+=new EventHandler(Page_Load_ForFolderList);
            
            fs.VirtualRoot=flist[0];
        }
        
        string[] _multiplefolderlist;
        void Page_Load_ForFolderList(object sender,EventArgs args)
        {
            fs.VirtualRoot=_multiplefolderlist[FolderList.SelectedIndex];
        }
        void FolderList_SelectedIndexChanged(object sender,EventArgs args)
        {
            for(int i=0;i<FolderList.Items.Count;i++)
            {
                FolderList.Items[i].Text=FolderList.Items[i].Value;
            }
            fs.VirtualRoot=_multiplefolderlist[FolderList.SelectedIndex];
            CurrentDirectory=fs.VirtualRoot;
            Refresh();
        }
        protected override void OnPreRender(EventArgs args)
        {
            base.OnPreRender(args);
            anotheruploader.Visible = InputFile.Visible;
            InputFile.InsertButton.Style["display"] = "none";
            anotheruploader.InsertText = InputFile.InsertText;
            anotheruploader.CancelText = InputFile.CancelText;
            anotheruploader.MultipleFilesUpload = InputFile.MultipleFilesUpload;
            anotheruploader.ValidateOption.MaxSizeKB = InputFile.ValidateOption.MaxSizeKB;
            anotheruploader.ValidateOption.AllowedFileExtensions = InputFile.ValidateOption.AllowedFileExtensions;
            if(FolderList.Visible)
            {
                FolderList.SelectedItem.Text=FolderDescription.Text;
            }
        }
        void anotheruploader_FileUploaded(object sender, UploaderEventArgs args)
        {
            using (System.IO.Stream stream = args.OpenStream())
            {
                //will fire after the file upload successful
                //use you code to save the file into database
                //the second value is the file name,you can change it to the name you need
                InputFile.Upload(args.FileSize, DateTime.Now.ToString("yyyy-MM-dd") + " " + args.FileName, stream);
            }
        }
        protected override bool HideDirectoryItem(CuteEditor.Impl.DirectoryItem item)
        {
            //write custom code to filter the directories
            return base.HideDirectoryItem(item);
        }
        protected override bool HideFileItem(CuteEditor.Impl.FileItem item)
        {
            //write custom code to filter the files
            return base.HideFileItem(item);
        }
        
        protected override void GetFiles(ArrayList files)
        {            
            foreach (string ext in secset.ImageFilters)
            {
                if (ext == null || ext.Length == 0) continue;

                files.AddRange(fs.GetFileItems(CurrentDirectory, secset.FileNamePrefix + "*" + ext));
            }
            
        }
        protected override bool AllowFileName(string filename)
        {
            filename = filename.ToLower();
            foreach (string ext in secset.ImageFilters)
            {
                if (ext == null || ext.Length == 0) continue;
                if(filename.EndsWith(ext.ToLower()))
                    return true;
            }
            return false;
        }
        
        protected int GetUsedPercent()
        {
        int w = Convert.ToInt32(100*RootDirectorySize/(secset.MaxImageFolderSize * 1024));
        if(w<1)
            w=1;
            
        if(w>100)
            w=100;
            
        return w;      
        }
        protected override string CheckUploadData(ref byte[] data)
        {            
            if(secset.MaxImageFolderSize>0)
            {
                if (RootDirectorySize >= secset.MaxImageFolderSize * 1024)
                    return "Image folder size exceeds the limit: "+ CuteEditor.Impl.FileStorage.FormatSize(secset.MaxImageFolderSize * 1024);
            }
            
            System.Drawing.Image img;
            try
            {
                img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(data));
            }
            catch
            {
                return "Image is in the wrong format.";
            }
            return null;
        }
    </script>
    <script>
    var anotheruploader=document.getElementById('<%=anotheruploader.ClientID%>')
    anotheruploader.handlebrowse=function()
    {
        //will fire when you click on the upload button

    }
    </script>
     
     
    Regards,
     
    Ken
View as RSS news feed in XML