Uploading File to your Database
In this tutorial, we will learn how to add a File Input on our page, then connect it to the Cloud Backend in order to upload the file to the Database.
First, go to your project's Cloud Backend, and create a new table. I named this one 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're expecting to upload any other type, like pdf or docx, 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. Update will also work, if what you need is to update a profile picture, for example.
Click "Create" and the function editor will open up. Under "Table Name", select the table you just created. Add an input parameter named "upload", then in column mapping, match the column "file" from the database to the parameter "upload".
Now, when the function gets triggered, a new row will appear in your table containing the file provided in the "upload" input parameter. Don't forget to save your function.
Now that your backend is ready, go to the pagebuilder, and drag into your page an "Input file" from the Cloud Backend Inputs, as well as a button.
Double click on the button and go to Action => Cloud Backend.
Check off "Enable Cloud Backend Trigger" and select the function you just created. Bind the "upload" parameter to a "Field" source type. As for the source, select the input file you added to your page. By default, its name is "file", but you can name it however you wish, especially if you're looking to upload multiple files at once.
Press save and preview your page.
Select the file you want to upload, then press submit.
Voilà! Open your database, and you'll find your recently uploaded file added in the table.
Additional Information:
- The maximum size of an uploaded file is currently set to 10MB.
- Any uploaded file will be counted in your project storage. If you reach the limit, you won't be able to upload any more files until you free some space.
-