Uploading files to Node-Red

[Ian M]

Hi,

Just wondering what the current best practice is for uploading a file (an image) from an HTML form to Node-Red.

What I want to be able to do is have a web page hosted within NR that can upload a file to the NR server at which point NR saves it in a directory.

Does anyone have some suggestions as to how I should approach this, or an example?

Thanks,
Ian

[Nathanaël Lécaudé]

Did you try this ?

http://flows.nodered.org/node/node-red-node-file-upload

[Ian M]

I downloaded and installed this as the first thing I tried, but it seems that it is built to allow NR to upload to another web site, not for NR to be the receiving server...

[Nicholas O'Leary]

Just as an fyi, the author of that node has kindly renamed it as node-red-contrib-file-upload as per our naming guidelines - http://flows.nodered.org/node/node-red-contrib-file-upload - so the previous link 404s now.

File Upload to node-red has come up a couple times - there isn't a quick and easy solution right now, but it is possible, have a search of the google group for the previous discussion.

Given it has come up a couple times now, I'll see about adding a File Upload mode to the existing HTTP In node (although it may end-up as a new node in the HTTP set of nodes).

Nick

--
http://nodered.org
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[John O'Connor]

I know this is a bit of necromancing, but I had the same need and created a modified http node that allows for multi-part form submissions.

https://github.com/sax1johno/node-red-contrib-http-multipart

It can handle any multi-part form submission and places the files in "msg.req.files".  It's configured by selecting which fields you want to process as files.  Non-file fields are put in msg.body and can be accessed as well.

It's simple but gets the job done.  I have it uploading files automatically to a publicly-viewable Amazon S3 bucket.

[Nathanaël Lécaudé]

Very interesting, do you have an example flow to go with it ?

Thanks !

[Pete Kavanagh]

I'm really struggling to get a file upload working within a dashboard.

The examples where you can have a HTTP listener on say /test/upload and the form then redirects you to /test/uploaded etc. - I can't see how to apply these to a dashboard scenario where I want to use the regular /ui URL and have the file upload form within a dashboard template node.

Thanks.

[Nick O'Leary]

Hi Pete,

Here's a quick example that works for me:

Create a ui_template with the following content:

<form action="/file-upload" method="post" enctype="multipart/form-data">

<input type="file" name="fileToUpload" id="fileToUpload">

<input type="submit" value="Upload Image" name="submit">

</form>

This is a simple html form set to upload its contents (which includes a file input) to the /file-upload url.

Then, I have an HTTP In node set to accept POSTs on /file-upload - and I have ticked the 'Accept file uploads' option.

When I hit the submit button the form, the HTTP In node is triggered with the uploaded file under msg.req.files[0]

Does that help?

[{"id":"90de0cfe.ca90a","type":"http in","z":"d7390dbd.02ae5","name":"","url":"/file-upload","method":"post","upload":true,"swaggerDoc":"","x":543,"y":368,"wires":[["f44eee6a.fa1a8","7835838e.a259cc"]]},{"id":"f44eee6a.fa1a8","type":"debug","z":"d7390dbd.02ae5","name":"","active":true,"console":"false","complete":"req.files","x":859,"y":376,"wires":[]},{"id":"7835838e.a259cc","type":"function","z":"d7390dbd.02ae5","name":"","func":"msg.payload = \"OK\";\nreturn msg;","outputs":1,"noerr":0,"x":650,"y":420,"wires":[["b2930be5.501e38"]]},{"id":"b2930be5.501e38","type":"http response","z":"d7390dbd.02ae5","name":"","statusCode":"","headers":{},"x":750,"y":460,"wires":[]}]

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack

---
You received this message because you are subscribed to the Google Groups "Node-RED" group.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/cd08d848-126b-482a-87b0-26e916a16031%40googlegroups.com.

[Pete Kavanagh]

Hi Nick, thanks for replying.  It does help, but is similar to other examples that I've seen in as much as it navigates the user away from the dashboard (in this case to a blank page, apart from the "OK").

Ideally I'd like to keep the user on the dashboard.  Maybe this behaviour is unavoidable, and I just need to redirect somehow back to the dashboard URL, and then have some code that suppresses the form until the processing of the uploaded file is complete.

Pete.

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

[Nick O'Leary]

Hi Pete,

in which case, you can use a bit of javascript on the dashboard page to do the form submission...

<form id="myForm">

<input type="file" name="fileToUpload" id="fileToUpload">

<input type="submit" value="Upload Image" name="submit">

</form>

<script>

   $('#myForm').submit(function(e) {

       e.preventDefault();

    $.ajax({

        url:'/file-upload',

        type:'post',

        data:$('#myForm').serialize(),

        success:function(){

            alert("worked");

        }

    });

   });

</script>

To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/31291407-6b68-487f-bc6f-8c4a2e62f047%40googlegroups.com.

[Nick O'Leary]

Ooops - that works for basic form data, but if you want to include a File something else is needed. Try this:

<form id="myForm">

<input id="myFile" type="file" name="fileToUpload">

<input type="submit" value="Upload Image" name="submit">

</form>

<script>

    $('#myForm').submit(function(e) {

        e.preventDefault();

        var fd = new FormData();    

        fd.append( 'file', $('#myFile')[0].files[0] );

$.ajax({

  url: '/file-upload',

  data: fd,

  processData: false,

  contentType: false,

  type: 'POST',

  success: function(data){

    alert(data);

  }

});

   });

</script>

[Pete Kavanagh]

Working perfectly.  Thanks!

[Julian Knight]

This comes up from time-to-time so I've added as a suggestion for the cookbook with a reference to this thread.

[P DM]

Hi guys ... I'm pretty new to node-red, and I'm trying to learn through examples ....
I'm running node-red on a VM (Ubuntu based) and as a first application I'm trying to use dashboard to
1) upload a file from a client-pc to node-red
2) upload that file using scp/sftp to a list of devices.

Taking a step by step approach, I first want to try to upload a file from the HTTP-client (PC) to the node-red flow, and came across this discussion.
I do get the file-selection on the UI, but nothing happens if the upload button is pressed (no debug output either ...), so I'm missing something here ..
Would it be possible to include a working flow example based on Nick's last input ?

Thanks & best regards

Patrick