UI Bakery Docs
Sign In
Roadmap
Search…
What is UI Bakery?
Concepts
Release Notes
Security
Starter Guide
Getting Started
Create an app
Explore the interface
Read and write data
Organization settings and user permissions
Basics
Components
Actions
Variables
Data mapping & transforming
Field types & types recognition
Generators for CRUD operations
Development history
Release Management
Environments
Data sources
Data sources
Connecting local database via ngrok
SSH Tunneling
On-premise
UI Bakery on-premise
Google Sheets connection setup
Configuring email provider
Updating on-premise version
Tutorials
Project Dashboard on top of Airtable data
Customer Orders Tracking Dashboard on top of MySQL
Customer Support Dashboard on top of Google Sheets
How Tos
Work with data
Work with components
Read query params from URL
Add navigation to application
Use external JS libraries
Generate PDF document
CSV import
CSV export
Uploading the files
Display files from Google Drive and Dropbox
Implement advanced validation
Select multiple table rows
Powered By
GitBook
Uploading the files
To upload the files from UI Bakery to your database, there are two approaches:
Uploading the files via FETCH method
The first approach to upload the files into your database is by using the FETCH method.
1.
Add an input component, and change its type to
file
.
2.
Create the
Code
action, and specify the code as below:
1
const
file
=
{{
ui
.
fileInput
.
value
[
0
]}};
2
const
formData
=
new
FormData
();
3
formData
.
append
(
'upload'
,
file
);
4
5
fetch
(
'https://mycompany.com/api/upload-file'
,
{
method
:
"POST"
,
body
:
formData
});
Copied!
replace
'url'
with the necessary URL.
3. Assign the action
OnChange
trigger of the input or add a button and assign the action on the button's click.
Uploading the files by sending a binary string
You can also send a file as a binary string instead of FormData.
1.
Add an input component, and change its type to
file
.
2.
Add a multi-step action. The first step should be a
Code
step with the below code:
1
const
file
=
{{
ui
.
fileInput
.
value
[
0
]}};
2
return
await
new
Promise
(
_res
=>
{
3
const
reader
=
new
FileReader
();
4
reader
.
onload
=
function
(
evt
)
{
5
_res
(
evt
.
target
.
result
);
6
};
7
reader
.
readAsBinaryString
(
file
);
8
});
Copied!
3. Add
HTTP request
as a second step of the action. Select POST method, add your base URL, and specify this code into the body of your request:
1
{
2
binaryFile
:
{{
data
}}
3
}
Copied!
Note! For this approach, the server should know how to process these types of request.
4. Assign the action
OnChange
trigger of the input or add a button and assign the action on the button's click.
How Tos - Previous
CSV export
Next - How Tos
Display files from Google Drive and Dropbox
Last modified
24d ago
Copy link
Contents
Uploading the files via FETCH method
Uploading the files by sending a binary string