# File Upload through Uibuilder NodeRED Interface

**URL:** https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337
**Category:** General
**Tags:** uibuilder
**Created:** [25 March 2022 12:04 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337 "2022-03-25T12:04:57Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![stefanoanzilotti](https://avatars.discourse-cdn.com/v4/letter/s/ac8455/32.png) [@stefanoanzilotti](https://discourse.nodered.org/u/stefanoanzilotti)
#### Post date: [25 March 2022 12:04 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/1 "2022-03-25T12:04:57Z")

</div>

Dear all,

First of all, a little introduction to my system.  
I am using a docker container to run several services, one of them is obviously NodeRED.  
here I use an amazing _[node-red-contrib-uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder)_ to pull up my interface with HTML, CSS, and JS language (No Vue or React is used).

I go straight to the problem  
I would like to upload, from this interface, a _CSV / TXT_ file and store it in a server-side folder.

Wandering around the net I found some way like:

- _[node-red-contrib-http-multipart](https://flows.nodered.org/node/node-red-contrib-http-multipart)_
- _[node-red-contrib-file-upload](https://flows.nodered.org/node/node-red-contrib-file-upload)_

right now I am able just to read the file name in the debug section of NodeRED, but I do not know how to access the entire file.

Here same more detail about my work (following the previous [link](https://flows.nodered.org/node/node-red-contrib-http-multipart)):

- HTML PAGE:

```auto
IP:1880/uibuilder/import.html

```

![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/355dec9221dff4d82bd5ebbf3062ec559dd5eaa1.png)

- HTML CODE:

```auto
<form action="/upload" method="POST">
<input type="file" name="myFile" />
<input type="submit" />
</form>

```

- NR FLOW:

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6df7e9c31de42323ae5b2b7711954326e7c2a5b3.png)

- NR FUNCTION:

```auto
var fields = msg.req.fields;
msg.fields = Object.keys(fields);
var myFile = fields["myFile"][0];
msg.localFilename = myFile.path
return msg;

```

- NR OUTPUT

![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/0/6079dd5f8831543b9d5c51c2c12eb3b04941394f.png)

Moreover, the HTML page keeps loading after the SUBMIT click.

Hope to have been clear.  
Thank you in advance,

**Stefano**

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [25 March 2022 12:48 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/2 "2022-03-25T12:48:33Z")

</div>

I see at least 2 things to check:

- the `http in` node for /upload needs to have the option "Accept File Uploads" checked
- and the /upload flow needs to have a `http response` node at the end

You may also want to set the html form element encoding to use `multipart/form-data`, but I think that's implied when using the file selector.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 March 2022 12:49 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/3 "2022-03-25T12:49:23Z")

</div>

> [@stefanoanzilotti](#):
>
> `<form action="/upload" method="POST">`

Possibly try changing that to `<form action="/upload" method="POST" enctype="multipart/form-data">`

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 March 2022 12:51 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/4 "2022-03-25T12:51:17Z")

</div>

Interestingly, [Socket.IO](http://Socket.IO) has a binary file transfer capability, I didn't know that. I'll add it to the roadmap as something to maybe enable in uibuilder so that you can send a file as a buffer.

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [25 March 2022 12:58 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/5 "2022-03-25T12:58:52Z")

</div>

> [@stefanoanzilotti](#):
>
> Moreover, the HTML page keeps loading after the SUBMIT click.

Without an `http response` node at the end of your flow, the browser never gets an answer and keeps waiting until it times out (in 90 secs or so) with a 504 Gateway Timeout status (iirc)

You can set the response code in your `http response` node to be 204 (No Content) in order to keep from navigating to an empty page.

---

<div class="post-metadata">

### Author: ![stefanoanzilotti](https://avatars.discourse-cdn.com/v4/letter/s/ac8455/32.png) [@stefanoanzilotti](https://discourse.nodered.org/u/stefanoanzilotti)
#### Post date: [25 March 2022 14:42 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/6 "2022-03-25T14:42:40Z")

</div>

Thank you both guys @shrickus and @TotallyInformation.  
The main problem was related to the missing feature `multipart/form-data`.  
I still need to work to extract _filename_ and _path_ to correctly store it, but I can handle it.

Regarding the _keep loading_ issue, as from @shrickus, I trayed to add an `HTTP response` node.  
It works perfectly, but I would like to keep seeing the same page of the form. Do you have some more advice?

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 March 2022 15:01 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/7 "2022-03-25T15:01:39Z")

</div>

Been a while since I looked at that. But do you need to cancel the default action of the form?

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [25 March 2022 15:09 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/8 "2022-03-25T15:09:11Z")

</div>

> [@stefanoanzilotti](#):
>
> I would like to keep seeing the same page of the form

Adding statusCode 204 in the `http response` node _should_ cause the browser to stay on the current page...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/6/761125b85945778ba5bf5ef1c7850d6903acb53f.png)

Otherwise, you may have to write a submit function, that returns `false` to stop the browser from refreshing the page.

---

<div class="post-metadata">

### Author: ![stefanoanzilotti](https://avatars.discourse-cdn.com/v4/letter/s/ac8455/32.png) [@stefanoanzilotti](https://discourse.nodered.org/u/stefanoanzilotti)
#### Post date: [25 March 2022 15:11 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/9 "2022-03-25T15:11:13Z")

</div>

Actually, I did not think about it. Let's say it is not mandatory.  
Moreover, guys, do you have some information about the security of this upload?

For the moment it seems perfect, but I can try to improve it in a while if the transfer is secure enough.

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [25 March 2022 15:13 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/10 "2022-03-25T15:13:07Z")

</div>

> [@stefanoanzilotti](#):
>
> I still need to work to extract _filename_ and _path_ to correctly store it, but I can handle it.

Those fields are already parsed for you by node-red, and are available on `msg.req.files`, I believe. Change your `debug` node to show the "Complete msg object" and you will find what you need.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 March 2022 17:33 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/11 "2022-03-25T17:33:09Z")

</div>

> [@shrickus](#):
>
> Adding statusCode 204 in the `http response` node _should_ cause the browser to stay on the current page...

Nice!

> [@shrickus](#):
>
> msg.req.files

Correct - it returns a BUFFER.

This flow works but you will want to change the filename slightly since it currently dumps the file in the Node-RED install folder.

I can confirm that the actual page is NOT reloaded - that's good since it doesn't lose any live data on the page. However, you will want to have a script that empties the filename so that people don't keep uploading the same file.

```auto
[{"id":"6081b5d0ba078956","type":"http in","z":"bfec3af46a41235d","name":"","url":"/upload","method":"post","upload":true,"swaggerDoc":"","x":280,"y":380,"wires":[["54b563baa08e10b5","add8ee6a9e62361e"]]},{"id":"54b563baa08e10b5","type":"http response","z":"bfec3af46a41235d","name":"","statusCode":"204","headers":{},"x":800,"y":380,"wires":[]},{"id":"c86833183e63bf4c","type":"debug","z":"bfec3af46a41235d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":890,"y":460,"wires":[]},{"id":"c6fed61b5941f570","type":"file","z":"bfec3af46a41235d","name":"","filename":"","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"none","x":720,"y":460,"wires":[["c86833183e63bf4c"]]},{"id":"add8ee6a9e62361e","type":"change","z":"bfec3af46a41235d","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"req.files[0].buffer","tot":"msg"},{"t":"set","p":"filename","pt":"msg","to":"req.files[0].originalname","tot":"msg"},{"t":"set","p":"encoding","pt":"msg","to":"req.files[0].encoding","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":520,"y":460,"wires":[["c6fed61b5941f570"]]}]

```

Going to write this up on the uibuilder WIKI for future use. 🙂

> [@stefanoanzilotti](#):
>
> if the transfer is secure enough

The transfer is only secure if you make it so. You need to at least implement TLS encryption (e.g. use HTTPS not HTTP). Then you should also validate the upload data before blindly assuming that it is safe. For example, check the file mimetype matches the filename extension, block unsafe file types (or better still have an allow list of types), limit the filename length and characters, limit the buffer size.

You should also only be allowing updates from known and authenticated users.

You might also want to have checks of available storage before committing the file and some other process to clear down old files or limit space utilisation.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 March 2022 18:02 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/12 "2022-03-25T18:02:30Z")

</div>

> **[How to upload a file from the browser to Node RED ·...](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/How-to-upload-a-file-from-the-browser-to-Node-RED)**
>
> Easily create data-driven web UI's for Node-RED using any (or no) front-end library. - How to upload a file from the browser to Node RED · TotallyInformation/node-red-contrib-uibuilder Wiki

---

<div class="post-metadata">

### Author: ![stefanoanzilotti](https://avatars.discourse-cdn.com/v4/letter/s/ac8455/32.png) [@stefanoanzilotti](https://discourse.nodered.org/u/stefanoanzilotti)
#### Post date: [31 March 2022 09:49 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/13 "2022-03-31T09:49:13Z")

</div>

Thank you @TotallyInformation this last guide has been really useful.

Now I notice a now issue due the following message:

```auto
[uibuilderfe:socket-disconnect] Reason: ping timeout

```

I also followed this [POST](https://discourse.nodered.org/t/uibuilderfe-socket-disconnect-reason-transport-close-when-receiving-json-from-node-red/52288), but I did not work for me.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [31 March 2022 18:29 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/14 "2022-03-31T18:29:04Z")

</div>

So something is creating a delay between your client and the server. Most commonly, this is due to trying to pass really large data in a single msg.

One way to fix that would be to split your file in the client code if it is too large and then send each of the pieces and put them back together in node-red.

The other way requires you to mess with the [socket.io](http://socket.io) server settings. Under uibuilder v4, there is no mechanism for that I'm afraid - unless you manually hack the appropriate uibuilder source file.

However, if you are prepared to run a beta version, you could install the GitHub vNext branch which is what will soon be uibuilder v5. In this version, you can supply settings for [socket.io](http://socket.io) by adding the suitable properties to settings.js. It might be worth you creating a test instance of node-red with uibuilder vNext and trying it out to make sure it works.

---

<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: [14 April 2022 18:29 UTC](https://discourse.nodered.org/t/file-upload-through-uibuilder-nodered-interface/60337/15 "2022-04-14T18:29:34Z")

</div>

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