This is the first real problem that I encountered using Yii, trying to make a Model input repeatable in the form, validate and save them.

First of all you have to know that Yii don't support this scenario by default so we have to change manually our code :)

Let's view an example. We have two tables: Event and PhotoEvent. When we want to create an Event we want to add some photos to it. This is the database tables example:

How can we add N photos input field in the form dynamically?

First of all you have to create your IMG_DIR_PATH directory where to save the images and give it the rights to write inside.

Second, if you need to use the images, resize them, play with them you have to remember to add this to the config/main.php

'image'=>array(
    'class'=>'application.extensions.image.CImageComponent',
    // GD or ImageMagick
    'driver'=>'GD',
    // ImageMagick setup path
    'params'=>array('directory'=>'/opt/local/bin'),
)

This is how is made the html page to collect the inputs:

[html]
<h2>New Event</h2>
<div class="actionBar">
    [<?php echo CHtml::link('Event List',array('list')); ?>]
    [<?php echo CHtml::link('Manage Event',array('admin')); ?>]
</div>
<div class="yiiForm">
    <p>
    Fields with <span class="required">*</span> are required.
    </p>
    <?php echo CHtml::form('','post',array('enctype'=>'multipart/form-data')); ?>

    <?php echo CHtml::errorSummary(array_merge( array($event), $photosEvent)); ?>

    <div class="simple">
        <?php echo CHtml::activeLabelEx($event,'name'); ?>
        <?php echo CHtml::activeTextField($event,'name'); ?>
    </div>
    <div class="simple">
        <?php echo CHtml::activeLabelEx($event,'description'); ?>
        <?php echo CHtml::activeTextField($event,'description'); ?>
    </div>
    <div class="simple">
        <?php echo CHtml::activeLabelEx($event,'expireDate'); ?>
        <?php echo CHtml::activeTextField($event,'expireDate'); ?>
    </div>

    <?php echo CHtml::button('add Photos', array('name'=>'addPhotos', 'id'=>'addPhotos')); ?>

    <?php foreach($photosEvent as $i => $photo): ?>
    <div id="photo-<?php echo $i ?>">
        <div class="simple">   
            <?php echo CHtml::activeLabelEx($photo,'photoUrl'); ?>
            <?php echo CHtml::activeFileField($photo, "photoUrl[$i]"); ?>
        </div>
        <br />
    </div>
    <?php endforeach; ?>

    <div class="row action">
        <?php echo CHtml::submitButton($update ? 'Save' : 'Create', array('name'=>'submitDatas')); ?>
    </div>
</form>
</div>

<script type="text/javascript">
// I need to know how many photos I've already added when the validate return FALSE
var photosAdded = <?php echo $photosNumber; ?>;

// Add the event to the period's add button
$('#addPhotos').click(function () {
    // I'm going to clone the first div containing the Model input couse I don't want to create a new div and add every single structure
    var divCloned = $('#photo-0').clone();      
    // I'm attaching the div to the last input created
    $('#photo-'+(photosAdded++)).after(divCloned);
    // Changin the div id
    divCloned.attr('id', 'photo-'+photosAdded);
    // Initializing the div contents
    initNewInputs(divCloned.children('.simple'), photosAdded);
});

function initNewInputs( divs, idNumber ) {
    // Taking the div labels and resetting them. If you send wrong information,
    // Yii will show the errors. If you than clone that div, the css will be cloned too, so we have to reset it
    var labels = divs.children('label').get();
    for ( var i in labels )
        labels[i].setAttribute('class', 'required');      

    // Taking all inputs and resetting them.
    // We have to set value to null, set the class attribute to null and change their id and name with the right id.
    var inputs = divs.children('input').get();      

    for ( var i in inputs  ) {
        inputs[i].value = "";
        inputs[i].setAttribute('class', '');
        inputs[i].id = inputs[i].id.replace(/\d+/, idNumber);
        inputs[i].name = inputs[i].name.replace(/\d+/, idNumber);
    }
}
</script>

And this is how is made the actionCreat to handle the datas and to manage it.

public function actionCreate()
{
    // Adding jQuery to the view page.
    Yii::app()->getClientScript()->registerCoreScript('jquery');

    $event = new Event;

    // Adding an empty PhotoEvent to the form
    $photosEvent = array( new PhotoEvent, );

    // If everything is setted I will check and process the inputs
    if( isset( $_POST['submitDatas'] ) && isset( $_POST['PhotoEvent'], $_POST['Event'] ) )
    {
        $event->attributes = $_POST['Event'];
        // DB date layout
        $event->expireDate = date_format(date_create($event->expireDate), 'Y-m-d');   
        $valid = $event->validate();

        // This is the crappy part of the script that I need to improve and make it more elegance
        // I've to add to the photoEvent array a new PhotoEvent for every istance in $_POST['PhotoEvent']
        foreach ( $_POST['PhotoEvent'] as $i => $photo ) {
            $photosEvent[$i] = new PhotoEvent;   
            if ( isset( $_POST['PhotoEvent'][$i] ) )
                $photosEvent[$i]->photoUrl = CUploadedFile::getInstance($photosEvent[$i], "photoUrl[$i]" );
            //$photosEvent[$i]->photoUrl = CUploadedFile::getIstance($photosEvent[$i], "photoUrl[$i]" );
            $valid = $valid && $photosEvent[$i]->validate();               
        }

        if( $valid && $event->save(false) ) {
            // You will need this if you want to resize and play around images :)
            //Yii::import('application.extensions.image.Image');

            // Saving each period ( i've to change the date format couse in Italy we use dd/mm/yyyy
            foreach ( $photosEvent as $i => $photo ) {
                $photo->eventId = $event->id;
                // Taking and saving the image in the filesystem in the IMG_DIR_PATH/ directory path.
                // In this case IMG_DIR_PATH is in the root of the 
                // site and you need to give it rights to write the image :)
                $photo->photoUrl->saveAs('IMG_DIR_PATH/'.$photo->photoUrl->getName());
                /* If you need to resize the image use this path of code
                   $image = new Image('IMG_DIR_PATH/'.$photo->photoUrl->getName());
                   $image->resize(200, 200);
                   $image->save();
                 */
                $photo->save(false);
            }
            $this->redirect(array('show','id'=>$event->id));
        }
    }
    $this->render('create', array(
        'event' => $event,
        'photosEvent' => $photosEvent,
        'photosNumber' => isset($_POST['PhotoEvent']) ? count($_POST['PhotoEvent'])-1 : 0, //How many PhotoEvent the user added
        'update' => false,
    ));
}

I wish you will enjoy my guide :) Please gimme some feedback to improve it :)

See ya! Emanuele "StErMi" Ricci.