Fast, self-hosted TUS compatible object storage backed by R2 and workers
Mainly used AI for tedious UI/refactor work, ensuring my TUS implementation is spec-compliant, and also used it for some of the docs and readme.
Fast, self-hosted TUS compatible object storage backed by R2 and workers
Mainly used AI for tedious UI/refactor work, ensuring my TUS implementation is spec-compliant, and also used it for some of the docs and readme.
š„ cskartikey marked your project as well cooked! As a prize for your nicely cooked project, look out for a bonus prize in the mail :)
This is Silo, itās an self-hostable object storage platform built for the modern web. Silo is built on top of Cloudflare R2 and Workers, and it includes some easy-to use typesafe SDKs for multiple web frameworks, and is easily expandable to more.
Silo tackles a major problem with existing object storage standards (S3), where essentially the client requests a upload URL from the server, uploads the file, and then the client tells the server the upload is complete. Malicious/flaky clients could just ānotā tell the server, and then youāre just paying for storage you donāt know about! (read this for the full reason why).
The existing solutions for this problem are either janky, or closed source & paid (UploadThing). Silo is essentially just UploadThing but OSS and better :sunglas:
Silo also implements a number of QOL features, including (but not limited to) image transformations (resize, rescale, quality, strip EXIF), ACL modifications, object expiry (TTL) modifications, and a very nice server API.
Itās able to implement a lot of these features that arenāt easy to do with S3 because it only relies on R2 (CFās S3) as the storage layer. It uses a worker on top of it to handle all the file lifecycle operations and image operations.
And also check out the SDK demo! https://silo.evanyu.dev/docs/sdk-demo
Okay so I think itās finally done. I got all of the SDK packages deployed on NPM: @silo-storage/sdk-core, @silo-storage/sdk-react, @silo-storage/sdk-server, @silo-storage/sdk-next, and @silo-storage/sdk-tanstack-start.
Getting all of this deployed wasnāt really easy, and I hit a couple snags. The main one being that my current dependency setup wouldnāt work on NPM (some SDK packages depended on internal packages), so I ended up having to publish those packages under shared and mime-types, and replacing all the relative/local imports with imports from npm.
Once all of that was set up, I then quickly spun up a minimal sdk demo site with next (itās deployed here) to just make sure my setup docs were coherent and everything worked. Ran into a couple minor issues with the SDK that I had to fix, but now weāre good!
Log in to leave a comment
Did a bunch of work, namely spent a lot of the time writing out the SDK docs. I did use a bit of AI to help me with most of the boring parts, but Iāve scrutinized every sentence itās written. Other than the docs, Iāve done the following:
undefined. This caused the cf worker to reject file lifecycle operations (deletions), and the next app would just retry that a couple times before giving up.*, I tell hono to āgreedilyā accept the rest of the URL path with /internal/delete/:storageKey{.+} and map it to storageKey, and in the handler just grab c.req.param("storageKey").Log in to leave a comment
I just spent the last 7 hours implementing a proper audit log page, making some minor ui modifications, and revamping the settings page again.
The bulk of the time was spent implementing the audit log, as it required me to introduce a new auditEvents table in the database, and tracking down each and every single place where it would make sense to insert an audit log, and finally getting all that āarbritraryā data into one schema. What I came up with was essentially: a eventCode column, which looks something like file_key.access.updated, or file.upload.completed, a actorType, actorLabel column to diffrentiate between API keys and users, resourceType and resourceLabel which provides what resource (e.g files, settings, etcā¦) was modified, and a human readble name for it, etcā¦
I then track changes which are stored in a column of type jsonb with the following schema: { path: string; before: unknown; after: unknown }[]. Finally thereās a metadata jsonb column that stores any other loose arbritrary data. All of this allows me to pretty flexibly store audit logs of almost any shape. Thereās a lot of complexity that iām leaving out here but thatās the gist of it.
Log in to leave a comment
Iāve done a bunch of work on the SDK demo site. Itās been renamed to the docs site, since Iāve ended up writing docs on this thing lol. The original intention for it was to just serve as a demo, but itās gone further than I originally intended. To facilitate this ātransitionā into a fully-fledged docs site, I moved it to fumadocs. Fumadocs is an amazing OSS docs solution that can run on basically any react app, so getting it set up on the next app was pretty trivial following this. I spent most of the time rewriting all the documentation (I wasnāt very satisfied with how it was), and porting over the demo.
I put a lot of work polishing up the demo a bit more, and adding reworking some of the SDKās react primitives (button and dropzone). Finally, added a way to actually preview the images uploaded using the image endpoint I mentioned in my previous devlog
Log in to leave a comment
So, Iāve done a couple backend refactors:
/i/:accessKey endpoint to the cf worker specifically for serving images. The endpoint takes in a width, quality, and format query param (format is typically inferred from the Accept header, but can be overridden). It uses Cloudflare Images to fetch and apply the transformations to the image./i/ to /f/). The solution I came up with was to add a setting to either: 1. Disable the image CDN entirely, 2. Serve public files only, 3. Add a serveImage boolean field to image files. Essentially, when serveImage is true, the (private) file would only be served on /i/* with exif removed, but it wouldnāt be accessible on the /f/* endpoint.Log in to leave a comment
Made a couple changes:
deleted status instead of just being set to failed. Iām still deciding on what I should do to purge these ātombstone recordsā.. Perhaps purge after some time? Weāll seeReadableStream with a TransformStream<Uint8Array, Uint8Array> that implements transform(chunk, controller) . Essentially, it increments a counter for each byte (length) written over the streamLog in to leave a comment
Did a bit more work, added bulk actions for the multiselect on the datatable. Also fixed a couple smaller bugs/ui papercuts. Finally made the mobile support for the file info page a tiny bit better
Log in to leave a comment
Iāve migrated the app to use the Tanstack Table library (datatables). This provides for more consistent pagination support. Also fixed the mobile support, and reworked the filters into a dropdown instead of multiple select boxes.
Log in to leave a comment
I reworked how the API keys (token) is generated. Instead of encoding the CDN/Ingest server URL in the token, itās now another (exposable) env var. This makes it easier to expose the cdn base url to the browser. Iāve also cleaned up the API key creation dialog a bit. Tomorrow iāll work on writing some proper SDK docs
Log in to leave a comment
I just spent the ENTIRE DAY trying to get this deployed and fixing all the issues. I somehow managed to run into a rare database consistency issue. TLDR is the supabase transaction pooler doesnāt guarantee the db will be consistent right after writing, only that it will be eventually consistent. This leads to a annoying race condition where a file doesnāt exist in the db when uploading, when it was just created by another endpoint.
Itās 6am, and i think i just got it to work. This was extremely fun to debug š
Also I made a bunch of small changes to how the SDK and API server works, and the schema of the API token
Next iām going to work on adding custom headers on callback for deployment protection bypass etcā¦
Log in to leave a comment
Iāve written the some instructions/docs on how to deploy Silo. In the future iāll look into using QStash instead of vercel queues for the nextjs app, so we can support deploying on CloudFlare only.
Also, I did some interesting prismjs stuff to enhance the highlighting for the wrangler commands.
Log in to leave a comment
Just spent the last two hours working on a overview/writeup on what exactly silo is. Next iāll write up some docs on how to deploy silo, and then iāll get onto actually deploying it on cf + vercel
Log in to leave a comment
Iāve started work on a SDK demo site, with code samples etcā¦
The demo site is built on Next.js with TailwindCSS and Shadcn UI. Iām using prismjs for code highlighting. Next iāll work on getting the SDK to work in this project and build out a proper demo
Log in to leave a comment
Iāve reworked the file lifecycle. Most of this time was dedicated to making sure the database and R2 bucket are in a consistent state. (handling errors/retries gracefully etcā¦)
It mostly achieves this by utilizing ādurableā queues to queue file actions that automatically retry if they fail.
Log in to leave a comment
Iāve added full RBAC to most/all tRPC routers and API routes. Also implemented project deletion. This is done by implementing a tRPC middleware that checks for permissions on the userās role with better-auth
Log in to leave a comment
Added better mime-type support. The server SDK now accepts both shorthands (for example image which maps to every single image mime type), and fully qualified mime types (and wildcards).
Also fixed some server-side validation issues and finally implemented a better āstaged uploadā react hook in the SDK. This allows for better upload flows where the user can choose and āstageā files before uploading. (for example in a chat app)
Log in to leave a comment
Iāve made the server router be more like a builder pattern, and added support for (async) callbacks for expiry and public ACL
Log in to leave a comment
Iāve begun polishing up this project to be shipped. Iāve redesigned the projects page, made project slugs unique, and added it to the create project dialog, and also added the project list to the main sidebar.
Also made a bunch of other misc changes
Log in to leave a comment
Added file expiry/TTL for uploaded files. File validity is checked on download, and theyāre lazily deleted by a cron job on the cf worker every 30 minutes.
Log in to leave a comment
I just implemented the SDK and did some major refactoring of the TUS implementation. There are 4 packages: @silo-storage/sdk-core, @silo-storage/sdk-next, @silo-storage/sdk-react, and @silo-storage/sdk-server
The Core SDK implements the core functions, like URL signing, different API request helpers etcā¦
The Server SDK implements the uploadthing-like file router ergonomics, including handling callbacks etcā¦
The Next SDK helps adapt the Server SDK to specifically nextjs, like creating the route handlers, etcā¦
The React SDK implements the React hooks like useUpload() and unstyled upload buttons/dropzones.
I did use AI to partially generate some of the SDK code, specifically the server SDK. This is because writing the typescript types would be very hard and cumbersome (see image 4)
I also used AI to quickly create an example nextjs app to demo the SDK. I plan on rewriting this part later.
Finally, while testing I ran into issues with my TUS implementation. Specifically with the upload resuming. Before, the worker stored all the metadata into KV, but after looking at Signalās TUS worker implementation, I decided to refactor the TUS handler routes to instead use Durable Objects instead of storing state in a KV. This helps make recovery and keeping things tied together easier. Did use some AI to help with the migration.
Right now, it uses TUS chunked uploads, but iām looking into streaming it
Log in to leave a comment
Built out the webhooks. It uses vercel queues to dispatch the webhooks with retries etcā¦
Webhook events are signed with a signing secret provided in the ui when creating the webhook.
(the ui is bad right now, but iāll work on it later)
Log in to leave a comment
Iāve revamped the environment system. Now each developer gets their own dev env, makes stuff easier. Also added a environment selector in the sidebar.
Finally, to handle deletion of environments with possibly tens of thousands of files, the worker offloads the deletion task onto cloudflare queues, which provides a durable way of āqueueingā the deletion of these objects. Not sure if that makes sense, itās very late and I want to go to bed :p
Log in to leave a comment
Revamped the dashboard, and also added a time range filter to the analytics page.
Also a bunch of other stuff that I forgot about. Spent some time implementing a thing I forgot I already implemented on another computer :/
Log in to leave a comment
Iāve made it so that client SDKs can self-sign upload URLs without needing to hit /api/v1/upload for a presigned url.
Also API keys are no longer reqād to upload a file via the ui. Itās handled behind the scenes.
Log in to leave a comment
Added file/bandwidth analytics, and also revamped the sidebar + mobile support.
The charts use recharts
The TUS protocol is now properly implemented, had to go around fixing some bugs etcā¦
Log in to leave a comment
I built a file info ui, pretty simple stuff using react query and trpc.
Log in to leave a comment
Iāve implemented the TUS protocol. Itās essentially a protocol for resumable file uploads, itās pretty cool!
Log in to leave a comment
Iāve bootstrapped more of the project, added scoped API keys, etc
Log in to leave a comment
Iāve bootstraped a new project using turbo-kit. Iāve also set up a cloudflare worker microservice, and set up organization provisioning
Log in to leave a comment