# UI upload button -\> read filename?

**URL:** <https://discourse.nodered.org/t/ui-upload-button-read-filename/82214>\
**Category:** Dashboard\
**Created:** [20 October 2023 09:53 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214 "2023-10-20T09:53:24Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [20 October 2023 09:53 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/1 "2023-10-20T09:53:24Z")

</div>

Hi folks,

I have pasted @Ha-Steve s UI [upload button](https://flows.nodered.org/flow/0332805b3a04d6aecfe17c27ab81ad9f) into my flow.

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

This is the UI template code:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [20 October 2023 10:06 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/2 "2023-10-20T10:06:41Z")

</div>

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)](https://developer.mozilla.org/en-US/docs/Web/API/File)

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [20 October 2023 10:08 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/3 "2023-10-20T10:08:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [20 October 2023 10:11 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/4 "2023-10-20T10:11:51Z")

</div>

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 )

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

```

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

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [20 October 2023 10:39 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/5 "2023-10-20T10:39:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [20 October 2023 10:42 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/6 "2023-10-20T10:42:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [20 October 2023 10:44 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/7 "2023-10-20T10:44:53Z")

</div>

I know! 🤷‍♂️

```auto
{"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"}

```

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [20 October 2023 10:47 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/8 "2023-10-20T10:47:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![protonmw](https://avatars.discourse-cdn.com/v4/letter/p/b3f665/32.png) [@protonmw](https://discourse.nodered.org/u/protonmw)\
**Post date:** [20 October 2023 10:54 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/9 "2023-10-20T10:54:00Z")

</div>

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

![2023-10-20 12_53_02-Node-RED _ 10.162.3.248](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c70f755639cdc6923486477a8219840221062cec.png)

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [20 October 2023 11:06 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/10 "2023-10-20T11:06:09Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b880145806b16f5c0c65769c87b4630c28740e0.png)

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

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [20 October 2023 11:28 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/11 "2023-10-20T11:28:51Z")

</div>

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](https://jsfiddle.net/s8dkL0ar/)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [19 November 2023 11:29 UTC](https://discourse.nodered.org/t/ui-upload-button-read-filename/82214/12 "2023-11-19T11:29:45Z")

</div>

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