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.