ui_upload.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>