Upload widget does not work with javascript

[AngelDios]

Updating

I'm using the widget (trntv \ filekit \ widget \ Upload) in a dynamic form (wbraganca\dynamicform\DynamicFormWidget), I notice that the widget works only on the first element, when adding others it does not load, try using javascript but the following error appears. Please can you advise me how to solve this problem. Thank you.

JavaScript

$js =<<< JS
    $(".dynamicform_wrapper").on("afterInsert", function(e, item) {
        
        $(item).find("input[name*='[image]']").yiiUploadKit({
            "url": ["/file/storage/upload"],
            "maxFileSize":5000000,
        });
    });
JS;
$this->registerJs($js, \yii\web\View::POS_LOAD);

_form

`use wbraganca\dynamicform\DynamicFormWidget;
use trntv\filekit\widget\Upload;

<?php
    $form = ActiveForm::begin([
                'id' => 'dynamic-form',
                "enableAjaxValidation" => true,
            ]);
    ?>
    <div class="row">
        <div class="col-sm-6">
            <?=$form->field($model, 'title')->textInput(['maxlength' => true])->input('title', ['placeholder' => "Title Evaluation"]) ?>
            <div class="row">
                <div class="col-sm-6">
                    <?=
                    $form->field($model, 'date_start')->widget(DateTimePicker::className(), [
                        'options' => ['placeholder' => '-- Select Date --'],
                        'pluginOptions' => [
                            'language' => 'fr',
                            'autoclose' => true,
                            'calendarWeeks' => true,
                            'daysOfWeekDisabled' => [0, 5],
                            'todayHighlight' => true,
                            'todayBtn' => true,
                        ]
                    ]);
                    ?>
                </div>
                <div class="col-sm-6">
                    <?=
                    $form->field($model, 'date_end')->widget(DateTimePicker::className(), [
                        'options' => ['placeholder' => '-- Select Date --'],
                        'pluginOptions' => [
                            'language' => 'fr',
                            'autoclose' => true,
                        ]
                    ]);
                    ?>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <?=
                    $form->field($model, "type_evaluation_id")->dropDownList(
                            ArrayHelper::map(EvalTipo::find()->all(), 'id', 'description'), [
                        'prompt' => '-- Select Type --'
                    ]);
                    ?> 
                </div>
                <div class="col-sm-3">
                    <?=
                    $form->field($model, 'duration')->widget(TimePicker::className(), [
                        'pluginOptions' => [
                            'showSeconds' => true,
                            'showMeridian' => false,
                            'minuteStep' => 1,
                            'secondStep' => 5,
                        ]
                    ]);
                    ?>
                </div>
                <div class="col-sm-3">
                    <?=$form->field($model, 'qualification')->textInput(['placeholder' => 'Qualification']) ?>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <?=$form->field($model, 'description')->textarea(['rows' => 9, 'placeholder' => 'Enter evaluation description']) ?>
        </div>
    </div>
    <div class="content">
        <div class="box box-success box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">Questions Evaluation</h3>
            </div>
            <div class="panel-body">
                <?php
                DynamicFormWidget::begin([
                    'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
                    'widgetBody' => '.container-items', // required: css class selector
                    'widgetItem' => '.item', // required: css class
                    'limit' => 30, // the maximum times, an element can be cloned (default 999)
                    'min' => 1, // 0 or 1 (default 1)
                    'insertButton' => '.add-item', // css class
                    'deleteButton' => '.remove-item', // css class
                    'model' => $modelsQuestion[0],
                    'formId' => 'dynamic-form',
                    'formFields' => [
                        'item',
                        'puntuacion',
                    ],
                ]);
                ?>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Question</th>
                            <th style="width: 500px;">Options</th>
                            <th class="text-center" style="width: 90px;">
                                <button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="container-items">
                        <?php foreach( $modelsQuestion as $indexQuestion => $modelQuestion ): ?>
                            <tr class="item">
                                <td class="vcenter">
                                    <table class="table table-bordered table-striped">
                                        <td class="vcenter">1.</td>
                                        <td class="vcenter">
                                            <?php
                                            // necessary for update action.
                                            if( !$modelQuestion->isNewRecord ){
                                                echo Html::activeHiddenInput($modelQuestion, "[{$indexQuestion}]id");
                                            }
                                            ?>
                                            <?=
                                            $form->field($modelQuestion, "[{$indexQuestion}]question")->dropDownList(
                                                    ArrayHelper::map(QuestType::find()->all(), 'id', 'description'), [
                                                'prompt' => '-- Select Question --'
                                            ]);
                                            ?>
                                            <?=$form->field($modelQuestion, "[{$indexQuestion}]question")->label(false)->textInput(['maxlength' => true, 'placeholder' => 'Title question']) ?>                                           <?=
                                            $form->field($modelQuestion, "[{$indexQuestion}]score")->label(false)->widget(MaskedInput::className(), [
                                                'clientOptions' => [
                                                    'alias' => 'decimal',
                                                    'groupSeparator' => '.',
                                                    'digits' => 0,
                                                    'autoGroup' => true,
                                                    'removeMaskOnSubmit' => true,
                                                    'rightAlign' => false,
                                                ],
                                                'options' => [
                                                    'class' => 'form-control',
                                                    'maxlength' => true,
                                                ]
                                            ])
                                            ?><?=
                                            $form->field($modelQuestion, "[{$indexQuestion}]image")->label(false)->widget(Upload::className(), [
                                                'url' => [
                                                    '/file/storage/upload',
                                                ],
                                                'maxFileSize' => 
                                                    5000000,
                                            ])
                                            ?><?=$form->field($modelQuestion, "[{$indexQuestion}]justified ")->checkbox(array('label' => '', 'labelOptions' => array('style' => 'padding:5px;'),))->label('You want a response justified ?'); ?>
                                        </td>
                                    </table>
                                </td>
                                <td>
                                    <?=
                                    $this->render('_form-opc', [
                                        'form' => $form,
                                        'indexQuestion' => $indexQuestion,
                                        'modelsOpc' => $modelsOpc[$indexQuestion],
                                    ])
                                    ?>
                                </td>
                                <td class="text-center vcenter" style="width: 90px; verti">
                                    <button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                <?php DynamicFormWidget::end(); ?>
            </div>
        </div>
    </div>
    <div class="form-group">
        <?=Html::submitButton($model->isNewRecord ? '<span class="fa fa-plus"></span> Create' : '<span class="fa fa-edit"></span>  Update', ['class' => 'btn btn-primary']) ?>
    </div>
    <?php ActiveForm::end(); ?>`

