Skip to content
  • There are no suggestions because the search field is empty.

Creating a document upload feature

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

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.

Keeping the file size in mind

When working with files, it is important to keep an eye on the filesize, as bigger files will also mean a heavier load on your application. You can change the file size requirements in 1 places, but always keep in mind that the file size set in your form, can't be bigger than the file size set in your model, as it could prevent you from saving your files.

  1. The Maximum file size option on the File property details, is the models validation for the size of your file, either submitted via an action or through any other means of import.. This value is used as ‘maximum’ everywhere you are using a File upload input attached to this property.

    The default value for this option is set to 10MB when creating the property. And the maximum set by the platform is 20MB.

  2. You can also limit the maximum file size in the file upload component on your page. This will be the form validation that checks the file size when uploaded even before submitting this to the action.
    The max file size from the input can differ from the model, so keep this in mind as allowing the upload to be 15MB, where the model only accepts 5MB will result in an error.


    The default value for this option is set to ‘empty’ when adding the input to your page.