faisalsayed10 / firefiles Goto Github PK

A great project. But I found that this link does not seem to exist.

For CodeDay Labs

Wasabi is yet another object storage platform that would be a very good integration to have in our app. The good part is that Wasabi fully supports the AWS S3 API, So we don't need to reinvent the wheel again!

If you look into our codebase right now, you'll see that we support Backblaze and AWS both at the same time. Also, we have only written the code for supporting S3, and it works out of the box for Backblaze! (with some minor conditional changes wherever required)

Example: conditions inside useS3.tsx wherever small changes are required depending on the bucket:

Okay, so now, your job is to integrate Wasabi in a similar manner by making the useS3 hook compatible with it.

• First, create a new file inside pages/new/ directory which will be used to get the credentials for that provider. (refer other files to get an idea)
• Then, make changes in the useS3 hook wherever required. Explore how we've integrated Backblaze and try to follow it.
• Navigate to util/globals.ts and add an object for your provider to the PROVIDERS array. (Also add a logo for the provider in the public/ directory)
• Navigate to util/types.ts and add your provider's name to the Provider enum.
• Finally, navigate to the useBucket hook and add a case for your provider and return that hook.
• Also make sure to edit any provider-specific functions to make them work with your provider. (look for switch cases or if/else statements that check for the type of provider).

Refer to CONTRIBUTING.md for further guide: https://github.com/faisalsayed10/firefiles/blob/main/docs/CONTRIBUTING.md#testing

Bug Description