The first without problems:

HTML generated:

Error: the second does not load and does not preview the image.

HTML generated:

Form complete generated in HTML --> HERE

I'm sorry for not responding before, I was somewhat busy with other things.

[rivieiraa]

Any output from developers console ?

[AngelDios]

nothing.

[rivieiraa]

Did you try to do the same dynamic initialization with .each() on every element that matches *=[image] ?
Maybe that would help

Like that:

    $(item).find("input[name*='[image]']").each(function(key, elem) {
         $(elem) .yiiUploadKit({
            "url": ["/file/storage/upload"],
            "maxFileSize":5000000,
        });
    });

[AngelDios]

yes, but the same error comes out

[XzAeRo]

Are you using the latest version? There was a similar bug fixed in one of the latest versions.

[AngelDios]

I 'm using the latest version, So far I continue with that error.

[XzAeRo]

Can you please show/paste the generated HTML in the generated view? Like copy paste the whole generated <form>...</form> code on the developers console. Maybe put it in pastebin if its too large for a comment on Github.

I'm guessing that there may be a id/naming issue while handling these "file inputs".

Also, are they running in the same <form>? Or are they called in separate blocks?

[AngelDios]

@XzAeRo they running in the same <form>, upgrade the problem.

[XzAeRo]

Sorry for pinging back so late on this issue.

So I've been testing a lot DynamicForm, and this is not a problem with our widget. This is a problem with the clone function that the DynamicForm uses to "copy" the elements. And your suggestion to use this code is in the right direction:

$(".dynamicform_wrapper").on("afterInsert", function(e, item) {
    $(item).find("input[name*='[image]']").yiiUploadKit({
        "url": ["/file/storage/upload"],
        "maxFileSize":5000000,
    });
});

I managed to make things work by doing something like this:

$(".dynamicform_wrapper").on("afterInsert", function(e, item) {
    $.each($(".my-input-field-css-class"), function (index, element) {
        $(this).yiiUploadKit({
            "url": ["/file/storage/upload"],
            "maxFileSize":5000000,
        });
    });
});

Now, this is out of the scope of our project, and more of an integration use case. But this should be useful for the future.