Ajax Control Toolkit Image Upload

Question

I am wondering if it is possible to customize the design of the Image Upload Screen that comes with the .net 4.0 Ajax Html Editor Image Upload Button. If it is possible does anyone have any links or examples?

Answer 1

So...the "Insert Image" feature of the AJAX Control Toolkit creates a horrid monstrosity of divs and spans, with all kinds of inline-styles and severely long IDs / name attributes (which I will put at the end of this answer, for reference).

However, there are some classes you can target to style specific components of the image upload popup window. Since there doesn't appear to be any documentation for this sub-component, I shall document these CSS classes below:

• .popupDiv - Selector for the outermost container for the image upload popup that is displayed when you click the "insert image" button
• .ajax__fileupload - Selector for the outer container div for the file upload area
• .ajax__fileupload_dropzone - Selector for the "drag and drop" file upload area. This will only appear in browsers that support this feature.
• .ajax__fileupload_selectFileContainer - Selector for the container around the traditional file upload area (click for windows file select dialog).
• .ajax__fileupload_selectFileButton - selector for the span around "Select file"
• .ajax__fileupload_topFileStatus - selector for the container around the "Please select file(s) to upload area (to the right of "Select a file")
• .ajax__fileupload_queueContainer - selector for the container that surrounds the files you've selected so far
  • .ajax__fileupload_fileItemInfo - You'll get one of these for each file you upload
• .ajax__fileupload_footer - Selector around the bottom section of the popup (below the list of files).
• .ajax__fileupload_ProgressBarHolder Container for the progress bar section of the popup
• .ajax__fileupload_progressBar - Use this to target the progress bar
• .ajax__fileupload_uploadbutton - Selector for the "Upload" button

This is a basic outline of what the popup looks like (I've removed all attributes except for class attributes):

<div class="popupDiv"> 
    <div>
        <div class="ajax__fileupload">
            <div class="ajax__fileupload_dropzone">
                Drop files here
            </div>
            <span class="ajax__fileupload_selectFileContainer">
                <span class="ajax__fileupload_selectFileButton">
                    Select File
                </span>
                <input type="file">
                <input type="file">
            </span>
            <div class="ajax__fileupload_topFileStatus">
                <div>
                    Please select file(s) to upload.
                </div>
            </div>
            <div class="ajax__fileupload_queueContainer">
            </div>
            <div class="ajax__fileupload_footer">
                <div class="ajax__fileupload_ProgressBarHolder">
                    <div>
                        <div class="ajax__fileupload_progressBar">
                        </div>
                    </div>
                </div>
                <div class="ajax__fileupload_uploadbutton">
                    Upload
                </div>
            </div>
        </div>
    </div>
    <div>
        Cancel
    </div>
</div>

Here is the (raw) generated HTML for the popup, with ugly inline styles / ids / names. Note that this is the output for Chrome. If you use older versions of IE, there will be some differences (other browsers may have differences as well, but the overall structure should be the same).

<div id="ctl00_SampleContent_htmlEditorExtender2_popupDiv" 
    style="opacity: 1; display: block; visibility: visible; position: fixed; z-index: 1000;" 
    class="popupDiv" displaychanged="true" visiblechanged="true">
    <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload">
        <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_ctl00" class="ajax__fileupload">
            <div class="ajax__fileupload_dropzone" id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_Html5DropZone" 
                style="width: 100%; height: 60px; visibility: visible;">
                Drop files here
            </div>
            <span id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_SelectFileContainer" 
                class="ajax__fileupload_selectFileContainer" style="float:left;">
                <span id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_SelectFileButton" 
                    class="ajax__fileupload_selectFileButton">
                    Select File
                </span>
                <input name="ctl00$SampleContent$htmlEditorExtender2_ajaxFileUpload$ctl04" 
                    type="file" id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_Html5InputFile" 
                    multiple="multiple" style="opacity: 0; visibility: visible;">
                <input name="ctl00$SampleContent$htmlEditorExtender2_ajaxFileUpload$ctl05" 
                    type="file" id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_InputFileElement" 
                    style="opacity:0;-moz-opacity:0.0;filter:alpha(opacity=0);display:none;visibility:hidden;">
            </span>
            <div class="ajax__fileupload_topFileStatus" style="position:relative;">
                <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_FileStatusContainer" 
                    style="right: 0px; top: 2px; height: 20px; line-height: 20px; visibility: visible; position: absolute;">
                    Please select file(s) to upload.
                </div>
            </div>
            <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_QueueContainer" 
                class="ajax__fileupload_queueContainer" style="display:none;visibility:hidden;margin-top:28px;">
            </div>
            <div class="ajax__fileupload_footer" id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_Footer" 
                align="right">
                <div class="ajax__fileupload_ProgressBarHolder">
                    <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_ProgressBarContainer" align="left" 
                        style="float:left;width:100%;display:none;visibility:hidden;">
                        <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_ProgressBar" class="ajax__fileupload_progressBar" 
                        style="width: 100%; display: none; visibility: hidden; overflow:visible;white-space:nowrap; height:20px;">
                        </div>
                    </div>
                </div>
                <div id="ctl00_SampleContent_htmlEditorExtender2_ajaxFileUpload_UploadOrCancelButton" 
                    class="ajax__fileupload_uploadbutton" style="display: none; visibility: hidden;">
                    Upload
                </div>
            </div>
        </div>
    </div>
    <div id="ctl00_SampleContent_htmlEditorExtender2_btnCancel" 
        style="float: right; position:relative; padding-left: 20px; top:10px; width: 55px; border-color:black;border-style: solid; border-width: 1px;cursor:pointer;" 
        float="right" unselectable="on">
        Cancel
    </div>
</div>