Skip to main content

How to use the file picker component

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.

Position imageview

Add a FilePicker component

So we will need to create a file picker component. Follow the steps below to create the file picker component.


add new component


Choose the 'File picker' component. 


Choose file picker component


Name your component. I named my component 'propic'


Name file picker component



Click the downward arrow as shown below to choose the mime type. This will determine what type of files can be picked.


Click to select mime type


Choose image files then click select


Select mime type


Your screen should look similar to the one below. Click add and your file flicker component will be created.

File picker with mime


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.

Logic to pick file

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.


Add 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.

Set image from shared preferences


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:

onfilepicked logic


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

Popular posts from this blog

Hip hop and RnB songs to apologize to your partner

Love is a beautiful thing, but it often goes wrong. This often leads to pain, suffering and sorrow.  Being imperfect beings, hearts tend to get broken all the time regardless how hard we may try to avoid it.  The heartbreak is often inadvertent but at times we find ourselves in the wrong. An oversight, a word unsaid or even a lapse in our judgement can cause our loved ones harm. This doesn't always have to be the end though. Oftentimes, relationships can be mended by simply uttering three simple words: "I AM SORRY". This article is a collection of some of my favourite 'I'm sorry' songs. I hope you'll enjoy these apology songs, but more importantly, I hope you will get a few quotables and some wisdom nuggets from them.  The best apology however, is to change behaviour (got that from a Jay Z interview) so as you apologize, please remember that it was your actions that hurt them. The best apology is one which involves you not repeating those same mistakes aga

How to easily create background notifications in Sketchware(original)

One of the keys to building a successful app is to find mechanisms that will keep your users engaged. You can do this by using background notifications. This tutorial will show you how to do that in Sketchware. We will cover: 1. How to create notifications in Sketchware 2. How to show these notifications even when the app is closed. We will start by creating a new project. If you do not know how to create a new project please check out this article here. Once we have created our project, let us create a more block to place our code. Navigate to the events menu and then to the moreblock section as shown in the image above. Create a moreBlock. I have created a moreblock with the name "BackgroundActivity" with a boolean variable named "run." See the image below for how to add the boolean variable. Place the following block in the moreBlock Background activity code: moveTaskToBack(_run); That will move our task to the background.  Please note, that at this point we have

Php date: How to get the first and last day of the week

In this tutorial, I'll show you how to get the first and last day of the week in php. By default, in PHP the week runs from Monday to Sunday. However we'll cover two methods to get the first and last day for both those who consider Sunday or Monday as their first day of the week. We will be using 2 functions to achieve this: date() strtotime() We will use a combination of these two functions and store the result in a variable.  How to get the first day of the week If you want to get Sunday, use this method: $firstday = date('l Y-m-d', strtotime("sunday -1 week")); echo $firstday; If you want to get the date for Monday, this current week, use this method: $monday = date('l Y-m-d', strtotime("monday -1 week ")); echo $monday; How to get the last day of the week The following code will give you Saturday as the last day of the current week. $lastday = date('l Y-m-d', strtotime("saturday 0 week")); echo $last