Integration point for drag and drop files support? #1330

Closed
matthewkastor opened this Issue Mar 28, 2013 · 7 comments

Projects

None yet

5 participants

@matthewkastor
Contributor

I've got a bit of code that provides drag and drop support for files. Using it I can drop a file on the editor and the editor's contents will be replaced with the file's contents.

I don't know where this would be integrated into ace so I'm looking for some direction. I'm guessing that it would belong at a point in code where the editor and session have been or are being instantiated but I'm not familiar enough with this project to know where that is exactly.

Here is the code

var catchDroppedFiles = function (editor) {
    "use strict";
    function catchAndDoNothing(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    function drop(e) {
        catchAndDoNothing(e);
        var file = e.dataTransfer.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var contents = e.target.result;
                editor.session.setValue(contents);
            };
            reader.readAsText(file);
        } else {
            throw new Error("Failed to load file");
        }
    }
    function dragAndDropHook() {
        editor.container.addEventListener("dragenter", catchAndDoNothing, false);
        editor.container.addEventListener("dragover", catchAndDoNothing, false);
        editor.container.addEventListener("drop", drop, false);
    }
    dragAndDropHook();
};
@nightwing
Member

I think this shouldn't be in the editor by default, since ides usually need to upload dropped file, instead of replaceing current files content.
Optional plugin might be fine, (see also https://github.com/ajaxorg/ace/blob/master/demo/kitchen-sink/demo.js#L431)

@matthewkastor
Contributor

Nice. :D I like a lot of the things the kitchen sink demo does but it's so massive I get lost looking through it. That is a much better implementation of the drag and drop.

I suppose I should figure out how to make a plugin for Ace. You're right that it could get in the way of doing an upload instead of a replacement since there's no way to tell ahead of time whether or not to notify the parentNode of the editor.container when files are dropped.

@naivefun
naivefun commented Nov 2, 2016

@matthewkastor how did you get the integration done?

@matthewkastor
Contributor
matthewkastor commented Nov 12, 2016 edited

@naivefun It's in https://github.com/atropa/atropa-ide/blob/master/ace/ext-drop_load.js but it was built years ago. I don't think it would take a lot of work to put it into the current source tree. If @nightwing wants it I'll add a pull request.

/* ***** BEGIN LICENSE BLOCK *****
 * Distributed under the BSD license:
 *
 * Copyright (c) 2010, Ajax.org B.V.
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of Ajax.org B.V. nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 * ***** END LICENSE BLOCK ***** */



ace.define('ace/ext/drop_load', ['require', 'exports', 'module' , 'ace/lib/event'], function(require, exports, module) {

module.exports.init = function (editor, onDropFn) {
    var event = require("ace/lib/event");
    var container = editor.container;
    var callback = onDropFn || function () {


    };
    event.addListener(container, "dragover", function(e) {
        var types = e.dataTransfer.types;
        if (types && Array.prototype.indexOf.call(types, 'Files') !== -1) {
            return event.preventDefault(e);
        }
    });

    event.addListener(container, "drop", function(e) {
        var file;
        try {
            file = e.dataTransfer.files[0];
            if (window.FileReader) {
                var reader = new FileReader();
                reader.onload = function() {
                    editor.session.setValue(reader.result);
                    callback(file, reader);
                };
                reader.readAsText(file);
            }
            return event.preventDefault(e);
        } catch(err) {
            return event.stopEvent(e);
        }
    });
};

});
@atifsaddique211f

@matthewkastor did you created any PR with this integration or not?

@rocketinventor

@matthewkastor Interesting...
Is there an online demo that we can try?

@matthewkastor
Contributor

I've put together a few things here and there for ACE but I don't believe this is in source control. I do have another project that has this implemented in it, atropa-ide. The version of ace editor it's using is pretty old, but it works for what I want. https://github.com/atropa/atropa-ide/blob/master/README.md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment