p5.js-web-editor icon indicating copy to clipboard operation
p5.js-web-editor copied to clipboard

Allow to use files bigger than 80KB ?

Open guillaume-dorczynski opened this issue 5 years ago • 4 comments

Nature of issue?

  • ~~Found a bug~~
  • Existing feature enhancement

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 ?

  • Web browser and version: Chrome v84.0.4147.89
  • Operating System: Windows 10

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 !

guillaume-dorczynski avatar Jul 27 '20 00:07 guillaume-dorczynski

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.

catarak avatar Jul 27 '20 17:07 catarak

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

shantanu96 avatar Mar 02 '21 07:03 shantanu96

@shantanu96 go ahead!

catarak avatar Mar 10 '21 22:03 catarak

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?

shantanu96 avatar Mar 18 '21 10:03 shantanu96