# Fetch API cannot load file

**URL:** <https://discourse.processing.org/t/fetch-api-cannot-load-file/3261>\
**Category:** p5.js\
**Created:** [September 4, 2018, 10:16pm UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261 "2018-09-04T22:16:31Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 4, 2018, 10:16pm UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261/1 "2018-09-04T22:16:31Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/662ac440dfed853b0c55484ca96ad9bb88d6ecf4.png)

My code :

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

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [September 4, 2018, 10:23pm UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261/2 "2018-09-04T22:23:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 5, 2018, 12:47am UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261/3 "2018-09-05T00:47:28Z")

</div>

> [@josephh](#):
>
> It is a Google Chrome error since it works in Firefox.

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! 🥺

> **[Fetch API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)**
>
> The Fetch API provides an interface for fetching resources (including across the network). It is a more powerful and flexible replacement for XMLHttpRequest.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 5, 2018, 8:43am UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261/4 "2018-09-05T08:43:16Z")

</div>

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. 😔

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 5, 2018, 8:48am UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261/5 "2018-09-05T08:48:16Z")

</div>

> [@josephh](#):
>
> It works when I put my file _“aircraft.bin”_ in the same folder but…

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.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 5, 2018, 8:50am UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261/6 "2018-09-05T08:50:03Z")

</div>

Good to know thanks !

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 7, 2018, 4:26pm UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261/7 "2018-09-07T16:26:06Z")

</div>

> [@josephh](#):
>
> Cross-Origin Request Blocking: The “Same Origin” policy does  
> not allow you to view the remote resource located on file:

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:

- [Cross-origin resource sharing - Wikipedia](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)
- [Same-origin policy - Wikipedia](https://en.wikipedia.org/wiki/Same-origin_policy)
- [Cross-site scripting - Wikipedia](https://en.wikipedia.org/wiki/Cross-site_scripting)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [September 8, 2018, 12:14am UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261/8 "2018-09-08T00:14:57Z")

</div>

> [@jeremydouglass](#):
>
> and having the user contact it explicitly in a way that they wouldn’t be surprised things are coming from somewhere else.

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [September 8, 2018, 1:34am UTC](https://discourse.processing.org/t/fetch-api-cannot-load-file/3261/9 "2018-09-08T01:34:58Z")

</div>

1. [p5js.org/reference/#/p5/createFileInput](http://p5js.org/reference/#/p5/createFileInput)
2. [p5js.org/reference/#/p5.Element/drop](http://p5js.org/reference/#/p5.Element/drop)
3. [p5js.org/reference/#/p5.File](http://p5js.org/reference/#/p5.File)

[p5js.processingtogether.com/sp/pad/export/ro.CYTkHWj9smgw8Q](http://p5js.processingtogether.com/sp/pad/export/ro.CYTkHWj9smgw8Q)