CODEWITHSUNDEEP
reactjsfilefastapi
Dmathz
Dmathz

Reputation: 57

Should I store upload files in frontend or backend?

I am making a simple web app with separate frontend and backend codes/servers, I used ReactJs for frontend and FastAPI for backend.

enter image description here

The app folder is the frontend and fastapi folder is the backend.

After coding for a few days, I was confused as to where should I store the user-uploaded files, whether it should be in the frontend or the backend.

What is the best practice for this kind of problem?

Upvotes: 1

Views: 2361

Answers (1)

C.Tale
C.Tale

Reputation: 300

What you're specifically trying to do is data persistence. Depending on what you're trying to persist, you need:

  1. a Database
  2. a Storage Service

If the user-uploaded files are small. I think you can get away with convert the File into a Base64 string and saving it on your database.

I think the best practice, however, is using a storage service like AWS S3. There are a lot more "Cloud Storage services" for developers out there that you can search up.

If it's just for user-uploaded images, use an image storage service like Cloudinary or Imgix.

I also wanna clear up a possible misconception for you and many people that think web apps are just built with the frontend and backend. They're just abstracted concepts to explain how web applications work and communicate. Conceptually, the backend is not just your FastAPI codebase. It's also your database and other services that your frontend doesn't see. But you'd notice that the "database" is notoriously known for being part of the "backend". But in fact, the database isn't even running inside FastAPI codebase, right? It's somewhere outside your codebase, maybe on a different machine, running as a separate piece of software.

Since you were asking whether to store it inside your ReactJS or FastAPI folder/codebases? The answer is no, it's not recommended to store user-uploaded files on either of them. But if it's a simple application to demonstrate persistence, just store it inside your FastAPI folder. Make sure to .gitignore the path to where you're saving it as well.

Upvotes: 4

Related Questions