All Collections
Use-case guides
Displaying data
Creating a document upload feature
Creating a document upload feature

In this article, you'll learn how you can upload files in your applications.

Updated over a week ago

After reading this article you’ll discover:

  • How you can upload images;

  • How to upload a variety of files.

Betty Blocks knows two ways of uploading files. The first one is an image upload, you can only upload images using this component in the page builder. The other component 'file upload' has a wide range of file extensions that are allowed. You can even customize these yourself, allowing one and maybe not allowing another extension.

Search result of the two ways to upload files in Betty Blocks

Let's put the 2 components above into practice to see how they work.

Data model

Navigate to your data model and add two models, one called 'ImageUpload' and one called 'FileUpload'. We'll start off with the images, adding 2 properties 'Name' and 'Photo' to the model.

Properties of the 'ImageUpload' model

Add the properties 'Name' and 'File' to the 'FileUpload' model.

Properties of the 'FileUpload' model

With the models in place, we can fill them with data. To do this we'll have to create a page in which we'll use the two components mentioned above.

Creating the page

Create a page called 'Upload' or something similar to this. In this example, we'll use the 'basic header and footer' template and we'll use a public page.

Creating a page for uploading files

For this example, we'll add two create forms for the image and file upload. I prepared the page as follows:

The page ready to be configured

In the top column, we'll add the image upload and in the bottom one, we'll add the file upload. Drag a create form into the top column and configure it like this:

Image upload configure form

Hit save when done, the create form will automatically include a text field and the image upload component.

The image upload form

Now repeat this for the file upload, drag a create form into the bottom column.

Once done, hit the 'play' button in the top left corner. Our page will look like this:

The page in the runtime

We can no upload files and images by giving the files and images a name and uploading them, once we hit 'send' the data will be uploaded to our application and we can then use it further in our application.

Successful image upload

When you create a quick data table you can see the image as an 'assets' link:

The uploaded image in a data table

To view the actual image you can use the 'media' component.

For files, this works exactly the same. So we'll skip that one for now since it's repeating the exact steps as the image component.

You can try it out for yourself, and you can verify this.

Did this answer your question?