Available in the OSS Version

HTML Editor - Drag and Drop

The sample demonstrates how to insert image files from your desktop (or any other file directory) into the HTML editor by using igUpload widget.

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

The HTML editor widget can be used with HTML Drag and Drop API and File API specification in order to easily represent file object in the web application or the widget itself, as well programmatically selct them and access their data.
In HTML5, drag and drop is part of the standard, and any element could be draggable, event external files from the desktop.
Note: You can upload only images with a size smaller than 1 MB.

Code View

Show In JsFiddle

Copy to Clipboard

HTML

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <style type="text/css">
        span.ui-icon.ui-icon-contact {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png');
            background-position: -177px -97px;
        }

        #dropZone {
            position: absolute;
            border: 3px dashed #bbb;
            border-color: gray;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 1px;
            text-align: center;
            color: gray;
            opacity: 0.3;
            filter: alpha(opacity=30);
            background-color: white;
            vertical-align: middle;
            font-size: 30px;
            box-sizing: border-box;
        }

        /* Override sample's browser styles */
        #htmlEditor h1, #htmlEditor h2, #htmlEditor h3, #htmlEditor h4, #htmlEditor h5, #htmlEditor h6 {
            margin: 0px;
        }

        #htmlEditor h1 {
            font-size: 1.9em;
        }

        #sampleContainer {
            overflow: visible;
        }
    </style>

    <div id="htmlEditor"></div>
    <br />
    <div id="igUpload1"></div>
    <div id="error-message" style="color: #FF0000; font-weight: bold;"></div>
    <script>
        $(function () {
            var height = $('html').hasClass('touch') ? 400 : 330;

            $("#htmlEditor").igHtmlEditor({
                height: height,
                width: "100%"
            });

            // clear editor content
            $("#htmlEditor").igHtmlEditor("setContent", "", "html");

            $("#igUpload1").igUpload({
                mode: "multiple",
                autostartupload: true,
                progressUrl: "/IGUploadStatusHandler.ashx",
                controlId: "serverID1",
                multipleFiles: true,
                maxUploadedFiles: 3,
                allowedExtensions: ["gif", "jpg", "bmp", "png", "jpeg"],
                errorMessageValidatingFileExtension: "File extension not supported, try to drag some image file.",
                onError: function (e, args) {
                    showAlert(args);
                },
                fileUploaded: function (evt, ui) {
                    loadDataUriImages(ui.fileInfo.file);
                    // remove the drop zone element
                    $("#dropZone").remove();
                    // reset drop counter
                    dragging = 0;
                }
            });
        });

        function showAlert(args) {
            $("#error-message").html(args.errorMessage).stop(true, true).fadeIn(600).delay(3000).fadeOut(700);
        }

        // counter for the solution 'dragleave' of parent element fires when dragging over children elements
        var dragging = 0;

        // Setup the enter listener
        $("body").on({
            "dragenter": handleDragEnter,
            "dragleave": handleDragLeave
        });
        
        function handleDragEnter(evt) {
            evt.stopPropagation();
            evt.preventDefault();

            dragging++;

            if ($('#dropZone').length === 0) {
                $("<div/>", {
                    id: "dropZone",
                    text: "Drop images here or in the igUpload"
                }).appendTo(".igsb-running-sample");

                // Setup the drop listeners.
                var $dropZone = $('#dropZone'), boundries = $("#htmlEditor")[0].getClientRects()[0];

                $dropZone.on({
                    'drop': handleFileDrop,
                    'dragover': handleDragOver
                });

                $dropZone.css({
                    "top": "0px",
                    "width": boundries.width,
                    "height": boundries.height,
                    "line-height": boundries.height + "px",
                });
            }
        }

        function handleDragLeave(evt) {
            evt.stopPropagation();
            evt.preventDefault();

            dragging--;
            if (dragging === 0) {
                // remove the drop zone element
                $("#dropZone").remove();
            }
        }

        function handleFileDrop(evt) {
			evt.originalEvent.stopPropagation();
			evt.originalEvent.preventDefault();

            var $upload = $("#igUpload1"),
              files = evt.originalEvent.dataTransfer.files,
              output = []; // files is a FileList of File objects. List some properties.

            // Invoke file upload
            $upload.igUpload('container').trigger(evt);
            // remove the drop zone element
            $("#dropZone").remove();
            // reset drop counter
            dragging = 0;
        }

        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.originalEvent.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        }

        function loadDataUriImages(image) {
            var file = image;

            // Only process image files check
            // In the igUpload this is set by 'allowedExtensions'
            if (!file.type.match('image.*')) {
                return;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    var span = document.createElement('span'),
                      editorContent = $("#htmlEditor").igHtmlEditor("getContent", "html");

                    span.innerHTML = ['<img style="border: 1px solid #000;margin: 10px 5px 0 0;max-height: 150px; max-width: 200px" src="', e.target.result,
                      '" title="', escape(theFile.name), '"/>'
                    ].join('');

                    $("#htmlEditor").igHtmlEditor("setContent", editorContent + $(span).html(), "html");
                };
            })(file);

            // Read in the image file as a data URL.
            reader.readAsDataURL(file);
        }
    </script>
</body>
</html>

Ignite UI for jQuery | Samples

Search Results

HTML Editor - Drag and Drop

Code View