Live Uploads

The LiveView framework supports the most common features that single-page apps must offer their users, including multipart uploads. LiveView can give us highly interactive file uploads, right out of the box.

In this lesson, we’ll add a file upload feature to our application. We’ll use LiveView to display upload progress and feedback while editing and saving uploaded files. When we’re done, we’ll have all the tools we need to handle complex forms, even those that require file uploads.

We’ll add file uploads to the ProductLive form so users can choose an image to upload and associate with the product in a database. Let’s plan this new feature first. We’ll start on the backend by adding an image_upload field to the table and schema for products. Then, we’ll update the ProductLive.FormComponent to support file uploads. Finally, the LiveView should report on upload progress and other bits of upload feedback.

Let’s get started!