search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.39k stars 1.33k forks source link

Allow to use files bigger than 80KB ? #1516

Open guillaume-dorczynski opened 4 years ago

guillaume-dorczynski commented 4 years ago

Nature of issue?

Details about the bug:

Hello,

I have a project that I'm working on, it was still working fine 2 or 3 days ago, but now, even I didn't modify anything since then, I get errors about JSZip which is an external library that I included in my project by uploading the file "jszip.min.js" which is about 100KB. When looking at the Chrome dev console, I can now see this error, which I didn't get before:

Access to script at 'https://assets.editor.p5js.org/5e9d26bb08c6cb0020a92e9f/24243c71-2b80-4eb4-b0aa-de074734133d.js' from origin 'https://editor.p5js.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

When I tried to open this file "jszip.min.js" in the online editor, it was just an empty window, like there was nothing in the file, so I uploaded it again and still the same thing happening. While uploading I noticed that I didn't get the red message box "Uploading plaintext file locally" (small suggestion, change from red to something like green, because red looks like it's an error). Strangely, if you click the link in the error above, you can see the entire content of the file.

Now if I modify this file so that it is 79999 bytes long, then I can upload it and see the red message, I can open it in the online editor to see the content, and I don't get the error in the console (of course I get other errors and the file is unusable since I removed thousand lines of code from it).

I have no problems with other libraries that I have included, it's just this one and I really think it's because it's bigger than 80KB.

Thanks already if you can solve it by increasing the limit to maybe 1MB ? Or is there a workaround ?

EDIT: I remember now, that I previously used an online version of jszip by adding this line in my index.html file

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>

Then I decided to use a local version. Maybe it was still working because the online version was still inside Chrome's cache ? I can now see that the limit is set here and it's not a recent addition: https://github.com/processing/p5.js-web-editor/blob/master/client/modules/IDE/actions/uploader.js#L9 . Still, if you could increase this limit, it will be nice !

catarak commented 4 years ago

Thanks for reporting! I think this is actually a bug. The 80KB limit is actually meant to be on text files that you can edit within the web editor, and the limit for files that you can upload is 5MB. When files are bigger than 80MB, they are hosted in an S3 bucket rather than in the database and cannot be edited in the web editor.

It seems like there are CORS issues with scripts stored on the S3 bucket.

shantanu96 commented 3 years ago

Hey @catarak and @guillaume-dorczynski, I would like to work on this issue.

catarak commented 3 years ago

@shantanu96 go ahead!

shantanu96 commented 3 years ago

Hey @catarak, I tried replicating the bug on my local machine as well as in the online editor and I found no issue with the JSZip or any other library. As you mentioned when I upload files greater than 80KB the text is not visible in the editor but I can still use the contents of the file in my code. Am I missing something? Can you guide me?