The file picker allows you to add and use files from your phone's storage in your app. Using the file picker component you can choose where to pick:
• images
• documents
• audio files
• all files
This tutorial will show you how to use the file picker component in your own app.
Getting started
Let's start by adding an imageview to our screen. The user will click this image to select a new picture. We will therefore navigate to our imageview onClick event. This is where we will place our logic to choose a picture.
Add a FilePicker component
So we will need to create a file picker component. Follow the steps below to create the file picker component.
Choose the 'File picker' component.
Name your component. I named my component 'propic'
Click the downward arrow as shown below to choose the mime type. This will determine what type of files can be picked.
Your screen should look similar to the one below. Click add and your file flicker component will be created.
Set up 'imageview clicked' logic
After we have created our component, let's place our file picker component as shown below. This allows the user to pick a file when they click the image.
Add onfilesPicked event
The next step is to set up our logic for what happens when a file is picked. Click the back button.
So let's go to the Components section to add a new onFilePicked event.
Set up onFilesPicked logic
In your onFilesPicked event, add the following logic to save your image using shared preferences. This means the image will be saved on the user's device. You will need to create a shared preferences component. If you're not sure how to do this, please check out this article on how to save data to local storage
The above logic will display the image in your image view from your file path. The shared preferences component saves the file path so that your app remembers where the image was displayed from.
Display image onStart
If you want the image to be displayed the next time the app starts, simply use the following blocks on create.
Please note that the key you use to retrieve the data should be the one you used to save it. In the above example I saved using the key "logo"
Alternative logic
Resize image to circle
We can also change our logic so that the image is resized and saved to an new folder which our app will create. This folder will be named 'MyApp' but you can change this to your app.
For us to achieve this we will start by creating 2 string variables. We will name our string 'imagepath' and 'imagename'. Whenever an image is picked we will save its path as a string and we will also save the image name. We will also use a block to resize our image to a circle from its path and then save it in our awesome app's folder for future use. Our logic will look as follows:
You can now run your app and test it.
I hope you found this very helpful and I wish you all the best as you develop your own app.
Comments