mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
9423e890c8
* create new version * revert changes in versions.json * add system requirements in version 2.39
90 lines
No EOL
3 KiB
Markdown
90 lines
No EOL
3 KiB
Markdown
---
|
|
id: upload-files-gcs
|
|
title: Upload Files Using GCS
|
|
---
|
|
<div style={{paddingBottom:'24px'}}>
|
|
|
|
In this guide, we are going to create an interface to upload PDFs to Google Cloud Storage.
|
|
|
|
Before adding the new data source we will need to have a private key for our GCS bucket and make sure the key has the appropriate rights.
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
## Setting up Google Cloud Storage Data Source
|
|
|
|
1. Go to the data source manager on the left-sidebar and click on the `+` button.
|
|
2. Add a new GCS data source from the **APIs** section in modal that pops up.
|
|
3. Enter the **JSON private key for service account** and test the connection.
|
|
4. Click on **Save** to add the data source.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
## Adding a File Picker
|
|
|
|
1. Drag and drop the **file picker** widget on the canvas
|
|
2. Configure the file picker:
|
|
- Change the **Accept file types** to `{{"application/pdf"}}` for the picker to accept only pdf files. In the screenshot below, we have set the accepted file type property to `{{"application/pdf"}}` so it will allow to select only pdf files:
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
- Change the **Max file count** to `{{1}}` as we are only going to upload 1 file at a time.
|
|
|
|
3. Select a pdf file and hold it in the file picker.
|
|
|
|
:::info
|
|
File types must be valid **[MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)** type according to input element specification or a valid file extension.
|
|
|
|
To accept any/all file type(s), set `Accept file types` to an empty value.
|
|
:::
|
|
|
|
<div style={{textAlign: 'left'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
## Creating a Query
|
|
|
|
1. Click on the `+` button of the query manager at the bottom panel of the editor and select the GCS data source
|
|
2. Select **Upload file** operation and enter the required parameters:
|
|
- Bucket: `gs://test-1`
|
|
- File Name: `{{components.file1.file[0]['name']}}`
|
|
- Content Type: `{{components.file1.file[0]['type']}}`
|
|
- Upload data: `{{components.file1.file[0]['base64Data']}}`
|
|
- Encoding: `base64`
|
|
3. Click on **Save** to create the query
|
|
|
|
</div>
|
|
|
|
<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
|
|
|
|
## Running the Query
|
|
1. Add a **button** that will fire the query to upload the file
|
|
2. Edit the properties of the button and add a **event handler** to **Run the query** on **On-Click** event.
|
|
3. Click on **Button** to fire the query, this will upload the pdf file that you selected earlier through the file picker and will upload it on the GCS.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div> |