Accepting file drops

This builds on the following intros:

Script

By default, when you create a new app, you can’t drop any files in it. That’s to hold users hands, so they don’t drop files in places, where those do not make sense. For example, let’s see this hello-world app. All it does is printing Hello world!. Obviously, it would make no sense to let users drop anything it it.

Now, let’s change our hello-world app to function as a two-column splitter instead. We create a container div.

var p = ''

p += '<div class="-container">'
    //...
p += '</div>'

response.body(p)

That will contain 2 columns.

var p = ''

p += '<div class="-container">'
    p += '<div class="-left">'
        //...
    p += '</div>'
    p += '<div class="-right">'
        //...
    p += '</div>'
p += '</div>'

response.body(p)

The left column shall display contents in placeholder 1.

var p = ''

p += '<div class="-container">'
    p += '<div class="-left">'
        p += os.inline(f.query(':1:c'))
    p += '</div>'
    p += '<div class="-right">'
        //...
    p += '</div>'
p += '</div>'

response.body(p)

And mark it as a placeholder to allow drops.

var p = ''

p += '<div class="-container">'
    p += '<div class="-left o1-placeholder" data-o1-placeholder="1">'
        p += os.inline(f.query(':1:c'))
    p += '</div>'
    p += '<div class="-right">'
        //...
    p += '</div>'
p += '</div>'

response.body(p)

Same goes for the right column, except it will represent placeholder 2.

var p = ''

p += '<div class="-container">'
    p += '<div class="-left o1-placeholder" data-o1-placeholder="1">'
        p += os.inline(f.query(':1:c'))
    p += '</div>'
    p += '<div class="-right o1-placeholder" data-o1-placeholder="2">'
        p += os.inline(f.query(':2:c'))
    p += '</div>'
p += '</div>'

response.body(p)

Let’s also create an .InlineStyle file to make the layout right.

.-container {
    overflow: hidden;
}
.-left,
.-right {
    width: 48%;
    min-height: 50px;
}
.-left {
    float: left;
}
.-right {
    float: right;
}

Let’s see what we have so far. In structure view, you can verify the placeholders exist, yet if you try to drop any contents in them, they won’t react at all. That’s because of the missing .Accept file.

To allow drops, let’s create an .Accept file within our app. Set its file type to accept-1. And allow dropping contents in placeholder 1. For that, we create an attribute named placeholder-1 of type string, and set its value to .Inline, because contents are defined as files that implement the .Inline interface. Same goes for placeholder-2.

{
    "title": "",
    "link": "",
    "type": "accept-1",
    "statusCode": 0,
    "attr": {
        "placeholder-1 string": ".Inline",
        "placeholder-2 string": ".Inline"
    }
}

Before we try it, let’s validate our .Accept file by visiting it directly within our web browser. Okay, it’s valid.

Now let’s try dropping contents in our column splitter app. New. And it works.

Some more details about the .Accept file. You can filter for pages using the .Page interface, that’s typically used by themes to allow creating pages in a given menu. To only accept images, use the .Image interface. The method names must be separated by spaces, they represent an AND relationship. So for example, to accept files that implement both the page and image interfaces, you would write .Page .Image. To accept everything, specify the empty interface. There is also a default setting, using the string attribute default. For example, to accept everything in all placeholders, you would set the default attribute to an empty value.

{
    "title": "",
    "link": "",
    "type": "accept-1",
    "statusCode": 0,
    "attr": {
        "default string": ""
    }
}

That’s it.