2

I'm having some trouble shaping the form layout the way I want it to look. The problem here isn't decorating the file element itself, the trouble comes with the function: $file->setMultiFile(3). I can't seem to put a separator between multiple file input elements causing them to be placed in a row behind eachother.

This is how I create the file Element:

$oElement = new Zend_Form_Element_File('file');
$oElement->setLabel('File')
    ->setMultiFile(3)
    ->setDestination('location on server');
$this->addElement($oElement);

Then later I add the decorators:

$this->getElement('file')->setDecorators(array(
    'File',
    'Errors',
     array(array('td' => 'HtmlTag'), array('tag' => 'td')),
     array('Label', array('tag' => 'td')),
     array(array('tr' => 'HtmlTag'), array('tag' => 'tr'))
));

The current output is:

<tr>
    <td id="file-label">
        <label class="optional" for="file">File</label>
    </td>
    <td>
        <input type="file" id="file-0" name="file[]">
        <input type="file" id="file-1" name="file[]">
        <input type="file" id="file-2" name="file[]">
    </td>
</tr>

What I want is to have a <br /> between the input elements so they're not placed on a single row. Is this possible through decorators? With the radio/mutliselect/multicheckbox there's a setSeparator function that'll do this, but this doesn't seem to be the case for the file element.

Could anybody help me out here? Thanks in advance,

Ilian

Ilians
  • 743
  • 7
  • 23

1 Answers1

2

This may be cheating a bit, but the following should work for you:

$fd = $oElement->getDecorator('File');

$fd->setOption('placement', 'PREPEND')
   ->setOption('separator', '<br />');

You can place that code after you append the element to the form and change the decorators.

Zend_Form_Decorator_File's render() method uses the separator when creating the markup, but they give you no way to set it. Setting of placement and separator are blacklisted, but using the above trick, you can set them anyway.

In Zend_Form_Decorator_File render():

$separator = $this->getSeparator();
$placement = $this->getPlacement();
//...

// in a loop, create the array of input elements
$markup[] = $view->formFile($name, $htmlAttribs);

//...
// join each file element by separator, which cannot be set with setSeparator()
$markup = implode($separator, $markup);

I had to set the placement to PREPEND, otherwise it did <br />*file input*<br />*file input*<br />*file input* when using APPEND.

Hope that helps.

drew010
  • 68,777
  • 11
  • 134
  • 162
  • Thanks for the reply. It works great except for one thing, the max filesize. When using `$fileElement->addValidator('Size', false, 102400);` It adds an hidden input at the top of the fields. Usually this is not a problem but with the separator it adds a `
    ` after the hidden field too causing the file field to be placed wrong. Is there a way around this?
    – Ilians Nov 24 '11 at 07:58
  • Just took a look at the `Zend_Form_Decorator_File` class and found out it's set in the render function. Don't think I can change the way which the hidden field(s) are added. Guess I'll have to go with a ViewHelper. – Ilians Nov 24 '11 at 08:16
  • if you add css like `input[type="hidden"] { margin: 0; padding: 0 }` it may help fix the placement. – drew010 Nov 24 '11 at 17:43
  • It doesn't matter if the element is visible or not, it's about the hidden element being there. Since it's there it gets separated from the other elements meaning there's a `
    ` placed between them. Since the hidden element doesn't show it just shows the `
    ` above the first file field. Therefore it's out of place.
    – Ilians Nov 25 '11 at 07:21
  • 1
    Sorry I misunderstood before. I checked in the Zend files, and there is no way to prevent the `
    ` from appearing after the hidden form element. If you set a maximum size, a hidden form element is added which uses the separator; the same is true if APC or the upload progress extension is loaded and a progress callback is registered to either plugin. The only workaround I see is to not set a maximum size on the file element and either manually add it to the form yourself using the `formHidden` helper, or set no file size limit on upload and validate that yourself as well. Hope it helps.
    – drew010 Nov 26 '11 at 01:56