prisme-flow/nodes/bridge/dropbox/dropbox.html

prisme platform flow engine

<!--
 Created by prisme.io on 09/06/2017.

 @author <a href="mailto:hello@prisme.io">savane vamara</a> (prisme.io)

-->

<script type="text/x-red" data-template-name="dropbox-config">
    <div class="form-row">
        <label for="node-config-input-appkey" style="width:120px;"><i class="fa fa-key"></i> <span>App Key</span></label>
        <input class="input-append-left" type="text" id="node-config-input-appkey" style="width: 60%;" >
    </div>
    <div class="form-row">
        <label for="node-config-input-appsecret" style="width:120px;"><i class="fa fa-lock"></i> <span>App Secret</span></label>
        <input class="input-append-left" type="password" id="node-config-input-appsecret" style="width: 60%;" >
    </div>
    <div class="form-row">
        <label for="node-config-input-accesstoken" style="width:120px;"><i class="fa fa-bookmark"></i> <span>Access Token</span></label>
        <input class="input-append-left" type="password" id="node-config-input-accesstoken" style="width: 60%;" >
    </div>
    <div class="form-tips">
        <span>To obtain these credentials, visit the href='https://www.dropbox.com/developers'
        Dropbox developer home Once signed up:</span>
        <span>click 'Create app select 'Dropbox API app' select
        'Files and datastores', choose an appropriate answer as to whether your node should be limited to its
        own folder or given full access. (This can be changed later so choose 'Yes' to restrict the application
        while testing might be a good idea. choose an app name click 'Create app'.</span>
        <span>The subsequent app page will contain the App key,
        App secret and a 'Generate' button to produce a suitable 'access token'.</span>
    </div>
</script>

<script type="text/javascript">
(function() {
    RED.nodes.registerType('dropbox-config',{
        category: 'config',
        defaults: { },
        credentials: {
            appkey: {type:"text",required:true},
            appsecret: {type: "password",required:true},
            accesstoken: {type: "password",required:true},
        },
        label: function() {
            return this.name || "dropbox";
        },
        exportable: false,
    });
})();
</script>

<script type="text/x-red" data-template-name="dropbox in">
    <div class="form-row">
        <label for="node-input-dropbox"><i class="fa fa-user"></i> <span>Dropbox</span></label>
        <input type="text" id="node-input-dropbox">
    </div>
    <div class="form-row node-input-filepattern">
         <label for="node-input-filepattern"><i class="fa fa-file"></i> <span>Filename Pattern</span></label>
         <input type="text" id="node-input-filepattern">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="dropbox in">
    <p>Dropbox watch node. Checks for file changes on Dropbox every 10 minutes.</p>
    <p>By default all file events are reported, but the filename pattern can
    be supplied to limit the events to files which have full filenames
    that match the glob pattern.</p>
    <p>The event messages consist of the
    full filename in <code>msg.payload</code> property, the filename
    in <code>msg.file</code>, the event type in <code>msg.event</code> and
    the <a href="https://github.com/dropbox/dropbox-js">dropbox.js</a>
    <i>PulledChange</i> object in <code>msg.data</code>.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('dropbox in',{
        category: 'storage-input',
        color:"#C0DEED",
        defaults: {
            dropbox: {type:"dropbox-config",required:true},
            filepattern: {value:""},
            name: {value:""}
        },
        inputs: 0,
        outputs: 1,
        icon: "dropbox.png",
        label: function() {
            return this.name || "dropbox";
        }
    });
</script>

<script type="text/x-red" data-template-name="dropbox">
    <div class="form-row">
        <label for="node-input-dropbox"><i class="fa fa-user"></i> <span>Dropbox</span></label>
        <input type="text" id="node-input-dropbox">
    </div>
    <div class="form-row node-input-filename">
         <label for="node-input-filename"><i class="fa fa-file"></i> <span>Filename</span></label>
         <input type="text" id="node-input-filename">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="dropbox">
    <p>Dropbox input node. Downloads content from Dropbox.</p>
    <p>The filename on Dropbox is taken from the node <b>Filename</b>
    field or the <code>msg.filename</code> property.</p>
    <p>The downloaded content is sent as <code>msg.payload</code>. The node
    tries to detect if the file is purely UTF8 text and if so returns a string object.
    Otherwise it return a binary buffer.</p>
    <p>If the download fails <code>msg.error</code> will contain an error object.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('dropbox',{
        category: 'storage-input',
        color:"#C0DEED",
        defaults: {
            dropbox: {type:"dropbox-config",required:true},
            filename: {value:""},
            name: {value:""}
        },
        inputs: 1,
        outputs: 1,
        icon: "dropbox.png",
        align: "right",
        label: function() {
            return this.name || "dropbox";
        }
    });
</script>

<script type="text/x-red" data-template-name="dropbox out">
    <div class="form-row">
        <label for="node-input-dropbox"><i class="fa fa-user"></i> <span>Dropbox</span></label>
        <input type="text" id="node-input-dropbox">
    </div>
    <div class="form-row node-input-filename">
         <label for="node-input-filename"><i class="fa fa-file"></i> <span>Filename</span></label>
         <input type="text" id="node-input-filename">
    </div>
    <div class="form-row node-input-localFilename">
         <label for="node-input-localFilename"><i class="fa fa-file"></i> <span>Local Filename</span></label>
         <input type="text" id="node-input-localFilename">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="dropbox out">
    <p>Dropbox out node. Uploads content to Dropbox.</p>
    <p>The filename on Dropbox is taken from the node <b>filename</b>
    property or the <code>msg.filename</code> property.</p>
    <p>You can upload a file by passing in a filename using the <b>Local Filename</b> field or
    <code>msg.localFilename</code> property, or you can pass in content directly using <code>msg.payload</code>.</p>
    <p>The file will be uploaded to a directory on Dropbox called <i>Apps/{appname}/{appfolder}</i>
    where <i>{appname}</i> and <i>{appfolder}</i> are set when you set up the Dropbox application key and token.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('dropbox out',{
        category: 'storage-output',
        color:"#C0DEED",
        defaults: {
            dropbox: {type:"dropbox-config",required:true},
            filename: {value:""},
            localFilename: {value:""},
            name: {value:""}
        },
        inputs:1,
        outputs:0,
        icon: "dropbox.png",
        align: "right",
        label: function() {
            return this.name || "dropbox";
        }
    });
</script>