We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
Jump to file
- ∟ mix.exs
- ∟ assets/js/app.js
- ∟ assets/js/uploaders.js
- ∟ assets/js/uploaders/gcs.js
- ∟ lib/my_app/storage.ex
- ∟ lib/my_app/storage/object.ex
- ∟ lib/my_app/storage/object_uploaded_by_user.ex
- ∟ lib/my_app_web/controllers/storage_controller.ex
- ∟ lib/my_app_web/live/storage_live.ex
- ∟ lib/my_app_web/live/storage_live/components.ex
- ∟ lib/my_app_web/router.ex
- ∟ priv/repo/migrations/20240525141522_create_storage_objects.exs
Install deps
Install the following dependencies to get started. You can find their documentation on HexDocs.
- Buckets
- hexdocs.pm/buckets
- Size
- hexdocs.pm/size
Adding uploaders in JS
The uploaders module is imported and passed to the
LiveSocket
configuration. This change enables the frontend to handle file uploads using the configured
uploader, which in this case is set up to use Google Cloud Storage (GCS).
|
|
|
|
|
|
|
|
+ |
|
|
|
|
|
|
|
+ |
|
|
|
|
|
|
Defining uploaders
A new file uploaders.js exports the GCS uploader.
|
|
+ |
|
GCS uploader
The GCS uploader is implemented in uploaders/gcs.js, handling the actual upload process via XMLHttpRequest. This script manages the file upload lifecycle, providing progress updates and handling errors.
|
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
Storage module
The storage.ex module encapsulates all interactions with storage objects. This module provides various functionalities, including creating, retrieving, listing, and marking objects as deleted.
|
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
Object schema
The object.ex module defines the storage object schema and associated changesets. This file manages object data, including filename normalization, schema definition, and database operations.
|
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
Object uploaded by user schema
The object_uploaded_by_user.ex module links objects with the users who uploaded them.
|
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
Storage controller
A new controller, StorageController, is introduced to handle file downloads. The controller module exposes a function that generates a secure URL for downloading files. A download action verifies the token and retrieves the file for download, sending it back to the client.
|
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
External uploads in LiveView
StorageUploadLive provides a dynamic interface for users to upload files. Users can drag and drop files or browse to upload, the file in put provides real-time feedback on the upload progress. Once stored, uploaded files may be deleted or downloaded.
|
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
Storage components
To keep our LiveView module less cluttered, we add a separate components module which contains the components specific to Storage. These can be referenced by other features in the future, and more components can be added as our upload interface changes.
|
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
Router updates
Routes for the new file storage features are added to the router. Defines a route for downloading files, a LiveView route for the file upload interface, and configures a local volume for development file storage.
|
|
|
|
|
|
|
|
+ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
+ |
|
+ |
|
|
|
|
|
|
|
|
|
+ |
|
+ |
|
|
|
|
|
|
Migration
Creates tables for storing file metadata and associating files with users.
|
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|
+ |
|