• Using a Firebase drive, creating an empty folder (either through Firefiles or Firebase) then uploading a file to that empty folder will throw an error to the screen regarding the attempted iteration over an object currently set to a state of null (the initial state of the files array. The upload will succeed, but the user will need to refresh the screen to see this.

Recreation

1. Open a functioning Firebase drive
2. Create a new drive folder (either on Firebase or Firefiles)
3. Open the new, empty folder
4. Upload any file to this folder from Firefiles

Presumed Behavior

• As it functions in the useS3 hook, uploading a file into an empty folder should not throw an error, but should instead send a toast that the file has been successfully uploaded and the file should then appear on the screen and be fully interactable.

Suggested Solution

• Implement a similar check for the current state/definition of the files state as is used in the useS3 hook:
• From setFiles((files) => [...files, newFile]); to setFiles((files) => (files ? [...files, newFile] : [newFile]));
• Alternative solution could involve changing how S3 and Firebase handle the initialization of the files state

Additional Context

• Error thrown in file apps\web\hooks\useFirebase.tsx line 191 in addFile
• Proposed solution similar to that of apps\web\hooks\useS3.tsx line 235 in addFile

Implement a grid view UI for files

Implement downloading an entire folder (.zip) along with its child files and folders.

Add Cloudflare's C2 integration to Firefiles

Scaleway is yet another object storage platform that would be a very good integration to have in our app. The good part is that Scaleway fully supports the AWS S3 API, So we don't need to reinvent the wheel again!

If you look into our codebase right now, you'll see that we support Backblaze and AWS both at the same time. Also, we have only written the code for supporting AWS S3, but it works out of the box for Backblaze! (with some minor conditional changes wherever required)

Example: conditions inside useS3.tsx wherever small changes are required depending on the bucket:

Okay, so now, your job is to integrate Scaleway in a similar manner by making the useS3 hook compatible with it.

• First, create a new file inside the pages/new/ directory which will be used to get the credentials for that provider. (refer to other files to get an idea)
• Then, make changes in the useS3 hook wherever required. Explore how we've integrated Backblaze and try to follow it.
• Navigate to util/globals.ts and add an object for your provider to the PROVIDERS array. (Also add a logo for the provider in the public/ directory)
• Navigate to util/types.ts and add your provider's name to the Provider enum.
• Finally, navigate to the useBucket hook and add a case for your provider and return that hook.
• Also make sure to edit any provider-specific functions to make them work with your provider. (look for switch cases or if/else statements that check for the type of provider).

Refer to CONTRIBUTING.md for further guidance: https://github.com/faisalsayed10/firefiles/blob/main/docs/CONTRIBUTING.md#testing

Add Supabase integration to Firefiles

Microsoft Azure also offers their blob storage service which we can integrate into Firefiles. The sad news is that unlike most of the other object storage services, Azure does not support S3-compatible APIs. So we will have to create a new useAzure hook for this integration.

Refer to the CONTRIBUTING.md file to understand how adding a new integration works.

https://github.com/faisalsayed10/firefiles/blob/main/docs/CONTRIBUTING.md#adding-cloud-providers

Deta is a very user-friendly cloud platform that enables users to use the cloud for free! (unlike s3). This would be a very good integration to have in our app. We will need to implement Deta support just like how Firebase is implemented.

If you look into our codebase right now, you will see that we have a custom hook called useFirebase that allows all the CRUD functions for the bucket.

So now, your job is to integrate Deta in a similar manner by making a useDeta hook.

• First, create a new file inside pages/new/ directory which will be used to get the credentials for that provider. (refer to other files to get an idea)
• Then, create a useDeta hook. Explore how we've integrated Firebase and try to follow it.
• Navigate to util/globals.ts and add an object for your provider to the PROVIDERS array. (Also add a logo for the provider in the public/ directory)
• Navigate to util/types.ts and add your provider's name to the Provider enum.
• Finally, navigate to the useBucket hook and add a case for your provider and return that hook.
• Also make sure to edit any provider-specific functions to make them work with your provider. (look for switch cases or if/else statements that check for the type of provider).

Refer to CONTRIBUTING.md for further guidance: https://github.com/faisalsayed10/firefiles/blob/main/docs/CONTRIBUTING.md#testing

For CodeDay Labs

The current behavior in our app is that whenever the user navigates to a folder, we hit the APIs and fetch their files again. This results in unnecessary API calls even if the list of files for that specific folder hasn't even changed.

How can this be improved?

Well, we can simply make use of the browser's indexeddb to locally store the list of files.

Basically, whenever we fetch the list of files for the first time using an API, we will store the response we get locally. And then, whenever the user fetches the list again for that specific folder, we get our response from there instead of making a get request every time.

Next, we will have a sync button so that the users can refresh their local data (and sync with the APIs). Whenever a file gets uploaded using our app, sync it locally too.

You may use any npm packages for interacting with indexeddb.

Implement AWS support just like how Firebase is currently implemented

maybe can it be replaced with sendinblue.com

Implement Min.io support just like how Firebase is implemented.

• A filters dropdown that allows users to filter the files within the current directory

Hey, I'm getting this error while trying to set cors.

ArgumentException: JSON CORS data could not be loaded from: [ { "origin": ["https://drive.daniellop.me”], "method": ["GET"], "maxAgeSeconds": 3600 } ]

Just add Samba support to Firefiles

For CodeDay Labs

Object Storage buckets, like S3, allow users to add tags to the objects. This enables the users to better manage their files and filter them when needed.

https://docs.aws.amazon.com/AmazonS3/latest/userguide/tagging-managing.html

Your task is to implement a tagging system for files through which the user will directly interact with these APIs and add / remove / edit tags.

This issue can be fixed by simply re-setting the CORS whenever it breaks.

For CodeDay Labs

Currently, if you see, the files are randomly rendered on the screen. We must sort the files based on their properties like name, size, or created_at.

Above the table which renders the list of files, add a sorting dropdown with options containing the properties. When the user selects any option, sort the list of the files.

BONUS: Add further flexibility by allowing users to choose whether they want their files sorted in ascending or descending order.

Oracle is yet another object storage platform that would be a very good integration to have in our app. The good part is that Oracle's object storage fully supports the AWS S3 API, So we don't need to reinvent the wheel again!

If you look into our codebase right now, you'll see that we support Backblaze and AWS both at the same time. Also, we have only written the code for supporting AWS S3, but it works out of the box for Backblaze! (with some minor conditional changes wherever required)

Example: conditions inside useS3.tsx wherever small changes are required depending on the bucket:

Okay, so now, your job is to integrate Oracle's object storage in a similar manner by making the useS3 hook compatible with it.

• First, create a new file inside the pages/new/ directory which will be used to get the credentials for that provider. (refer other files to get an idea)
• Then, make changes in the useS3 hook wherever required. Explore how we've integrated Backblaze and try to follow it.
• Navigate to util/globals.ts and add an object for your provider to the PROVIDERS array. (Also add a logo for the provider in the public/ directory)
• Navigate to util/types.ts and add your provider's name to the Provider enum.
• Finally, navigate to the useBucket hook and add a case for your provider and return that hook.
• Also make sure to edit any provider-specific functions to make them work with your provider. (look for switch cases or if/else statements that check for the type of provider).

Refer to CONTRIBUTING.md for further guidance: https://github.com/faisalsayed10/firefiles/blob/main/docs/CONTRIBUTING.md#testing

Right now if you see, we're using Chakra UI to build out the interface for our app. We've decided to completely remove Chakra UI and switch to Tailwind CSS instead.

The migration part is already done but implementing the interface is still remaining. One of these pages is the dashboard, which currently looks like this:

Your goal is to use Tailwind CSS to implement a dashboard page that looks like this instead:

(ignore the dark mode UI, we'll first only implement the light theme)

To begin with, head over to the https://github.com/faisalsayed10/firefiles/tree/v1.4.0 branch which already has the migration done. Part of the UI is also already implemented.

Note: Don't worry too much about the features like tags, search, recent files, etc. that are not yet implemented. It's okay to just build out the UI right now.

Providers that don't have a video tutorial:

• Wasabi
• Digital Ocean
• Samba (#72)

For CodeDay Labs

Digital Ocean is yet another object storage platform that would be a very good integration to have in our app. The good part is that Digital Ocean fully supports the AWS S3 API, So we don't need to reinvent the wheel again!

If you look into our codebase right now, you'll see that we support Backblaze and AWS both at the same time. Also, we have only written the code for supporting AWS S3, but it works out of the box for Backblaze! (with some minor conditional changes wherever required)

Example: conditions inside useS3.tsx wherever small changes are required depending on the bucket:

Okay, so now, your job is to integrate Digital Ocean in a similar manner by making the useS3 hook compatible with it.

• First, create a new file inside pages/new/ directory which will be used to get the credentials for that provider. (refer other files to get an idea)
• Then, make changes in the useS3 hook wherever required. Explore how we've integrated Backblaze and try to follow it.
• Navigate to util/globals.ts and add an object for your provider to the PROVIDERS array. (Also add a logo for the provider in the public/ directory)
• Navigate to util/types.ts and add your provider's name to the Provider enum.
• Finally, navigate to the useBucket hook and add a case for your provider and return that hook.
• Also make sure to edit any provider-specific functions to make them work with your provider. (look for switch cases or if/else statements that check for the type of provider).

Refer to CONTRIBUTING.md for further guide: https://github.com/faisalsayed10/firefiles/blob/main/docs/CONTRIBUTING.md#testing

Description

I encountered an issue while attempting to log in to Firefiles. After entering my email and clicking the log-in button, I received an email to verify my login. However, when I clicked both the verification link in the email and the alternative link provided, both redirected me to a page displaying a status code 500 internal server error.

Steps to Reproduce

1. Visit the live link: Firefiles Live Link
2. Attempt to log in with your email.
3. Check your email for the verification link and click on it.
4. Alternatively, click the provided alternative link in the email.
5. Observe the internal server error (status code 500) page.

Expected Behavior

I expected to be redirected to the Firefiles application after clicking either the verification link or the alternative link in the email.

Screenshots/Examples

• Status Code 500 Error Page:
  

• Email Verification Link:
  

Context

This bug report aims to highlight the issue encountered while attempting to log in to Firefiles. The status code 500 internal server error prevents successful login, whether using the primary verification link or the alternative link provided in the email. The described steps should help reproduce the problem.

Feature which gives the users ability to invite other people to their storage bucket(s) and they can handle the read/write permissions of the user.

Oracle offers 200GB of free cloud storage - I'd love to see an integration there! This definitely wouldn't be a very easy thing to integrate though.

Implement file previewing for archives and compressed files similar to how other files are being previewed currently.

Implement a search bar on top of the drives page which allows users to search files and folders within the current directory.

• Add a search bar on the bucket page.
• Filter files/folders according to the search query
• Show the filtered items.

BONUS: Allow users to search an entire drive regardless of the directory they are in.

How this can be achieved:

• Index all the files and folders (recursively) in the background and store them in indexeddb. (related to #30)
• Whenever a user searches for a file, filter the data in indexeddb.
• indexeddb should update whenever a file is uploaded or a folder is created.
• BONUS: cross-drive search where the user can search for a file across drive.

Currently, there is a simple toast that shows the file's progress while it is being uploaded. We want to change that to show a Google Chrome-like downloads UI from where a user can manage their ongoing uploads and resume unfinished uploads. I'm thinking of a simple notion-like sidebar that expands into a full page on a button click.

There is also a case to handle when it comes to file uploading:

CASE: The upload continues sometime later after closing the window / on a different computer:

• check for all the ongoing uploads from the bucket's API, and list them in the upload manager
• when resumed - get the upload data from the API → start the upload again with the remaining chunks.

Implement Backblaze support just like how Firebase is implemented.

To be picked after #44.

Once tags have been implemented in our app. We need to allow users to filter their files based on the tags they select. Implement filtering within the directories for now.

BONUS: If you're looking for a challenge, consider implementing the filter system across the entire storage bucket (i.e. cross-directory) and even a global filtering system that filters files across all the buckets that a user has.