Feature/file upload pop up

[hpai1]

Tracking Info

Resolves #6

Changes

Added a new page called FileTesting to house the File Upload modal. On FileTesting.tsx, you can see a button component that invokes the FileUploadPopup when clicked. This allows you to style the button any way you want and still be able to retain the functionality.

The bulk of the code is in the file FileUploadPopupWindow.tsx. It contains all the code to add files to the backend, drag and drop files, and delete files.

I might have installed some new packages so be sure to run npm install first.

Testing

1. Run npm install
2. Start the backend by going into the backend directory and running npm run start
3. Start the frontend by going into the frontend directory and running npm install

Navigate to \FileTesting on the localhost and open developer tools. For example http://localhost:5173/FileTesting.

It should look similar to the above screenshot.

Click on the File Upload button (not styled at all) and choose 1 or multiple files. Note that the maximum limit is 10.

As your files are uploading, you should see the progress bar changing. Also, the console will say File Uploaded Successfully to ensure that it has been uploaded. From the backend, we can see that the files were actually uploaded:

If you click the 'x' on the file list, we see that the file goes away and the console says the file has been deleted. On google drive, we also see that the file gets deleted automatically.