dropBox is not visible in the form - CakePHP-AjaxMultiUpload

Question

I am using the CakePHP-AjaxMultiUpload Plugin, and have following code inside edit.ctp but the drop box is not visible here.

<div class="useTypes form">

<?php echo $this->Form->create('UseType'); ?>

    <fieldset>
        <legend><?php echo __('Edit Use Type'); ?></legend>
    <?php
        echo $this->Form->input('id');
        echo $this->Form->input('name');
        echo $this->Form->input('description');
        echo $this->Upload->edit('UseType', $this->Form->fields['UseType.id']);
    ?>
    </fieldset>

<?php 
echo $this->Form->end(__('Submit')); ?>
</div>

but when I use the following code alone , it is visible

<?php echo $this->Upload->edit('UseType', $this->Form->fields['UseType.id']);?>

I tried this in cakephp 2.6 with default theme.

Answer 1

You are not supposed to wrap $this->Upload->edit() inside a <form> tag, as it already creates its own form.

You might also need to replace:

$this->Form->fields['UseType.id']

with:

$this->Form->value('UseType.id')

In summary, this should work:

<?php echo $this->Form->create('UseType'); ?>
    <fieldset>
        <legend><?php echo __('Edit Use Type'); ?></legend>
        <?php
            echo $this->Form->input('id');
            echo $this->Form->input('name');
            echo $this->Form->input('description');
        ?>
    </fieldset>
<?php echo $this->Form->end(__('Submit')); ?>

<?php echo $this->Upload->edit('UseType', $this->Form->value('UseType.id'));?>

Edit

If you need to upload files on your /use_types/add view, you can do the following.

In UseTypeController::add() include:

$this->set('id',CakeText::uuid()); //String::uuid() for CakePHP 2.6 or lower 

and in /app/View/UseTypes/add.ctp:

<?php echo $this->Form->input('id',array('type' => 'hidden', 'value' => $id)); ?>

The drawback is that if you fail to save your model after uploading files via AJAX, these will be left orphaned.