From dc28ec59a51126275fb702686222fcae808e27fc Mon Sep 17 00:00:00 2001 From: Florian Binder Date: Mon, 9 May 2016 12:06:04 +0200 Subject: [PATCH 1/3] add file upload field Added a nice looking form upload field --- README.md | 65 +++++++++++++++++++ .../Twitter/Bootstrap3/Form/Element/File.php | 25 +++++++ .../Bootstrap3/View/Helper/FormFile.php | 52 +++++++++++++++ library/Twitter/Bootstrap3/patch.css | 21 ++++++ 4 files changed, 163 insertions(+) create mode 100644 library/Twitter/Bootstrap3/Form/Element/File.php create mode 100644 library/Twitter/Bootstrap3/View/Helper/FormFile.php diff --git a/README.md b/README.md index 47498f4..a1719b4 100644 --- a/README.md +++ b/README.md @@ -424,5 +424,70 @@ $this->addElement('static', 'static', array( )); ``` +### File + +Include support for file upload fields. Make shure to add the file "patch.css" to your html for correct styling! + +```html +
+ + +
+
+ + + Btn Text + + + +
+

Help-Text

+
+``` + +```php +$this->addElement('file', 'ID', array( + 'label' => 'Label Text', + 'description' => 'Help-Text', + 'required' => true, + 'btnText' => 'Btn Text' +)); + +// Optional settings +$uploadField = $this->getElement('ID'); +$uploadField->setDestination('path/to/uploads-dir'); +$uploadField->addValidator('Count', false, 1); // just one file +$uploadField->addValidator('Size', false, 1048576); // 1MB upload limit +$uploadField->addValidator('Extension', false, 'jpg,png,gif'); // jpg, png and gif +``` + +Add this little jQuery snippet for better handling (http://codepen.io/claviska/pen/vAgmd) + +```js +$(document).ready(function() { + // Custom bootstrap file upload + $(document).on('change', '.btn-file :file', function() { + var input = $(this); + var numFiles = input.get(0).files ? input.get(0).files.length : 1; + var label = input.val().replace(/\\/g, '/').replace(/.*\//, ''); + input.trigger('fileselect', [numFiles, label]); + }); + + $('.btn-file :file').on('fileselect', function(event, numFiles, label) { + var input = $(this).parents('.input-group').find(':text'); + var log = numFiles > 1 ? numFiles + ' files selected' : label; + + if (input.length) { + input.val(log); + } else { + if (log) { + console.log(log); + } + } + + }); +}); +``` + ### Other decorated elements The library also contains elements for decorators: `file`, `hidden`, `hash` and `captcha`. \ No newline at end of file diff --git a/library/Twitter/Bootstrap3/Form/Element/File.php b/library/Twitter/Bootstrap3/Form/Element/File.php new file mode 100644 index 0000000..2bc73f8 --- /dev/null +++ b/library/Twitter/Bootstrap3/Form/Element/File.php @@ -0,0 +1,25 @@ + + */ + +/** + * Email form element + * + * @category Forms + * @package Twitter_Bootstrap3_Form + * @subpackage Element + */ +class Twitter_Bootstrap3_Form_Element_File extends Zend_Form_Element_File +{ + /** + * Default form view helper to use for rendering + * @var string + */ + public $helper = 'formFile'; +} diff --git a/library/Twitter/Bootstrap3/View/Helper/FormFile.php b/library/Twitter/Bootstrap3/View/Helper/FormFile.php new file mode 100644 index 0000000..092b033 --- /dev/null +++ b/library/Twitter/Bootstrap3/View/Helper/FormFile.php @@ -0,0 +1,52 @@ + + */ + +/** + * Helper to generate a "text" element + * + * @category Forms + * @package Twitter_Bootstrap3_View + * @subpackage Helper + */ +class Twitter_Bootstrap3_View_Helper_FormFile extends Zend_View_Helper_FormFile +{ + + public function formFile($name, $attribs = null) { + $info = $this->_getInfo($name, null, $attribs); + extract($info); // name, id, value, attribs, options, listsep, disable + + // is it disabled? + $disabled = ''; + if ($disable) { + $disabled = ' disabled="disabled"'; + } + + $buttonText = (isset($attribs['btnText']) && !empty($attribs['btnText'])) ? $attribs['btnText'] : 'Upload file'; + + // build the element + $xhtml = '
' + . '
' + . '' + . '' + . $buttonText + . '_htmlAttribs($attribs) + . $this->getClosingBracket() + . '' + . '' + . '' + . '
'; + + return $xhtml; + } +} diff --git a/library/Twitter/Bootstrap3/patch.css b/library/Twitter/Bootstrap3/patch.css index 65d216e..5f92375 100644 --- a/library/Twitter/Bootstrap3/patch.css +++ b/library/Twitter/Bootstrap3/patch.css @@ -17,3 +17,24 @@ input[type=range]:after { padding-left: 0.5em; content: attr(data-value); } + +/** file upload button **/ +.btn-file { + position: relative; + overflow: hidden; +} +.btn-file input[type=file] { + position: absolute; + top: 0px; + right: 0px; + min-width: 100%; + min-height: 100%; + font-size: 100px; + text-align: right; + filter: alpha(opacity=0); + opacity: 0; + outline: none; + background: white; + cursor: inherit; + display: block; +} \ No newline at end of file From 248c808136d002830214fddb24222fa810bfd1db Mon Sep 17 00:00:00 2001 From: Florian Binder Date: Mon, 9 May 2016 15:43:51 +0200 Subject: [PATCH 2/3] Update composer.json --- composer.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/composer.json b/composer.json index ce301d7..02e204c 100644 --- a/composer.json +++ b/composer.json @@ -1,5 +1,5 @@ { - "name": "zfbase/zend1-bootstrap3", + "name": "sideshow-systems/zend1-bootstrap3", "description": "Twitter Bootstrap v.3 Forms for Zend Framework v.1", "require": { "php": ">=5.3.0", From ca61c57b66183cfb54e92d62fcf6d15c422b85cc Mon Sep 17 00:00:00 2001 From: Florian Binder Date: Mon, 16 Dec 2019 14:10:31 +0100 Subject: [PATCH 3/3] removed zend dependency --- composer.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/composer.json b/composer.json index 02e204c..20e2c85 100644 --- a/composer.json +++ b/composer.json @@ -1,10 +1,6 @@ { "name": "sideshow-systems/zend1-bootstrap3", "description": "Twitter Bootstrap v.3 Forms for Zend Framework v.1", - "require": { - "php": ">=5.3.0", - "zendframework/zendframework1": "~1" - }, "autoload": { "psr-0": { "Twitter_Bootstrap3_": "library/" } },