Как передать исходные данные предварительного просмотра в загрузочный файл

Question

У меня есть страница, которая позволяет пользователям редактировать список свойств, которые они ранее отправили. Я использовал bootstrap-fileinput, чтобы позволить пользователям добавлять изображения, и он будет использовать атрибут initialPreview, чтобы показать изображения, которые они уже загрузили. Пользователи могут удалить изображения initialPreview, чтобы удалить изображения из рабочей зоны, но я не могу найти способ передать эту информацию на сервер, чтобы пользователь удалил эти изображения initialPreview.

Я пробовал uploadExtraData: function() {} Но я не могу получить никакой информации об изображениях initialPreview. Также я использую PHP-фреймворк Laravel 5.7 для своего сайта.

<div class="form-group">
    <label for="additional_info" class="col-lg-12 control-label">Add Photos to Attract Lender Interest</label>
    <div class="col-lg-12">
        <input type="file" name="image[]" id="image" multiple class="image" data-overwrite-initial="false"
               data-min-file-count="0" value="{{ $mortgage->close_date}}">
    </div>
</div>
{{-- Scripts for the pretty file input plugin called bootstrap-fileinput --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.4.7/js/fileinput.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/4.5.2/themes/fas/theme.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $("#image").fileinput({
        overwriteInitial: false,
        initialPreview: [
            // IMAGE DATA
            "http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_1.JPG",
            // IMAGE DATA
            "http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_2.JPG",
        ],
        initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
        initialPreviewFileType: 'image', // image is the default and can be overridden in config below
        initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
        showUpload: false,
        theme: 'fas',
        uploadUrl: "/submit-mortgage",
        uploadExtraData: function () {
            return {
                _token: $("input[name='_token']").val(),
            };
        },
        allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],
        overwriteInitial: true,
        showCaption: false,
        showRemove: true,
        maxFileSize: 5000,
        maxFilesNum: 8,
        fileActionSettings: {
            showRemove: true,
            showUpload: false,
            showZoom: true,
            showDrag: false,
        },
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
</script>

Прямо сейчас он просто удаляет все старые изображения после отправки и сохраняет все новые загруженные. Я хотел бы отслеживать, какие изображения initialPreview не были удалены и какие новые изображения были загружены.

Answer 1

Я знаю, что это старый вопрос, но для тех, кто наткнулся на него, есть решение:

Когда пользователь нажимает кнопку удаления на initialPreview фрейм, вы можете передать информацию с него на сервер, добавив дополнительную опцию в fileinput который будет вызывать Ajax каждый раз при нажатии кнопки удаления.

Используя вопрос выше, вам нужно будет добавить:

initialPreviewConfig: [
   {
  // This is passed to the server in the request body as key: 0
     key: 0, 

  // This is the url that you would send a POST request to that will handle the call.
     url: 'http://www.example.com/image/remove', 

  // Any extra data that you would like to add to the POST request
     extra: {
         key: value
     }
   }
]

Вам нужно будет создать объект для каждого элемента в вашем initialPreview массив.

ОП .fileinput станет:

$("#image").fileinput({
        overwriteInitial: false,
        initialPreview: [
            // IMAGE DATA
            "http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_1.JPG",
            // IMAGE DATA
            "http://digitalbroker.test/storage/properties/847%20Queen%20Street%20West,%20Toronto,%20ON,%20Canada_2.JPG",
        ],
        initialPreviewConfig: [
            {
               key: 0,
               url: '/image/remove', //custom URL
               extra: {
                   image: '847 Queen Street West, Toronto, ON, Canada_1.JPG
               }
             },
            {
               key: 1,
               url: '/image/remove', //custom URL
               extra: {
                   image: 847 Queen Street West, Toronto, ON, Canada_2.JPG
               }
             },
        ],
        initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
        initialPreviewFileType: 'image', // image is the default and can be overridden in config below
        initialPreviewDownloadUrl: 'http://kartik-v.github.io/bootstrap-fileinput-samples/samples/{filename}', // includes the dynamic `filename` tag to be replaced for each config
        showUpload: false,
        theme: 'fas',
        uploadUrl: "/submit-mortgage",
        uploadExtraData: function () {
            return {
                _token: $("input[name='_token']").val(),
            };
        },
        allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],
        overwriteInitial: true,
        showCaption: false,
        showRemove: true,
        maxFileSize: 5000,
        maxFilesNum: 8,
        fileActionSettings: {
            showRemove: true,
            showUpload: false,
            showZoom: true,
            showDrag: false,
        },
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });

Надеюсь, это поможет любому, кто с этим столкнется.

К вашему сведению, это мой первый ответ на SO (пожалуйста, будьте добры:P)