AppDrag Support Center

Feed your database with file uploads in a minute

In this tutorial we will learn how to add a File Input on our page and connect it to feed our Cloud Backend Database.

First, go to CloudBackend in your project and create a new table. I named it FileUploads

Once created edit the table structure and add a column named file with the data type of your choice. I chose Image to have a preview of the file but if you expect other kind of uploads like pdf, docx, or anything use the type URL.

Your DataBase is now ready. Let's create the API function to insert the file into the table.

Click on create a new function and select the type Visual Insert. (It also works on update if you need to update a profile picture for example)

Click on create and when the function editor opens select the correct table name. Add an input parameter named "upload" and in colomn mapping bind the column "file" from the database to equal the parameter "upload".

So what it does is that when the function is triggered, it will create a new row in our table with the file provided from the input parameter "upload" to the column "file". Don't forget to save your function.

Now your backend is ready. Go to the pagebuilder and add a new input file and a button to your page.

Then double click on the button and go to actions => Cloud Backend.

Check "Enable Cloud Backend trigger" and select the function we created before. Then bind the parameter upload to a "Field" source type. And in the source select the input file you added to your page, by default its name is "file" but you can name it the way you want, especially if you have multiple uploads at once to do.

Press save and preview your page.

Select the file you want to upload and then press submit.

Voilà! You can go to your database to see your recently uploaded file in the list.

Additional information:

- The maximum size of an uploaded file is currently 10MB.
- Any uploaded file will be counted in your project storage. If you reach the limit, you won't be able to upload more files until you free some space.
- For more advanced scenarios we recommend to use Node.js functions with our NPM package

Other articles

Need More Help?


If we've been asked before, it's in our Frequently Asked Questions!

Open FAQ


Chat directly with the AppDrag team!

Open WebChat

Certified Partners

Not enough time to build your site? Find a Certified Partner to help you!

More Info