如果违反约束条件，以表格形式删除文件

Question

我已按照该教程来管理多个文件http://growingcookies.com/easy-multiple-file-upload-in-symfony-using-the-collectiontype-field/

的上传

用于上传多个文件的系统运行良好。

我添加了一个约束，以仅允许某些类型的文件并设置最大大小。

启用此约束后，上载的文件仍然存在于表单中，但实际上已被删除。

实际上它们不再存在时，javascript代码始终将文件显示为存在：

删除文件的按钮仍然存在.. 您是否知道在显示错误消息时发生约束冲突时如何完全删除表单文件？还是在Symfony 4中您有更好的方式上传带有约束的多个文件？

我的树枝：

{% extends '@Ticketing/base.html.twig' %}

{% block title %}{{ 'New Ticket'|trans({}, 'TicketingBundle') }}{% endblock %}
{% block header %}<h1>{{ 'New Ticket'|trans({}, 'TicketingBundle') }}</h1>{% endblock %}

{% block form_group_class -%}
    col-sm-8
{%- endblock form_group_class %}


{% block main %}

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    {% form_theme form 'bootstrap_4_layout.html.twig' _self %}

    <div class="box box-danger">
        <div class="box-header with-border">
            <h3 class="box-title">{{ 'Create a new ticket'|trans({}, 'TicketingBundle') }}</h3>
        </div>

        {% form_theme form 'bootstrap_3_horizontal_layout.html.twig' _self %}

        {{ form_start(form, {'attr': {'class': 'form-horizontal'} }) }}
        <div class="box-body">

            <div class="hr-line-dashed"></div>

            <div id="filesProto" data-prototype="{{ form_widget(form.documents.vars.prototype)|e }}"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="ticket_form_documents">Pièce-jointe</label>
                <div class="col-sm-8" id="filesBox">
                    {% set pos = 0 %}
                    {% for doc in form.documents %}
                        <div class="row">
                            <div class="col col-xs-1" id="jsRemove{{ pos }}" style="">
                                <button type="button" class="btn btn-danger" onclick="removeFile($(this));"><i class="fa fa-times" aria-hidden="true"></i></button>
                            </div>
                            <div class="col col-xs-11" id="jsPreview{{ pos }}">{{ doc.vars.value.name }}</div>

                            <div style="display:none">
                                {{ form_widget(doc) }}
                            </div>
                        </div>

                        {% set pos = pos + 1 %}
                    {% endfor %}
                </div>
            </div>

        </div>
        <!-- /.box-body -->

        <div class="box-footer">
            <div class="col-md-offset-2 col-sm-8">

                <button id="dropbutton" class="btn bg-ticketing btn-flat form-control" type="submit">
                    {{ 'Submit the ticket'|trans({}, 'TicketingBundle') }}
                </button>


            </div>
        </div>
        <!-- /.box-footer -->
        {{ form_end(form) }}
    </div>

    <script>
        var fileCount = '{{ form.documents|length }}';
        var removeButton = "<button type='button' class='btn btn-danger btn-xs' onclick='removeFile($(this));'><i class='fa fa-times' aria-hidden='true'></i></button>";
        function removeFile(ob)
        {
            ob.parent().parent().remove();
        }
        function createAddFile(fileCount)
        {
            // grab the prototype template
            var newWidget = $("#filesProto").attr('data-prototype');
            // replace the "__name__" used in the id and name of the prototype
            newWidget = newWidget.replace(/__name__/g, fileCount);
            newWidget = "<div style='display:none'>" + newWidget + "</div>";
            hideStuff = "";
            hideStuff += "<div class='col col-xs-1' id='jsRemove" + fileCount + "' style='display: none;'>";
            hideStuff += removeButton;
            hideStuff += "</div>";
            hideStuff += "<div class='col col-xs-11' id='jsPreview" + fileCount + "'>";
            hideStuff += "</div>";
            hideStuff += "<div class='col-sm-8'>";
            hideStuff += "<button type='button' id='jsBtnUpload" + fileCount + "' class='btn btn-default'>";
            hideStuff += "<i class='fa fa-plus'></i> {{ 'Pièce-jointe' | trans }}";
            hideStuff += "</button>";
            hideStuff += "</div>";
            $("#filesBox").append("<div class='form-group'>" + hideStuff + newWidget + "</div>");
            // On click => Simulate file behaviour
            $("#jsBtnUpload" + fileCount).on('click', function(e){
                $('#ticket_form_documents_' + fileCount + '_file').trigger('click');
            });
            // Once the file is added
            $('#ticket_form_documents_' + fileCount + '_file').on('change', function() {
                // Show its name
                fileName = $(this).prop('files')[0].name;
                $("#jsPreview" + fileCount).append(fileName);
                // Hide the add file button
                $("#jsBtnUpload" + fileCount).hide();
                // Show the remove file button
                $("#jsRemove" + fileCount).show();
                // Create another instance of add file button and company
                createAddFile(parseInt(fileCount)+1);
            });
        }
        $(document).ready(function(){
            createAddFile(fileCount);
            fileCount++;
        });
    </script>

{% endblock %}

代码可在此处获得：https://github.com/oanalivia/Multiple-File-Upload-in-Symfony-using-the-CollectionType-Field

Answer 1

一种banale解决方案是调整输出并仅过滤掉没有价值的文档。

                {% for doc in form.documents %}
                    {% if doc.vars.value %} {### <-- new 1/2 ###}
                    <div class="row">
                        <div class="col col-xs-1" id="jsRemove{{ pos }}" style="">
                            <button type="button" class="btn btn-danger" onclick="removeFile($(this));"><i class="fa fa-times" aria-hidden="true"></i></button>
                        </div>
                        <div class="col col-xs-11" id="jsPreview{{ pos }}">{{ doc.vars.value.name }}</div>

                        <div style="display:none">
                            {{ form_widget(doc) }}
                        </div>
                    </div>

                    {% set pos = pos + 1 %}
                    {% endif %}  {### <-- new 2/2 ###}
                {% endfor %}

如果您使用的是较新版本的树枝（我相信> = 2.10），则也只能修改该部分的第一行：

{% for doc in form.documents|filter(doc => doc.vars.value) %}