Displaying data
      Back to home
      1. Betty Blocks Documentation
      2. Use-case guides
      3. Displaying data

      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.