# Loading files (e.g., loadBytes) in p5.js using node.js

**URL:** <https://discourse.processing.org/t/loading-files-e-g-loadbytes-in-p5-js-using-node-js/23560>\
**Category:** Coding Questions\
**Created:** [August 30, 2020, 3:52am UTC](https://discourse.processing.org/t/loading-files-e-g-loadbytes-in-p5-js-using-node-js/23560 "2020-08-30T03:52:03Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![JBall](https://avatars.discourse-cdn.com/v4/letter/j/a183cd/32.png) [@JBall](https://discourse.processing.org/u/JBall)\
**Post date:** [August 30, 2020, 3:52am UTC](https://discourse.processing.org/t/loading-files-e-g-loadbytes-in-p5-js-using-node-js/23560/1 "2020-08-30T03:52:03Z")

</div>

Hello all,

I am working on a basic project where I want to have a webpage available to my group members where they can go to see the current status of some data files that are populated by a separate program and copied to my server. I’ve made a lot of progress and I think it will work, but I’ve run into a snag I haven’t been able to figure out, but I suspect it is probably fundamental enough to web programming/javascript that I just don’t know how to form a proper search for it.

I’ve managed to put together a p5.js sketch using loadBytes() that pulls the data from the files and graphs it. I’m trying to host the page on a NAS that has a compatible node.js package. I was able to mostly figuring out the node.js hosting, starting from [the w3schools tutorials](https://www.w3schools.com/nodejs/nodejs_url.asp) and eventually landing on something close to what is shown on [the relevant node.js wiki](https://github.com/processing/p5.js/wiki/p5.js,-node.js,-socket.io) ([also here, for reference](https://github.com/lmccart/itp-creative-js/tree/master/Spring-2014/week6/03_node_servep5)).

**However, here’s my problem.** When I use the Chrome web server to test the page (thanks to these forums for pointing me in that direction), I’m able to load the data files from a subfolder in the same location as index.html & sketch.js, but when I host the page with node.js, the console gives me a 404 error. It finds the files if I put them in the same directory as index.html, but I’d prefer to tuck them into their own folder, and I’d like to know how to solve this problem anyway.

I hope this is all clear. It’s my first post here, I definitely tried to find an answer by searching the topics, but I apologize if the answer is something I should have already found there. Thanks in advance.

---

<div class="post-metadata">

**Author:** ![JBall](https://avatars.discourse-cdn.com/v4/letter/j/a183cd/32.png) [@JBall](https://discourse.processing.org/u/JBall)\
**Post date:** [August 31, 2020, 5:11pm UTC](https://discourse.processing.org/t/loading-files-e-g-loadbytes-in-p5-js-using-node-js/23560/2 "2020-08-31T17:11:20Z")

</div>

Alright, chalk this one up to the value of creating a minimal reproduction of the problem. Long story short? The data folders have a space in their name and I’m not handling it correctly. I’d assumed it was a more limiting difference between hosting with node.js vs. the Chrome web server, but I was wrong (though I still have to figure out if I can include a space in a directory using node.js and if so, how to do it correctly).

I’m putting the minimal version here for posterity/shame. For reference, all files are in the same directory, but copies of coefficients.txt are also located in “./assets” and “./asset files”.

**sketch.js**

```auto
dataLoaded = false;
doDraw = true;

fileNameFound = 'coefficients.txt';
fileNameAlsoFound = 'assets/coefficients.txt';
fileNameNotFound = 'asset files/coefficients.txt'; //It's the space...

fileName = fileNameNotFound; // or fileNameFound or fileNameAlsoFound

tempStr = [];

function setup() {
  tempStr = loadStrings(fileName, loadSuccess, loadFailure);
}

function draw() {
    
  if(doDraw) {
    	
	  if(dataLoaded) { // Wait until loadStrings call is complete
	  
		for(np=0; np<6; np++) { console.log(tempStr[np]); }
		
		doDraw = false; //Values reported, shut off drawing
		
	  }
	  
  }

}

function loadSuccess() { 
	console.log('load success...');
	dataLoaded = true;
}

function loadFailure() { 
	console.log('load failure...');
}

```

**index.html**

```auto
<!DOCTYPE html>
<html lang="">

<head>
  <script src="p5.min.js"></script>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  
  
</head>

<body>
  <main>
  <script src="sketch.js"></script>
  </main>
</body>

</html>

```

**nodeLaunch.js (launched from the NAS using node.js, taken from the w3schools tutorial linked above)**

```auto
var http = require('http');
var url = require('url');
var fs = require('fs');

http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var qdata = q.query;
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    } 
    res.writeHead(200, {'Content-Type': 'text/html'});
	res.write(data);
    return res.end();
  });
}).listen(8080);

```

**data file, coefficients.txt**

```auto
83.3481743529397
-0.025076201796572
-5.61491885503865E-6
1.23001997078E-9
1.22643146514897E-12
-4.4037444322342E-16

```