<?php 
/** 
 * User: delboy1978uk 
 * Date: 04/12/2016 
 * Time: 22:33 
 */ 
 
namespace Del\Form\Renderer\Field; 
 
use Del\Form\Field\FieldInterface; 
use Del\Form\Field\FileUpload; 
use DOMElement; 
use DOMNode; 
use DOMText; 
use InvalidArgumentException; 
 
class FileUploadRender extends AbstractFieldRender implements FieldRendererInterface 
{ 
 
    /** 
     * @param FieldInterface $field 
     * @param DOMElement $element 
     * @return DOMNode 
     */ 
    public function renderBlock(FieldInterface $field, DOMElement $element) 
    { 
        // Make sure the FieldInterface is actually a Radio 
        if (!$field instanceof FileUpload) { 
            throw new InvalidArgumentException('Must be a Del\Form\Field\FileUpload'); 
        } 
 
        $div = $this->getDom()->createElement('div'); 
        $script = $this->getDom()->createElement('script'); 
        $style = $this->getDom()->createElement('style'); 
        $style->setAttribute('type', 'text/css'); 
        $style->appendChild(new DOMText($this->getStyle())); 
        $input = $this->getDom()->createElement('input'); 
        $span = $this->getDom()->createElement('span'); 
        $innerSpan = $this->getDom()->createElement('span'); 
        $text = new DOMText($field->getLabel()); 
 
        $innerSpan->setAttribute('class', 'btn btn-primary btn-file'); 
        $innerSpan->appendChild($text); 
        $innerSpan->appendChild($element); 
 
        $span->setAttribute('class', 'input-group-btn'); 
        $span->appendChild($innerSpan); 
 
        $input->setAttribute('type', 'text'); 
        $input->setAttribute('class', 'form-control'); 
        $input->setAttribute('readonly', 'readonly'); 
 
        $script->setAttribute('type', 'text/javascript'); 
        $code = new DOMText($this->getJavascript()); 
        $script->appendChild($code); 
 
        $div->setAttribute('class', 'input-group'); 
        $div->appendChild($span); 
        $div->appendChild($input); 
        $div->appendChild($style); 
        $div->appendChild($script); 
 
        return $div; 
    } 
 
    /** 
     * @return string 
     */ 
    private function getJavascript() 
    { 
        return <<<END 
    $(document).on('change', '.btn-file :file', function() { 
        var input = $(this), 
            numFiles = input.get(0).files ? input.get(0).files.length : 1, 
            label = input.val().replace(/\\\\/g, '/').replace(/.*\//, ''); 
        input.trigger('fileselect', [numFiles, label]); 
    }); 
 
    $(document).ready( function() { 
        $('.btn-file :file').on('fileselect', function(event, numFiles, label) { 
 
            var input = $(this).parents('.input-group').find(':text'), 
                log = numFiles > 1 ? numFiles + ' files selected' : label; 
 
            if( input.length ) { 
                input.val(log); 
            } else { 
                if( log ) alert(log); 
            } 
 
        }); 
    }); 
END; 
 
    } 
 
    private function getStyle() 
    { 
        return <<<END 
    .btn-file { 
        position: relative; 
        overflow: hidden; 
    } 
    .btn-file input[type=file] { 
        position: absolute; 
        top: 0; 
        right: 0; 
        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; 
    } 
    input[readonly] { 
        background-color: white !important; 
        cursor: text !important; 
    } 
END; 
 
    } 
}
 
 |