Add input file

Author: jcheron

Ajax/semantic/html/collections/form/traits/FieldTrait.php

@@ -9,6 +9,8 @@
 use Ajax\semantic\html\modules\checkbox\HtmlCheckbox;
 use Ajax\common\html\BaseHtml;
 use Ajax\semantic\html\elements\HtmlLabel;
+use Ajax\common\html\html5\HtmlInput as HtmlInput5;
+
 
 /**
  * @author jc
@@ -139,4 +141,13 @@ public function setJsContent($content){
 	public function getJsContent(){
 		return $this->setJsContent("");
 	}
+	
+	public function asFile($caption='', $direction=Direction::RIGHT, $icon='cloud upload alternate', $labeled=false){
+		$field=$this->getField();
+		$field->getDataField()->setProperty('readonly', 'readonly');
+		$file=new HtmlInput5($this->identifier.'-file','file');
+		$file->setProperty('style','display: none!important;');
+		$field->getField()->content['file']=$file;
+		$this->addAction($caption,$direction,$icon,$labeled);
+	}
 }

Ajax/semantic/html/elements/HtmlInput.php

@@ -8,14 +8,17 @@
 use Ajax\semantic\html\collections\form\traits\TextFieldsTrait;
 use Ajax\semantic\html\collections\form\traits\FieldTrait;
 use Ajax\JsUtils;
+use Ajax\common\html\html5\HtmlInput as HtmlInput5;
+use Ajax\service\Javascript;
 
 class HtmlInput extends HtmlSemDoubleElement {
 	use IconTrait,TextFieldsTrait,FieldTrait;
 
 	public function __construct($identifier, $type="text", $value="", $placeholder="") {
 		parent::__construct("div-" . $identifier, "div", "ui input");
 		$this->_identifier=$identifier;
-		$this->content=[ "field" => new \Ajax\common\html\html5\HtmlInput($identifier, $type, $value, $placeholder) ];
+		$this->_libraryId=$identifier;
+		$this->content=[ "field" => new HtmlInput5($identifier, $type, $value, $placeholder) ];
 		$this->_states=[ State::DISABLED,State::FOCUS,State::ERROR ];
 		$this->_variations=[ Variation::TRANSPARENT ];
 	}
@@ -44,4 +47,11 @@ public function run(JsUtils $js) {
 	public function setTransparent(){
 		return $this->addToProperty("class", "transparent");
 	}
+	
+	public function compile_once(\Ajax\JsUtils $js = NULL, &$view = NULL){
+		parent::compile_once($js,$view);
+		if(isset($this->content['file'])){
+			$this->onCreate(Javascript::fileUploadBehavior($this->identifier));
+		}
+	}
 }

Ajax/semantic/widgets/base/FieldAsTrait.php

@@ -197,6 +197,17 @@ public function fieldAsInput($index,$attributes=NULL){
 			return $this->_prepareFormFields($input, $name, $attributes);
 		}, $index,$attributes,"input");
 	}
+	
+	public function fieldAsFile($index,$attributes=NULL){
+		if(isset($this->_form)){
+			$this->_form->setProperty('enctype','multipart/form-data');
+		}
+		return $this->_fieldAs(function($id,$name,$value,$caption) use ($attributes){
+			$input= new HtmlFormInput($id,$caption);
+			$input->asFile();
+			return $this->_prepareFormFields($input, $name, $attributes);
+		}, $index,$attributes,"input");
+	}
 
 	public function fieldAsTextarea($index,$attributes=NULL){
 		return $this->_fieldAs(function($id,$name,$value,$caption) use ($attributes){

Ajax/service/Javascript.php

@@ -21,6 +21,11 @@ public static function containsCode($expression){
 	public static function isFunction($jsCode){
 		return JString::startswith($jsCode, "function");
 	}
+	
+	public static function fileUploadBehavior($id=''){
+		return "$('input:text, .ui.button', '#{$id}').on('click', function (e) {e.preventDefault();\$('input:file', '#{$id}').click();});
+				$('input:file', '#{$id}').on('change', function (e) {if(e.target.files.length){var name = e.target.files[0].name;$('input:text', $(e.target).parent()).val(name);}});";
+	}
 
 	/**
 	 * Puts HTML element in quotes for use in jQuery code