I created a simple upload/download functionality for a web application and connected it to Mongo, now I can upload, store and download files. I need advice on how to create a SPA similar to Dropbox or Google Drive in that it will be a hierarchy of folders with files within them, how would I go about creating this structure and adding this functionality to all the files within the application?
Intuitively creating a react component and adding it to a File object seems like the way to go, what are some issues to expect and how do I go about creating such an application to be as fast and UI-friendly as possible?
I assume you are using GridFS to store files on MongoDB?
I don't really think GridFS has Unix directory support that I guess you want out of your SPA to show, but why not use Amazon S3 to directly store this data in the required format, and add that reference path to MongoDB?
Adding a React component to File object seems like a pretty easy way to implement the SPA functionality you want, but, I believe you'd have to take into account how to handle the following issues: 1. File duplicacy 2. Invalid file names 3. Faster file uploads and downloads (possibly by the use of blob chunks) 4. Handling partial file uploads/downloads in case of service outage/timeouts 5. Partial deletion of files 6. User ownership (if you are implementing a multitenant workflow) and access restrictions 7. Deployment has its whole other set of issues, including usage costs for storage, handling requests through a cloud provider etc.
You can create a basic architecture workflow that takes into account a lot of these issues to help design your system.