File

(Deprecated) Presents a file upload item.

• className - (string) the user-defined css class for item
• disabled - (boolean) disables/enables the item
• hidden - (boolean) hides/shows the item. The default value - false (the item is shown)
• info - (boolean) adds the icon after the input label (related event - onInfo)
• inputLeft - (integer) sets the left absolute offset of input.Just position:“absolute” makes sense of the attribute
• inputTop - (integer) sets the top absolute offset of input. Just position:“absolute” makes sense of the attribute
• label - (string) the text label of item
• labelAlign - (left, right or center) the alignment of label within the defined width
• labelHeight - (integer or auto) the height of label. The default value is auto
• labelLeft - (integer) sets the left absolute offset of label. Just position:“absolute” makes sense of the attribute
• labelTop - (integer) sets the top absolute offset of label. Just position:“absolute” makes sense of the attribute
• labelWidth - (integer or auto) the width of label. The default value is auto
• name - (string) the identification name. Used for referring to item
• note - (object) creates the details block which is placed under the input
  • text - (string) the text of the block
  • width - (integer) the width of the block
• offsetLeft - (integer) sets the left relative offset of item (both input and label)
• offsetTop - (integer) sets the top relative offset of item (both input and label)
• position - (label-left, label-right, label-top or absolute) defines the position of label relative to input
• required - (boolean) adds the icon after the label marking the input as mandatory. Also, setting the attribute to true automatically assignes the 'NotEmpty' validation rule to the input
• tooltip - (string) creates the tooltip for the input label
• userdata - (object) sets some user data for the input (key:value pairs)

var formData = [
	{type: "file", name: "caret", label: "Preview", position:"label-top"},
	{type: "file", name: "caret", label: "Full-size image", position:"label-top"}
];

1. Create a real html form (this form should be “around” dhtmlxForm):
   
   

   <form id="realForm" method="POST" enctype="multipart/form-data">
   	<div id="dhxForm">
    
   	</div>
   </form>

2. Put the dhtmlxForm instance inside the real form, attach a callback to a dhtmlxForm button (or the 'submit' button of the real form) and submit the real form manually:
   
   

   var formData = [
   	{type: "file", name: "my_file", ...},
   	{type: "button", name: "upload", value: "Upload"}
   ];
    
   var myForm = new dhtmlXForm("dhxForm", formData);
   myForm.attachEvent("onButtonClick", function(id){
   	if (id == "upload") {
   		document.getElementById("realForm").submit();
   	}
   });
    
   function myCallBack(state, fileName, fileSize) {
   	// see below what is this needed for
   }

3. Upload files without page reloading:
   
   
   • Create a hidden iframe on your page like the one shown below:
     
     

     <iframe name="upload_area" frameBorder="0" height="0"></iframe>

   • Set the 'target' attribute of your real form to the name of the iframe, i.e. 'upload_area'. In this case, the form will be submitted into the iframe and the page won't be reloaded. The myCallBack() function can be called as in:
     
     

     <?php
     // move_uploaded_file() and other code here
     // print result
     print_r("<SCRIPT>parent.myCallBack(true, 'filename.rar', '234123')</SCRIPT>");
     ?>