SvelteKit version: 1.5.0
Svelte version: 3.54.0
File upload is everywhere . And you've probably already encountered it during your web journey, whether as a simple user or a developer. In this article, we are going to learn how to implement a file-uploading feature in a Svelte application.
Let's say we are building an application where users can upload their profile pictures. Once the picture is successfully uploaded, it should be added to a folder on the server. We can then access the picture on the server using its URL.
The process for this will be:
The user selects a picture from their computer through a file input in a form
The picture file is read, and its content is sent to the server
The server saves the picture in a folder
We can now access the picture using its URL
This is a very rough idea of how the feature works. They are many other steps like validation, error handling, displaying the upload progress, etc. that are necessary to make the feature robust. We will go into more detail about these steps later.
We will use SvelteKit to create our Svelte application for this post. SvelteKit is a meta framework on top of Svelte that offers features like file-based routing, server, and API routes, etc.
If you want to know the differences between Svelte and SvelteKit, check out this article.
To create a SvelteKit application, you can run the following command in your terminal:
You can also read the official documentation here for more information.
Creating the file input
The first step for our feature is to create a form with a file input. A
form in Svelte is pretty much similar to an HTML form. In the
src/routes/+page.svelte of our new SvelteKit project, we can add the following code:
This is just a simple file input with a label and a submit button. There are, however, a few things needed to make it work properly:
Validation for the allowed extensions for the file. Since we are uploading images, we will only allow
A server action that runs when the form is submitted. This action will be responsible for reading and sending the file to the server.
The HTML file input has a property called
accept , allowing us to specify the extensions. We can add it to our input like this:
We can also declare an array with these extensions and use it in the
It's time to create the server action to handle the file uploading.
Since we are uploading files to the server, we will use the
multipart/form-data enctype for the form.
This attribute can now be added to the form element alongside with SvelteKit
use:enhance to enable progressive enhancement and the
Getting and uploading the file to the server
Now that the frontend part is done let's move to the backend part. SvelteKit form actions allow executing some logic once a form is submitted.
Actions are added in the
+page.server.ts file for the route where they should be called.
A basic form action will look like this:
In our case, we want to get the uploaded file, do some basic validation, and then upload the file to the desired location (a folder on the server, a remote location like S3 or Cloudflare R2 , etc.).
Let's see what that looks like in practice:
Here, we are using native HTML
FormData to get the data submitted from the front end. We are also returning a custom error in case there is no file uploaded.
For this example, we are just saving the file in the static folder of our SvelteKit app. For that, we will use the Node.js
Get help with your Svelte or SvelteKit code
Got a Svelte/Sveltekit bug giving you headaches? I’ve been there!
Book a free 15 min consultation call, and I’ll review your code base and give you personalized feedback on your code.
P.S. If you have a bigger problem that may need more than 15 minutes, you can also pick my brain for a small fee. 😊 But that’s up to you!
If you have been following my blog, you should know that I like Svelte (and SvelteKit) because both try to stick as much as possible to web standards. And this example for file upload is a good example of that.