Krajee Bootstrap Fileinput и MVC Razor - превью изображений после публикации формы

Question

Я использую Krajee FileInput для загрузки изображений с помощью бритвенного веб-приложения MVC. Это работает хорошо, но я теряю предпросмотр изображений после публикации формы, если я хочу вернуться к представлению, если проверка формы не удалась. Вернувшись к представлению, я могу заполнить все остальные элементы формы из контроллера и ViewModel, но не могу получить предварительный просмотр загруженного изображения, чтобы вернуться после публикации формы. Я не вижу ничего в документации по этому поводу.

Этот пост дал мне некоторую информацию, но я не смог заставить ее работать из этого.

Это моя конфигурация:

 <script src="~/Scripts/fileinput.min.js"></script>
 <script>
    @{
        var preview = new System.Text.StringBuilder();
        var previewDelete = new System.Text.StringBuilder();

        foreach (var picture in Model.Pictures)
        {
            preview.AppendFormat(@"'<img src=""{0}"" class=""file-preview-image"">',", picture.Url);
            previewDelete.AppendFormat(@"{{url: '{0}',key: {1} }},", Url.Action("ListingPhotoDelete", "Listing", new { id = picture.ID }), picture.ID);
        }
    }


    var $input = $("#files");

    $input.fileinput({
        uploadAsync: false,
        showCaption: false,
        showRemove: false,
        showUpload: false,
        maxFileCount: 5,
        overwriteInitial: false,
        initialPreview: [
                @Html.Raw(preview.ToString())
        ],
        initialPreviewConfig: [
            @Html.Raw(previewDelete.ToString())
        ],
        maxFileSize: 10000,
        browseClass: "btn btn-primary",
        allowedFileTypes: ["image"],
        language: '@Context.GetPrincipalAppLanguageForRequest().ToString()'
    });

В контроллере, если проверка формы не удалась, я пытаюсь сохранить файлы во временной папке на сервере и заново заполнить модель URL-адресами загруженных файлов. Затем вернитесь к виду:

//something in the form didn't validate.  For example: Name == null
// Save images to temp directory and populate model with those URLs

int nextPictureOrderId2 = 0;
// Save files in temporary directory
if (files != null && files.Count() > 0)
{
                    foreach (HttpPostedFileBase file in files)
                    {
                        if ((file != null) && (file.ContentLength > 0) && !string.IsNullOrEmpty(file.FileName))
                        {
                            // Picture picture and get id
                            var picture = new Picture();
                            picture.MimeType = "image/jpeg";
                            _pictureService.Insert(picture);
                            await _unitOfWorkAsync.SaveChangesAsync();

                            // Format is automatically detected though can be changed.
                            ISupportedImageFormat format = new JpegFormat { Quality = 90 };
                            Size size = new Size(500, 0);

                            //https://naimhamadi.wordpress.com/2014/06/25/processing-images-in-c-easily-using-imageprocessor/
                            // Initialize the ImageFactory using the overload to preserve EXIF metadata.
                            using (ImageFactory imageFactory = new ImageFactory(preserveExifData: true))
                            {
                                var path = Path.Combine(Server.MapPath("~/images/listing/newlisting"), string.Format("{0}.{1}", picture.ID.ToString("00000000"), "jpg"));

                                // Load, resize, set the format and quality and save an image.
                                imageFactory.Load(file.InputStream)
                                            .Resize(size)
                                            .Format(format)
                                            .Save(path);

                                var pictureModel = new PictureModel();
                                pictureModel.ID = picture.ID;
                                pictureModel.Url = ImageHelper.GetNewListingImagePath(picture.ID);
                                pictureModel.ListingID = listing.ID;
                                pictureModel.Ordering = nextPictureOrderId2;
                                model.Pictures.Add(pictureModel);
                            }

                            var itemPicture = new ListingPicture();
                            itemPicture.ListingID = listing.ID;
                            itemPicture.PictureID = picture.ID;
                            itemPicture.Ordering = nextPictureOrderId2;

                            _listingPictureservice.Insert(itemPicture);

                            nextPictureOrderId2++;
                        }
                    }
                }
// return to view
return View("ListingUpdate", model);

После возврата к виду предварительный просмотр изображения не масштабируется как миниатюра, он больше, он выдает ошибку JSON при попытке удалить предварительный просмотр, и если я пытаюсь снова отправить форму, загрузка файла не обнаруживается (files = 0), поэтому он не заполняет файл правильно.

Есть ли другой способ сделать это? Мне не нравится идея сохранения во временную директорию перед возвратом представления, но она все равно не работает. Есть ли способ сохранить и использовать URL-адрес BLOB-объекта, который изначально установлен при загрузке? Вы можете увидеть этот URL-адрес большого двоичного объекта, проверив элемент с помощью инструментов разработчика браузера на миниатюре предварительного просмотра.