The Easiest Way to Add File Upload to Your Website

#webdev #tutorial #api #filehosting

File upload features are very tedious to implement. From cloud storage (Amazon’s S3 or Firebase’s Firestore) to Database file storage (BLOBs and CLOBs), custom endpoints, form handling…It’s a lot of work.

Skapi makes all of that disappear. It is a backend-as-a-service platform that takes care of user authentication, file storage, and data management. It lets you build full-featured web apps with zero backend infrastructure building, and zero server maintenance.

With Skapi, you can build a complete upload flow (from user authentication to storage and retrieval) using just a few lines of frontend code.

In this guide, you’ll see just how easy it is to:

Set up Skapi in your project
Authenticate users
Upload files through forms

Let’s do it.

1. Set Up Your Skapi Credentials

First, we need to grab your Skapi credentials.

Head to your Skapi Dashboard, open your Service, and navigate to the Getting Started page.

Copy your User ID and Service ID from there.
Now paste those values into your HTML file to initialize Skapi:

<script src="https://cdn.jsdelivr.net/npm/skapi-js@latest/dist/skapi.js"></script>
<script>
  const skapi = new Skapi('your_service_id', 'your_user_id');
</script>

With Skapi initialized, you're ready to authenticate users. Let’s start with account creation.

2. How to handle User Signup

Now, with your credentials set your user will need to create an account for your service, and that is as easy and straightforward as you could ask for using Skapi's signup() endpoint.

Here’s a basic example:

let parameters = {
  email: "user@email.com",
  password: "password", // Must be 6–60 characters.
  name: "User's name"
};

skapi.signup(parameters)
  .then(res => window.location.href = 'login.html')
  .catch(err => window.alert(err.message));

This is the bare minimum required to register a user. You can also include additional fields like age, phone number, and any custom data your service needs.

3. How to set up Logging In

And logging in is even easier. Here’s how to use the login() method:

let parameters = {
  email: "user@email.com",
  password: "password"
};


skapi.login(parameters)
  .then(user => window.location.href = 'welcome.html')
  .catch(err => window.alert(err.message));

And just like that, your user is logged in and ready to go.

4. How to add File Upload

Now let’s upload some files!
The easiest way to handle file uploads with Skapi is through a simple HTML form. Here’s how to do it.

<form onsubmit="skapi.postRecord(event, {
    table: 'my_photos',
    progress: (p) => console.log(p)
  }).then(rec => console.log(rec))">


  <input name="description" placeholder="Photo description" />
  <input name="picture" type="file" multiple />
  <input type="submit" value="Submit" />
</form>

When the form is submitted, Skapi automatically uploads the selected files as an array of BinaryFile objects under the key picture (matching the name of the file input).
Here’s what a resulting record might look like:

{
    record_id: '...',
    ...,
    bin: {
        picture: [
            {
                access_group: 'public',
                filename: '...',
                url: 'https://...',
                path: '.../...',
                size: 1234,
                uploaded: 1234
                getFile: () => {...};
            },
            ...
        ]
    }
}

And that’s it, your files are uploaded and securely stored in Skapi, ready to be accessed or managed whenever you need.

Final Thoughts: Skapi vs Traditional Setup

Building a complete file upload flow usually means juggling multiple tools and layers.

Traditional Setup Example:

Backend API to receive files (e.g. Node.js + Express)
Cloud storage config (e.g. AWS S3 buckets and permissions)
Authentication system (e.g. JWT, OAuth)
Frontend integration with fetch() or axios
Middleware for file parsing (e.g. multer)

Skapi Setup Example:

One <script> tag
One signup() call
One login() call
One <form> element
One postRecord() call

That’s it. You get secure uploads, authentication, storage, and access control without touching a memory stream or cloud config. What usually takes days to build, test, and deploy can now be done in minutes.

Drop a comment below and let us know your struggles in the File Upload process and how do you solve them.