# Files Blocks

**Advanced Blocks**

For most blocks in this drawer, you can right-click the block and select **Show advanced block** to see an expanded block with additional outputs. Both the simple and advanced blocks will be explained in this document.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FZ37o5yrj7WRFXjipwyBy%2Fphoto_library_adv.png?alt=media&#x26;token=7436cfde-7a0d-4812-929c-7d2bb256c092" alt=""><figcaption></figcaption></figure></div>

## Block: Image/Video from Photo Library

This block will open the user's photo library and allow the user to select a photo or video. The file can then be used in the app.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FgzmtHmu2h3RxIaGFO66c%2Fphoto_video_library.png?alt=media&#x26;token=6f5430bc-96a7-4857-a2e2-8344d2c32337" alt=""><figcaption></figcaption></figure></div>

#### Advanced Block

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Feel9VoeO24cOOYurIdOq%2Fphoto_video_library_adv.png?alt=media&#x26;token=a68cfe03-4abd-4a82-a171-2d4ddba7f08d" alt=""><figcaption></figcaption></figure></div>

| Output         | Data Type   | Function                                            |
| -------------- | ----------- | --------------------------------------------------- |
| photo or video | image/video | if a file was selected, returns the file            |
| was cancelled  | true/false  | returns whether the user cancelled selecting a file |
| error          | text        | if there was an error, returns the error            |

## Block: File from Device

This block will open the user's file library and allow the user to select a file. The file can then be used in the app.

You can allow the user to upload any kind of file, or limit their selection by file type using the drop down menu.

{% hint style="info" %}
Your end users may experience lags or delays if the file size they try to upload is larger than 5MB.
{% endhint %}

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FKZWlX9jyApogHVwTwXrl%2Ffile_from_device.png?alt=media&#x26;token=23d9fa59-6730-4ca2-97b8-359f264f326c" alt=""><figcaption></figcaption></figure></div>

#### Advanced Block

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FRO7AezfiKxMuAlIqJeyL%2Ffile_from_device_adv.png?alt=media&#x26;token=a959d451-2dcd-48fd-b209-35e3263cc059" alt=""><figcaption></figcaption></figure></div>

<table><thead><tr><th width="150">Output</th><th width="287.76404494382024">Description</th><th>Data Type</th></tr></thead><tbody><tr><td>file</td><td>Points to the file that has been uploaded</td><td>Data type of the file that has been uploaded.<br>Can also return address of the file as text</td></tr><tr><td>name</td><td>Name of the uploaded file</td><td>Text</td></tr><tr><td>mime type</td><td>Describes the type of file in <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME format</a></td><td>Text</td></tr><tr><td>size</td><td>Returns size of uploaded file in bytes</td><td>Number</td></tr><tr><td>was cancelled</td><td>Indicates whether the end user cancelled selecting a file</td><td>True/False</td></tr><tr><td>error</td><td>If there is an error, returns the error. Else returns <code>null</code></td><td>Text</td></tr></tbody></table>

## Upload a File to the Cloud

Thunkable integrates with [Cloudinary](https://cloudinary.com/), a service that allows you to store media files in the cloud. The upload file block allows you to send media directly from your Thunkable app to a linked Cloudinary account.

### Video Tutorial

#### How to Store and Access Cloudinary Files in Your Thunkable App

In this tutorial, you’ll learn how to use files stored in Cloudinary in your app and how to upload files directly from your app to Cloudinary.

{% embed url="<https://youtu.be/z3dsiSzihdI>" %}

### Connect Your Cloudinary Account to Your Thunkable Project

Thunkable provides a shared Cloudinary account for your convenience, but we strongly recommend creating your own account to ensure privacy for your uploaded media. In addition, the shared Thunkable Cloudinary account has a media size limit of 10MB per app and your files will be deleted after 90 days.

To connect your Cloudinary accout to your Thunkable project:

1. Create a free Cloudinary account here: [cloudinary.com](https://cloudinary.com/).
2. From your **Cloudinary dashboard**, retrieve the following account details:&#x20;
   1. **Cloud Name**
   2. **API Key**
   3. **API Secret**
3. Return to your Thunkable project page.
4. Click the Settings icon in the left side menu.\
   ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FjNZyXDMFmmH3JZw9d0cX%2FSettings%20icon%20w%3A%20arrow%20callout.png?alt=media\&token=ebc2205b-c7dd-400b-bbec-700c9bd26ec9)
5. Scroll down until you reach the Cloudinary Settings section.
6. Input your Cloudinary Cloud Name, API Key, and API Secret.\
   ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F2LBoHz2nSxUM6u6164Dc%2FSettings%20%3E%20Cloudinary%20Settings.png?alt=media\&token=7bf54824-6b4c-4687-a60b-92c39a99d404)

