88 lines
2.8 KiB
HTML
88 lines
2.8 KiB
HTML
<script type="text/x-red" data-template-name="ui_upload">
|
|
<div class="form-row" id="template-row-group">
|
|
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
|
|
<input type="text" id="node-input-group" />
|
|
</div>
|
|
<div class="form-row" id="template-row-size">
|
|
<label><i class="fa fa-object-group"></i> Size</label>
|
|
<input type="hidden" id="node-input-width" />
|
|
<input type="hidden" id="node-input-height" />
|
|
<button class="editor-button" id="node-input-size"></button>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-title"><i class="fa fa-i-cursor"></i> Title</label>
|
|
<input type="text" id="node-input-title" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
|
|
<input type="text" id="node-input-name" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-accept"><i class="fa fa-filter"></i> Accept file types</label>
|
|
<input type="text" id="node-input-accept" placeholder="text/*,.csv,.txt" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-chunk"><i class="fa fa-sign-in"></i> Chunk size (kB)</label>
|
|
<input type="number" id="node-input-chunk" min="1" max="2048" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-input-transfer"><i class="fa fa-flag"></i> Transfer type</label>
|
|
<select id="node-input-transfer">
|
|
<option value="text">Text (Windows-1252 / ASCII / ANSI)</option>
|
|
<option value="binary">Binary</option>
|
|
</select>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-red" data-help-name="ui_upload">
|
|
<p>UI widget node for uploading files content by Socket.io streaming</p>
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
/* global RED:false, $:false */
|
|
|
|
function uiUploadConf(NAME) {
|
|
const ICON = 'white-globe.svg';
|
|
|
|
return {
|
|
category: 'dashboard',
|
|
color: 'rgb(63, 173, 181)',
|
|
defaults: {
|
|
group: { type: 'ui_group', required: true },
|
|
title: { value: 'upload' },
|
|
accept: { value: '' },
|
|
name: { value: '' },
|
|
order: { value: 0 },
|
|
width: {
|
|
value: 0,
|
|
validate: function (v) {
|
|
const width = +v || 0;
|
|
const currentGroup = $('#node-input-group').val() || this.group;
|
|
const groupNode = RED.nodes.node(currentGroup);
|
|
const valid = !groupNode || +width <= +groupNode.width;
|
|
$('#node-input-size').toggleClass('input-error', !valid);
|
|
return valid;
|
|
},
|
|
},
|
|
height: { value: 5 },
|
|
chunk: { value: 256 },
|
|
transfer: { value: 'binary' },
|
|
},
|
|
inputs: 1,
|
|
outputs: 1,
|
|
icon: ICON,
|
|
paletteLabel: NAME,
|
|
label: function () { return this.name || NAME; },
|
|
oneditprepare: function () {
|
|
$('#node-input-size').elementSizer({
|
|
width: '#node-input-width',
|
|
height: '#node-input-height',
|
|
group: '#node-input-group',
|
|
});
|
|
},
|
|
};
|
|
}
|
|
|
|
RED.nodes.registerType('ui_upload', uiUploadConf('upload'));
|
|
</script>
|