Kivy - File Chooser

---

---

In a GUI application, you are often required to choose a required file from the local filesystem. Kivy framework presents the "kivy.uix.filechooser" module that provides various classes for describing, displaying and browsing file systems.

The classes in filechooser module adopt a MVC design. They can be categorized as follows −

• Models are represented by concrete implementations of the FileSystemAbstract class, such as the FileSystemLocal.

• Views are represented by the FileChooserListLayout and FileChooserIconLayout classes. These are used by the FileChooserListView and FileChooserIconView widgets respectively.

• Controllers are represented by concrete implementations of the FileChooserController, namely the FileChooser, FileChooserIconView and FileChooserListView classes.

The FileChooserIconView and FileChooserListView classes provide very-simple-to-use widgets that provide access to the file system with two different visual representations, as the names suggest.

The FileChooserListView widget displays files and folders as text items in a vertical list. A folder is identified by a ">" sign to the left of its name, and a click expands or collapses its files and subfolders.

The FileChooserIconView widget displays a folder icon with the name below it, and a file icon with its name.

If the number of files/folders exceeds the height and width of the widget, the vertical and horizontal scrollbars are attached to it.

The FileChooser views have following properties −

• files − The list of files in the directory specified by path after applying the filters. files is a read-only ListProperty.

• filter_dirs − Indicates whether filters should also apply to directories. filter_dirs is a BooleanProperty and defaults to False.

• filters − filters specifies the filters to be applied to the files in the directory. filters is a ListProperty and defaults to []. If empty, it is equivalent to '*' indicating that no file has been filtered out of the list. The filters are not reset when the path changes. You need to do that yourself if desired.

You can specify one or more of the following patterns in the list −

Both the views raise the on_selection event to which a callback can be bound. When this event is generated, if a folder is selected, it will expand or collapse it. If a file is selected, its name is passed to the callback.

ListView Example

In the first example, we construct the App window with a FileChhoserListView widget and a label in a vertical box layout.

Use the following "kv" file script for the purpose. The select() method is bound to the view's "on_selection" event.

<Filechooser>:
   label: label
   orientation: 'vertical'
   BoxLayout:
      FileChooserListView:
         canvas.before:
            Color:
               rgb: .4, .5, .5
            Rectangle:
               pos: self.pos
               size: self.size
         on_selection: root.select(*args)

   Label:
      id: label
      size_hint_y: .1
      canvas.before:
         Color:
            rgb: .5, .5, .4
         Rectangle:
            pos: self.pos
            size: self.size

Note the use of canvas object of FileChooseListView and Label widgets to provide background color.

The Kivy Application class code is given below −

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.core.window import Window

Window.size = (720,400)

class Filechooser(BoxLayout):
   def select(self, *args):
      try: self.label.text = args[1][0]
      except: pass
      
class FileDemoApp(App):
   def build(self):
      return Filechooser()
if __name__ == '__main__':
   FileDemoApp().run()

Output

When the above code is run, you get the list of files/folders. The name of the file with its full path is displayed on the label.

IconView Example

We now show the use of FileChooserIconView. It is placed in a horizontal box, along with an Image widget by its side. While most of the configuration of FileChooserIconView is same as in previous example, we add the filters property to restrict the display of files to png files only.

<Filechooser>:
   img: img
   orientation: 'horizontal'
   BoxLayout:
      FileChooserIconView:
      filters: ['*.png']
         canvas.before:
            Color:
               rgb: .5, .4, .5
            Rectangle:
               pos: self.pos
               size: self.size
         on_selection: root.select(*args)
   
   Image:
      id: img
      source:""

Since we intend to display the selected image, the select() method is changed so that the source property of Image object is assigned with the selected file.

class Filechooser(BoxLayout):
   def select(self, *args):
      try:
         self.img.source = args[1][0]
      except:
         print ('error')
         
class FileIconApp(App):
   def build(self):
      return Filechooser()

# run the App
if __name__ == '__main__':
   FileIconApp().run()

Output

Run the program and browse to the desired image file. The selected image will be displayed on the right.