Storage

Receive uploads from your users to your preferred cloud storage solution. Manage references to uploaded files and associate them with records in your business domain.

Level: Medium
13
560
0

Install deps

Install the following dependencies to get started. You can find their documentation on HexDocs.

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.