## Block: url from uploaded file / upload file

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FICG1QFvLdjskC4C1xzk9%2Furl_from_file.png?alt=media&#x26;token=faf3de34-a039-4a37-8c24-e95425de0945" alt=""><figcaption></figcaption></figure></div>

**Advanced Block**

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F8jBzAkUb0QiEnPclwa7D%2Furl_from_file_adv.png?alt=media&#x26;token=4bb61983-909d-4577-933d-b86fbc9d231d" alt=""><figcaption></figcaption></figure></div>

| Output | Data Type | Function                                 |
| ------ | --------- | ---------------------------------------- |
| URL    | text      | returns a URL for the uploaded file      |
| error  | text      | if there was an error, returns the error |

To see some examples of the `url from uploaded file` block in action, check out this video tutorial: [How to Create Data in a Thunkable Data Source](https://youtu.be/mxyjQRv4aDg?t=295) and the following screenshots.

<figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F9iP1QlARZh3cWOBFkkqY%2Fupload%20file%201.png?alt=media&#x26;token=0b75e08b-39a3-40e1-a486-999a73656a46" alt=""><figcaption></figcaption></figure>

Connect the `image from photo library` block to the `url from uploaded file` block to allow users to browse and select any image stored on their device's library.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FdsvQ0WMdbZAd3uF2BBq6%2Fupload%20file%202.png?alt=media&#x26;token=4ff05eec-6973-4247-9e57-0888180474c2" alt=""><figcaption></figcaption></figure></div>

Connect the `photo from camera` block to the `url from uploaded file` block to let users snap a picture from their device's camera and upload it instantly.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FjkNSCLJncWxCyAxxwsYR%2Fupload%20file%203.png?alt=media&#x26;token=d49db775-5092-46fd-a9d8-b6e8d282d3dc" alt=""><figcaption></figcaption></figure></div>

Connect the `image file from device` block to the `url from uploaded file` block for a more universal option that works on Android, iOS, and even in web apps, allowing users to upload any image file from their device, no matter the platform.

## Block: Resize Image

This block will take an image file and return it in the given dimensions, quality and format.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FHXWLh7fbirlChFKziK8n%2Fresize_image.png?alt=media&#x26;token=125f89aa-5587-4fee-b15f-95b2c52436ab" alt=""><figcaption></figcaption></figure></div>

#### Advanced Block

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FU8qNUFeg4icxasid5Ct8%2Fresize_image_adv.png?alt=media&#x26;token=17ed3859-fe0d-4f17-8b19-6fe0e6fe2af7" alt=""><figcaption></figcaption></figure></div>

| Input            | Data Type        | Function                                                                 |
| ---------------- | ---------------- | ------------------------------------------------------------------------ |
| resize image     | Any image file   | The image to be resized                                                  |
| width            | Number           | Width in pixels to resize image file to                                  |
| height           | Number           | Height in pixels to resize image file to                                 |
| quality          | Number           | Quality of resulting image, as a percentage of quality of original image |
| using ... format | Select from menu | Select image type for resulting image                                    |

| Output        | Data Type | Function                                                    |
| ------------- | --------- | ----------------------------------------------------------- |
| resized Image | Image     | The resized image in the selected format and quality level  |
| error         | Text      | If there was an error, returns the error. Else returns NULL |

## Download A File Within Your App

The Download File within app blocks enable your app's users to download files used in your app on request, ensuring a better offline user experience.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FThxcfhcH5o607t2OZjEC%2Ffile_download_example.png?alt=media&#x26;token=df0777f0-fad1-487c-925b-50d145e5da50" alt=""><figcaption></figcaption></figure></div>

## Block: Download File from URL

This block allows you to download a file from a URL onto your device. This file cannot be accessed from outside the app.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FDxfOBEk8IuKphGhVuNIV%2Fdownload_file_url.png?alt=media&#x26;token=924221ca-1912-42d5-b94b-03672c5b6bf0" alt=""><figcaption></figcaption></figure></div>

**Advanced Block**

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FPTwBXKdVyuYLJj8i9DfD%2Ffile_download_adv.png?alt=media&#x26;token=ffc5543f-7385-4e26-a997-601e119e95b7" alt=""><figcaption></figcaption></figure></div>

| Output   | Data Type | Function                                                    |
| -------- | --------- | ----------------------------------------------------------- |
| file     | Text      | Returns a file name and extension for the downloaded file.  |
| progress | number    | Returns the progress of the downloaded file.                |
| error    | Text      | If there was an error, returns the error. Else returns NULL |

{% hint style="info" %}
The file type in the URL must be the same type as the type on the file name. Downloaded files cannot be accessed outside of the app (e.g. device files, photo gallery, etc.).
{% endhint %}

## Block: Get Downloaded Files

This block returns the list of files that you have already downloaded.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2F9IpkIoRCdaLj3g4I371L%2Fget_downloaded_files.png?alt=media&#x26;token=3afc99fb-1b13-41c1-a846-387b2f5c6b50" alt=""><figcaption></figcaption></figure></div>

**Advanced Block**

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FYoA80GPltTKkRBaA04pr%2Fget_downloaded_files_adv.png?alt=media&#x26;token=cd915259-789a-4954-a11c-3b7c91ae61b6" alt=""><figcaption></figcaption></figure></div>

| Output | Data Type | Function                                                              |
| ------ | --------- | --------------------------------------------------------------------- |
| files  | Text      | Returns a list of file names and extensions for the downloaded files. |
| error  | Text      | If there was an error, returns the error. Else returns NULL           |

## Block: Delete Downloaded File

This block deletes the file that you have downloaded from your local storage.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FKcTk0LK2GsJYGBD2RVcL%2Fdelete_downloaded_file.png?alt=media&#x26;token=f1510752-24cc-496b-be52-17abf08248ae" alt=""><figcaption></figcaption></figure></div>

**Advanced Block**

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FhyyNFQyIPbAzXXjl0ypg%2Fdelete_downloaded_file_adv.png?alt=media&#x26;token=b2eecbda-8fbe-441d-9fef-9c3d7602dd27" alt=""><figcaption></figcaption></figure></div>

| Output | Data Type | Function                                                    |
| ------ | --------- | ----------------------------------------------------------- |
| error  | Text      | If there was an error, returns the error. Else returns NULL |

## Block: Rename Downloaded File

This block renames a previously downloaded file from your local storage.

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FGEckU53JaM6PDIZ5Q44j%2Frename_downloaded_file.png?alt=media&#x26;token=05a4711a-0530-4157-bd86-7b6e5a9ee503" alt=""><figcaption></figcaption></figure></div>

**Advanced Block**

<div align="left"><figure><img src="https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fv41dGKt6RyTYwqjOz0pY%2Frename_downloaded_file_adv.png?alt=media&#x26;token=42674d91-fd1a-494b-b59b-d90ccdf2c8d3" alt=""><figcaption></figcaption></figure></div>

| Output | Data Type | Function                                                    |
| ------ | --------- | ----------------------------------------------------------- |
| error  | Text      | If there was an error, returns the error. Else returns NULL |
