Fetch API cannot load file

p5.js
1

Hi there,

I have a problem with loading a binary file using the function loadBytes() in p5.js using Chrome ( 68.0.3440.106 Build official 64 bits ). It says :

image

My code :

var binary_file;

function preload(){
    binary_file = loadBytes('aircraft.bin');
}

function setup(){
    createCanvas(500,500);
    background(234,89,50);
}

It is a Google Chrome error since it works in Firefox.

Thanks

1 Like
2

Your error explains it all: you can’t load file URLs like that in Chrome.

You probably want to use a webserver. You can deploy a local webserver if you don’t want to test on a live site.

3

Due to some p5js internal change to use Fetch API in order to load some resource types, the file:// scheme seems to work only in Firefox now! :pleading_face:

2 Likes
4

Thanks for your answers. I should use Firefox because my goal is not to put my code online on a website.
It works when I put my file aircraft.bin in the same folder but there’s an error when it’s in a different folder :

Cross-Origin Request Blocking: The “Same Origin” policy does
not allow you to view the remote resource located on file:
///home/joseph/Documents/TensorFlow.JS/data/aircraft.bin.
Reason: The CORS query does not use http.

I’m not a web expert so maybe I should not dive into those topics. :pensive:

5

Local assets need to be somewhere within the same folder as the “.html” file.
Otherwise, they need to be a URI or they’ve gotta request a user to choose them manually.

1 Like
6

Good to know thanks !

1 Like
7

Ah, CORS, so we meet again.

When trying to access resources (especially in any browser other than Firefox) in a developer-y way, you will often also be doing things that look remarkably like what bad actors do who spoof websites, steal identities, pass viruses, run bot-nets etc – one aspect of which is sometimes called “cross-site scripting,” although suspicious crossings can also be local to a client. CORS (Cross-Origin Resource Sharing) is one of the security measures that prevents you from doing things in a browser that might mislead or be harmful to the user (yet may also make it harder to program cool things like information visualizations, which may also benefit from orchestrating resources from different sources).

If you keep trying to create things like you are now in JS for the browser, then you will probably keep encountering CORS and other anti-XSS until you get a handle on everything it doesn’t want you to do. The important thing is that these aren’t limitations of p5.js or JavaScript per se – they are default limitations of most modern web browsers, and the browser is saying “don’t do it that way.” The simple solution is often to provide your information the way that a legit website would – by hosting it all from one source, locally or remotely, and having the user contact it explicitly in a way that they wouldn’t be surprised things are coming from somewhere else. Here is some info:

2 Likes
8

Is there a way to ask the user to use data from an other directory in JS ?

9
  1. p5js.org/reference/#/p5/createFileInput
  2. p5js.org/reference/#/p5.Element/drop
  3. p5js.org/reference/#/p5.File

p5js.processingtogether.com/sp/pad/export/ro.CYTkHWj9smgw8Q

3 Likes