Creating a document upload feature

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.

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.

Add the properties 'Name' and 'File' to 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.

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

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:

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

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:

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.

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

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.