Uploading and parsing files

p5.js Project Guidance
1

New to webdev.

I’ve made a Processing program to open a proprietary game map file, generate a .png preview of the map and extract the meta data like the mapmakers name, map description, dimensions, etc.

I want to make a site to browse and download maps for the game, and trying to figure how all the pieces will work together.

I am thinking a p5js app that runs on clients to replace my processing program. The in-client app would load the map file, parse and display the meta data, generate and show the png preview, and have a submit button. The submit button would upload the file, and send a base64 png of the preview packed with the meta data as either SQL or maybe JSON.

Is this doable in p5js or should I look elsewhere? I haven’t started yet I’ve already ran into issues with loading local files in p5js ( is there a load file dialog I’m missing? ), also not finding info on sending the json/sql data or uploading files.

That’s the first half, the second half is making a browser for viewing over the database. This is where SQL makes sense to me because it would be relatively easy to query (ex maps by a certain author, or small maps).

Any advice or framework recommendations are appreciated, thank you!

2

This sounds like an ambitious project if you’re new to web development but it’s definitely doable. You maybe able to create this as an entirely client side application, however chances are you’ll run into a lot of limitations. I’d recommend looking into making a full stack application. If you go that route, p5.js would be one piece of the puzzle. I’d suggest you look into node.js and express for uploading files and interfacing with a database. Sounds like you already know a bit about SQL which would work but MongoDB (basically json) might do better when working with images. Here’s a couple resources for learning more about server side programming if you’re interested:

Dan Shiffman’s series on building an api with node.js and express.

Free Code Camp which is great for all web development but they have a section on Apis and Microservices.

Check out the p5.dom library for creating form elements to receive input. If you’re just creating a form react would also do the trick.

A video on uploading images to an api. I didn’t watch the whole thing but it looks like a good resource.

1 Like