Drive - a versatile file-sharing platform inspired by Google Drive and WeTransfer. With a range of sharing options, including anonymous uploads and easy file sharing, Drive empowers users to collaborate and exchange files effortlessly. Experience the freedom of anonymous sharing with Drive.
Buckle up your seatbelt, this'll be a long one.
The main tech stack is Solid JS with Solid Start using TypeScript, UnoCSS, Kobalte UI and (of course, being the most essential for this hackathon) Supabase with the v2 JavaScript SDK.
Features of Supabase have been utilized as follows:
- Authentication: Made a full user system with email + OAuth login.
- Database: Used to store all information necessary for the users, such as uploads, workspaces, and profiles themselves.
- Edge Functions: Used to handle all upload tasks to Supabase storage.
- Storage: Used to store all user uploaded files.
This usage is covering all major feature areas of Supabase, and many of these features like the database, edge functions and storage are heavily used across the product.
upload-anon-homepage.mp4
upload-anon-sharex.mp4
upload-auth-dashboard-and-share.mp4
upload-auth-sharex.mp4
upload-auth-curl.mp4
Available @ https://drive.cattolabs.com/api
We provide an accessible API for interacting with the drive. In fact, we use that exact same API in the front-end of the web app.
You can use the API as unauthenticated (anonymous) or authenticated.
| Unauthenticated | Authenticated | |
|---|---|---|
| Upload files | ✅ Yes | ✅ Yes |
| Access public files | ✅ Yes | ✅ Yes |
| Upload files in a workspace | ❌ No | ✅ Yes |
| Create workspaces | ❌ No | ✅ Yes |
| Remove uploaded file later - with no self destruct option | ❌ No | ✅ Yes |
| Access private files - if user is allowed | ❌ No | ✅ Yes |
If you do have an account, head over the "My Account" page and grab your "API Token" from there.
In your dashboard, you can simply copy a workspace/folder ID using the three dots on a folder and selection the option "Copy workspace ID" Using this ID, you can upload to certain workspaces with our API, examples can be found below.
Integration with ShareX
ShareX is a screen capture, file sharing app. Using our API, you can easily upload your files in your workspace.
To use drive.cattolabs.com with ShareX, you have to setup a custom uploader.
Head over to "Destinations" > "Custom uploader settings" ;
From here, you can either create a new custom uploader manually or simply use a pre-made one we give you: anonymous upload.
- Click on "New" to create a new uploader. Name it as you want, we'll go with
drive.cattolabs.comhere ; - Set the "Destination type" to
Image uploaderandFile uploader, we currently don't supportText uploader; - Set the "Method" to
PUT; - Set the "Request URL" to
https://kcpxeoxkmblpivpgwdsm.supabase.co/functions/v1/upload-file, (for some reason, ShareX throws an error on redirection sohttps://drive.cattolabs.com/api/workspace/uploaddoesn't work) ; - Keep "URL parameters" empty ;
- For "Headers", leave empty ;
- Keep "Body" as
Form data (multipart/form-data), below you're able to add form data parameters
privateas name and0as value to make all your uploaded files public. If you're authenticated to an account, the default value will be1and0if you're anonymous. If you want to upload to an account, pass theapi_tokenparameter followed by the value of the account's API token. By default, uploaded files will be in the root workspace of the account. You can override that behavior by addingworkspace_idas name and any workspace ID as value to make the upload go there.
- Set the "File form name" to
files; - Set the "URL" to
https://drive.cattolabs.com/api/file/{json:data.uploaded[0].id} - Set the "Error message" to
{json:message}
{
"Version": "15.0.0",
"Name": "drive.cattolabs.com",
"DestinationType": "ImageUploader, FileUploader",
"RequestMethod": "PUT",
"RequestURL": "https://kcpxeoxkmblpivpgwdsm.supabase.co/functions/v1/upload-file",
"Body": "MultipartFormData",
"Arguments": {
"private": "0"
},
"FileFormName": "files",
"URL": "https://drive.cattolabs.com/api/file/{json:data.uploaded[0].id}",
"ErrorMessage": "{json:message}"
}You can simply send files through your terminal using cURL.
In these examples, let's say you want to upload two files located at ./screen1.png and /tmp/image.jpg.
curl -L \
-X PUT \
-F '[email protected]' \
-F 'files=@/tmp/image.jpg' \
https://drive.cattolabs.com/api/workspace/uploadcurl -L \
-X PUT \
-F "api_token=YOUR_API_TOKEN" \
-F 'workspace_id=SOME-WORKSPACE-ID-123456789' \
-F 'private=0' \
-F '[email protected]' \
-F 'files=@/tmp/image.jpg' \
https://drive.cattolabs.com/api/workspace/uploadIf you want to upload to your root workspace, you can remove the workspace_id
parameter, it'll take the root workspace by default.
workspace_id can be found using this guide.
private defaults to 1 if not passed. If you want to make publicly
accessible uploads, you might have to change it to private=0.
- @Vexcited: full stack developer (insanely productive, carried the project (as always) 😂 ♥)
- @pnxl: front-end developer, ui/ux designer
- @trobonox: creator of initial concept/idea, project manager (leading development, setting priorities and goals), full stack developer (mostly front-end)
Visual Studio Code, with:
Prerequisites:
- Populate the .env file with the secrets from Supabase Studio (see .env.example for the file format)
- Install needed dependencies using
pnpm install - Fix code style issues using
pnpm lint
For development with a local preview and hot reloading, running a development server is done using the pnpm dev command.
To build for production, use the pnpm build command.
Copyright (c) 2023 catto labs
Licensed under the MIT license.