|
1
|
|
|
<?php |
|
2
|
|
|
|
|
3
|
|
|
declare(strict_types=1); |
|
4
|
|
|
|
|
5
|
|
|
namespace Del\Form\Renderer\Field; |
|
6
|
|
|
|
|
7
|
|
|
use Del\Form\Field\FieldInterface; |
|
8
|
|
|
use Del\Form\Field\FileUpload; |
|
9
|
|
|
use DOMElement; |
|
10
|
|
|
use DOMNode; |
|
11
|
|
|
use DOMText; |
|
12
|
|
|
use InvalidArgumentException; |
|
13
|
|
|
|
|
14
|
|
|
class FileUploadRender extends AbstractFieldRender |
|
15
|
|
|
{ |
|
16
|
2 |
|
public function renderBlock(FieldInterface $field, DOMElement $element): DOMNode |
|
17
|
|
|
{ |
|
18
|
|
|
// Make sure the FieldInterface is actually a Radio |
|
19
|
2 |
|
if (!$field instanceof FileUpload) { |
|
20
|
1 |
|
throw new InvalidArgumentException('Must be a Del\Form\Field\FileUpload'); |
|
21
|
|
|
} |
|
22
|
|
|
|
|
23
|
1 |
|
$div = $this->getDom()->createElement('div'); |
|
24
|
1 |
|
$script = $this->getDom()->createElement('script'); |
|
25
|
1 |
|
$style = $this->getDom()->createElement('style'); |
|
26
|
1 |
|
$style->setAttribute('type', 'text/css'); |
|
27
|
1 |
|
$style->appendChild(new DOMText($this->getStyle() ?? '')); |
|
28
|
1 |
|
$input = $this->getDom()->createElement('input'); |
|
29
|
1 |
|
$span = $this->getDom()->createElement('span'); |
|
30
|
1 |
|
$innerSpan = $this->getDom()->createElement('span'); |
|
31
|
1 |
|
$text = new DOMText($field->getLabel() ?? ''); |
|
32
|
|
|
|
|
33
|
1 |
|
$innerSpan->setAttribute('class', 'btn btn-primary btn-file'); |
|
34
|
1 |
|
$innerSpan->appendChild($text); |
|
35
|
1 |
|
$innerSpan->appendChild($element); |
|
36
|
|
|
|
|
37
|
1 |
|
$span->setAttribute('class', 'input-group-btn'); |
|
38
|
1 |
|
$span->appendChild($innerSpan); |
|
39
|
|
|
|
|
40
|
1 |
|
$input->setAttribute('type', 'text'); |
|
41
|
1 |
|
$input->setAttribute('class', 'form-control'); |
|
42
|
1 |
|
$input->setAttribute('readonly', 'readonly'); |
|
43
|
|
|
|
|
44
|
1 |
|
$script->setAttribute('type', 'text/javascript'); |
|
45
|
1 |
|
$code = new DOMText($this->getJavascript() ?? ''); |
|
46
|
1 |
|
$script->appendChild($code); |
|
47
|
|
|
|
|
48
|
1 |
|
$div->setAttribute('class', 'input-group'); |
|
49
|
1 |
|
$div->appendChild($span); |
|
50
|
1 |
|
$div->appendChild($input); |
|
51
|
1 |
|
$div->appendChild($style); |
|
52
|
1 |
|
$div->appendChild($script); |
|
53
|
|
|
|
|
54
|
1 |
|
return $div; |
|
55
|
|
|
} |
|
56
|
|
|
|
|
57
|
|
|
/** |
|
58
|
|
|
* @return string |
|
59
|
|
|
*/ |
|
60
|
|
|
private function getJavascript() |
|
61
|
|
|
{ |
|
62
|
|
|
return <<<END |
|
63
|
|
|
$(document).on('change', '.btn-file :file', function() { |
|
64
|
|
|
var input = $(this), |
|
65
|
|
|
numFiles = input.get(0).files ? input.get(0).files.length : 1, |
|
66
|
|
|
label = input.val().replace(/\\\\/g, '/').replace(/.*\//, ''); |
|
67
|
|
|
input.trigger('fileselect', [numFiles, label]); |
|
68
|
|
|
}); |
|
69
|
|
|
|
|
70
|
|
|
$(document).ready( function() { |
|
71
|
|
|
$('.btn-file :file').on('fileselect', function(event, numFiles, label) { |
|
72
|
|
|
|
|
73
|
|
|
var input = $(this).parents('.input-group').find(':text'), |
|
74
|
|
|
log = numFiles > 1 ? numFiles + ' files selected' : label; |
|
75
|
|
|
|
|
76
|
|
|
if( input.length ) { |
|
77
|
|
|
input.val(log); |
|
78
|
|
|
} else { |
|
79
|
|
|
if( log ) alert(log); |
|
80
|
|
|
} |
|
81
|
|
|
|
|
82
|
|
|
}); |
|
83
|
|
|
}); |
|
84
|
|
|
END; |
|
85
|
|
|
|
|
86
|
|
|
} |
|
87
|
|
|
|
|
88
|
|
|
private function getStyle() |
|
89
|
|
|
{ |
|
90
|
|
|
return <<<END |
|
91
|
|
|
.btn-file { |
|
92
|
|
|
position: relative; |
|
93
|
|
|
overflow: hidden; |
|
94
|
|
|
} |
|
95
|
|
|
.btn-file input[type=file] { |
|
96
|
|
|
position: absolute; |
|
97
|
|
|
top: 0; |
|
98
|
|
|
right: 0; |
|
99
|
|
|
min-width: 100%; |
|
100
|
|
|
min-height: 100%; |
|
101
|
|
|
font-size: 100px; |
|
102
|
|
|
text-align: right; |
|
103
|
|
|
filter: alpha(opacity=0); |
|
104
|
|
|
opacity: 0; |
|
105
|
|
|
outline: none; |
|
106
|
|
|
background: white; |
|
107
|
|
|
cursor: inherit; |
|
108
|
|
|
display: block; |
|
109
|
|
|
} |
|
110
|
|
|
input[readonly] { |
|
111
|
|
|
background-color: white !important; |
|
112
|
|
|
cursor: text !important; |
|
113
|
|
|
} |
|
114
|
|
|
END; |
|
115
|
|
|
|
|
116
|
|
|
} |
|
117
|
|
|
} |
|
118
|
|
|
|
delboy1978uk /
form
