This project has moved. For the latest updates, please go here.

Upload Image and insert it to textarea

Mar 10, 2010 at 6:40 AM

I have written some script to support upload image and insert it to text area. Now I would like to share it to you

 

<script type="text/javascript">
        //// You can also override the "default" colors option of the jHtmlAreaColorPickerMenu
        //// to show only the specific colors you want.
        // jHtmlAreaColorPickerMenu.defaultOptions.colors = ["red", "yellow", "blue", "green", "purple", "white", "black"];

        // The followin creates a jHtmlArea and adds a custom list of toolbar buttons.
        // Among the buttons is the "forecolor" button that will automatically take
        // advantage of the jHtmlAreaColorPickerMenu plugin.
        $(function() {
            $("#NewsContentTextArea").htmlarea({
                toolbar: [["html", "|", "forecolor", "|", "bold", "italic", "underline", "|", "p", "h1", "h2", "h3", "|", "link", "unlink"] // Overrides/Specifies the Toolbar buttons to show
                      , [{
                          // This is how to add a completely custom Toolbar Button
                          css: "image",
                          text: "Insert image",
                          action: function(btn) {
                              $("#divUploadBar").css("display", "none");
                              $("#divUploadBar").slideDown("slow");
                          }
}]
                      ]
            });
            var uploadBar = '<div style="clear:both;display:none;" id="divUploadBar">'
                                + '    <div>'
                                + '        <input type="file" onchange="return IsValidFileExtension(\'txtfile\',\'msgError\',\'btnUpload\')"'
                                + '            size="20" name="txtfile" id="txtfile" />&nbsp;&nbsp;&nbsp;'
                                + '        <input id="btnUpload" type="button" onclick="UploadFile(\'txtfile\',\'msgError\',\'btnUpload\')" value="Open File" disabled="disabled" />'
                                + '        <input id="btnCancel" type="button" onclick="CancelUploadImage();" value="Cancel" />'
                                + '    </div>'
                                + '    <div id="divcontainer">'
                                + '        <div id="msgError" style="display: none">'
                                + '            &nbsp</div>'
                                + '    </div>'
                                + '</div>'
            $("div.jHtmlArea div.ToolBar").append(uploadBar);
        });      


// --- Upload File --- //
function obj(id) {
    return document.getElementById(id);
}

function CancelUploadImage() {
    $("#divUploadBar").slideUp("slow");
}

function IsValidFileExtension(fileID, errorMessageDiv, uploadButtonID) {

    var filename = obj(fileID).value;
    var isOK = false;
    if (filename != "") {
        var ext = filename.substring(filename.lastIndexOf('.') + 1, filename.length).toLowerCase();
        var validExtension = "|bmp|dib|gif|jpg|jpeg|jpe|jfif|tif|tiff|png|";

        isOK = validExtension.indexOf("|" + ext + "|") >= 0 ? true : false;
        if (!isOK) {
            obj(errorMessageDiv).style.display = 'block';
            showAlertMessage(errorMessageDiv, "Sorry, You have chosen an invalid file extension. Please choose an image file.", 1);
        }
        else {
            obj(errorMessageDiv).innerHTML = "";
            isOK = true;
        }
        obj(uploadButtonID).disabled = isOK ? false : true;
    }
    return isOK;
}

function UploadFile(fileID, errorMessageDiv, uploadButtonID) {
    if (IsValidFileExtension(fileID, errorMessageDiv, uploadButtonID)) {
        parent.BlockUI();
        $.ajaxFileUpload
                (
                    {
                        url: '../Handlers/Others/UploadNewsImage.ashx',
                        secureuri: false,
                        fileElementId: fileID,
                        dataType: 'html',
                        success: function(data, status) {
                            var dataMessage = data.split('|');
                            var isError = dataMessage[0] == "true" ? true : false;
                            var errorMessage = dataMessage[1];
                            var imageUrl = dataMessage[2];
                            obj(errorMessageDiv).style.display = isError ? 'block' : 'none';
                            if (isError) {
                                showAlertMessage(errorMessageDiv, errorMessage, 1);
                            }
                            else {
                                $("#NewsContentTextArea").htmlarea("image", imageUrl);                                
                            }
                            parent.jQuery.unblockUI();
                        }
                    }
                )
    }
}
// --- End Upload File --- //

 

 
    </script>

Jul 28, 2010 at 12:56 AM

Where do I put this script to make it work?

Nov 24, 2011 at 2:10 PM

Thanks for sharing, it realy helped.

Apr 13, 2012 at 12:16 PM

Can u please provide code for image upload. 

 

May 21, 2012 at 5:44 PM

You might also try integrating with uploadify for jQuery.  It is great and handles uploading multiple files at the same time very well.

http://www.uploadify.com/