=======================================
Tutorial. Part 2. File and image fields
=======================================

In this part we will demonstrate how to work with files and images in Jam.py.

Adding Image field
==================

Let's select the "Customers" catalog, Double-click it to open the
:doc:`Item Editor Dialog </admin/items/item_editor_dialog>`
and add an image field "Photo":

.. image:: /intro/_images/image_field.png
	:align: center
	:alt: image_field.png

Now refresh the project page, click the Customers menu item and open the edit form.

.. image:: /intro/_images/image_project1.png
	:align: center
	:alt: image_project1.png

Double-click the image in the editing form to select an image from the Open File 
dialog box.

.. image:: /intro/_images/select_image.png
	:align: center
	:alt: select_image.png


.. image:: /intro/_images/image_project2.png
	:align: center
	:alt: image_project2.png

.. note::

  To clear an image, hold down the Ctrl key and double-click the image.

Let's open the
:doc:`Field Editor Dialog </admin/items/field_editor_dialog>`
in Application Builder and set **View width** to 120 and
**Edit width** to 314 on the **Interface** tab.

.. image:: /intro/_images/image_field2.png
	:align: center
	:alt: image_field2.png

.. note::

  You can set the image placeholder by double-clicking on it.

In the
:doc:`View Form Dialog </admin/items/view_form_dialog>`
we set **Row lines** to 4 and the width of the "Photo" field to 120.  

.. image:: /intro/_images/image_view_form.png
	:align: center
	:alt: image_view_form.png

Now on the project page we will have:

.. image:: /intro/_images/image_edit.png
	:align: center
	:alt: image_edit.png
	
Capturing image from camera
===========================

You can capture the image from the camera. To do so check the **Capture from camera**
check box. In this case when the image is not set the video from camera will 
be displayed instead of the image placeholder. 

Double-click the video to capture the image. To clear an image, hold down the Ctrl 
key and double-click the image, after that the video will be displayed.


Adding file field
=================

Now we add a field that will store an appendix file to the "Contacts" journal.

.. image:: /intro/_images/file_field.png
	:align: center
	:alt: file_field.png

This field will be displayed in the editing form as follows:

.. image:: /intro/_images/appendix_edit.png
	:align: center
	:alt: appendix_edit.png
	
The field input have three buttons on the right - to upload, to download and to 
open a file. 	

Let's open the
:doc:`Field Editor Dialog </admin/items/field_editor_dialog>`
in Application Builder and uncheck the **Download btn** check box and set
**Accept** attribute to '.pdf'.

.. image:: /intro/_images/appendix_interface.png
	:align: center
	:alt: appendix_interface.png
	
Let's	refresh the project page, open the "Contacts" edit form and upload a file
by clicking the upload button:

.. image:: /intro/_images/appendix_select.png
	:align: center
	:alt: appendix_select.png

Now we can open a file in the browser by clicking on the open button.

.. image:: /intro/_images/appendix_field2.png
	:align: center
	:alt: appendix_field2.png

.. image:: /intro/_images/appendix_pdf_open.png
	:align: center
	:alt: appendix_pdf_open.png

.. note::

  Files and images are stored in the *static/files* folder on the server.
  
  You can limit the size of files that can be uploaded to the server by
  setting **Max content length** attribute in the 
  :doc:`project parameters </admin/project/parameters>`.