Using forms for file uploads

The Change Picture form is a great example of how to implement file uploads in your Ext JS application. This form is also a complement to the contact form examined in the Loading form data from the server and Serving XML data to a form recipes.

Let's see how it's done.

How to do it...

1. 1. Create the component that will display the contact's picture:

   var picBox = {
   columnWidth: '100 px',
   bodyStyle: 'padding:10px',
   items: [
   { xtype: 'box',
   autoEl: { tag: 'div',
   html: '<img id="pic" src="' + Ext.BLANK_IMAGE_URL + '" class="img-contact" />'
   }
   }
   ]
   }
   

2. 2. Create a panel with text boxes that show the file names for the current picture and the picture to be uploaded:

   var picFiles = {
   columnWidth: .65,
   layout: 'form',
   labelAlign:'top',
   items: [{
   xtype: 'textfield',
   fieldLabel: 'Current',
   labelSeparator: '',
   name: 'currPic',
   id:'currPic',
   readOnly: true,
   disabled:true,
   anchor:'100%'
   },
   {
   xtype: 'textfield',
   fieldLabel: 'New (JPG or PNG only)',
   labelSeparator: '',
   name...