UI upload button -> read filename?

Dashboard
1

Hi folks,

I have pasted @Ha-Steve s UI upload button into my flow.

How can I also retrieve the name of the selected file?

This is the UI template code:

<body>
<button class="md-raised md-button md-ink-ripple" onclick="importData()">Upload</button>    

<script>
let restoreScope = scope;

function importData() {
  let input = document.createElement('input');
  input.type = 'file';
  input.id = 'restoreBtn';
  input.onchange = _ => {
    // you can use this method to get file and perform respective operations
        let fReader = new FileReader();
        fReader.readAsText(input.files[0]);
        fReader.onloadend = function(event){
        restoreScope.send({payload:event.target.result}});}
        };
  input.click();
}
</script>
</body>
2

Hi @protonmw

input.files[0] yields the first File.
And each File has various properties, one of which is name

so input.files[0].name will give you the name

See:

File - Web APIs | MDN (mozilla.org)

3

Great! But, where to put in to be part of the out msg object?

4

I don't use dashboard, but something like the below.
(just add a name property to your message, setting it to the name of the file )

 restoreScope.send({'payload':event.target.result, 'name':input.files[0].name})

You can then retrieve it in your flow with msg.name

5

Changes in this line have no effect at all?! It simply outputs the content as msg.payload.

6

The name is located at msg.name, In your flow not msg.payload.name

Use a debug node, set it to entire message, and you will see it

7

I know! :man_shrugging:

{"payload":"@000 0000\r\n@001 0000\r\n@002 0000\r\n@003 0000\r\n@004 0000\r\n@005 0000\r\n@006 0000\r\n@007 0000\r\n@008 0000\r\n@009 0000\r\n@00a 0000\r\n@00b 0000\r\n...","socketid":"s-UorcDlEeZ855KBAAAP","_msgid":"733953e100c4e84b"}

<body>
<button class="md-raised md-button md-ink-ripple" onclick="importData()">Upload</button>    

<script>
let restoreScope = scope;

function importData() {
  let input = document.createElement('input');
  input.type = 'file';
  input.id = 'restoreBtn';
  input.onchange = _ => {
    // you can use this method to get file and perform respective operations
        let fReader = new FileReader();
        fReader.readAsText(input.files[0]);
        fReader.onloadend = function(event){
            restoreScope.send()
        }
    }
  input.click();
}
</script>
</body>
8

The debug node is maybe capped (to stop your browser from being overloaded) - you can change that in settings.js

In the debug node - only debug msg.name see if you get it

9

No it isn't. msg.name is not set...

2023-10-20 12_53_02-Node-RED _ 10.162.3.248

<body>
<button class="md-raised md-button md-ink-ripple" onclick="importData()">Upload</button>    

<script>
let restoreScope = scope;

function importData() {
  let input = document.createElement('input');
  input.type = 'file';
  input.id = 'restoreBtn';
  input.onchange = _ => {
    // you can use this method to get file and perform respective operations
        let fReader = new FileReader();
        fReader.readAsText(input.files[0]);
        fReader.onloadend = function(event){
            restoreScope.send({'payload':event.target.result, 'name':input.files[0].name})
        }
    }
  input.click();
}
</script>
</body>
10

Odd!

As that is how you get the name (and attach message properties in general, as it's using the standard practice of an Object being sent)

scope.send({'payload':event.target.result, 'name':input.files[0].name})

image

I don't use Dashboard - so I may be missing something (plenty around here that use dashboard)

11

Here is a fiddle of it working, so I'm really not sure why you're not getting name in the debug attached to it (use a small text file)

JSFiddle - Code Playground

12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.