Dropzone.js - отображение изображений, хранящихся в папке app_data

Question

У меня есть следующая dropzone для отображения изображений, хранящихся в папке app_data, но thumnail не работает, потому что папка app_data ограничена веб-пользователями.

В консоли я получаю:

"NetworkError: 404 Not Found - http://localhost:61372/app_data/wallimages/dropzonelayout.png" 

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

Любые предложения?

Dropzone.options.dropzoneForm = { 
     acceptedFiles: "image/*", 
     init: function() { 
      var thisDropzone = this; 


      $.getJSON("/home/GetAttachments/").done(function (data) { 
       if (data.Data != '') { 

        $.each(data.Data, function (index, item) { 
          //// Create the mock file: 
          var mockFile = { 
           name: item.AttachmentID, 
           size: 12345 
          }; 

          console.log(mockFile); 
          // Call the default addedfile event handler 
          thisDropzone.emit("addedfile", mockFile); 

          // And optionally show the thumbnail of the file: 
          thisDropzone.emit("thumbnail", mockFile, item.Path); 

          // If you use the maxFiles option, make sure you adjust it to the 
          // correct amount: 
          //var existingFileCount = 1; // The number of files already uploaded 
          //myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount; 
        }); 
       } 

      }); 




     } 


    }; 

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

public ActionResult GetAttachments() 
    { 
     //Get the images list from repository 
     var attachmentsList = new List<AttachmentsModel> 
     { 
      new AttachmentsModel {AttachmentID = 1, FileName = "dropzonelayout.png", Path = "/app_data/wallimages/dropzonelayout.png"}, 
      new AttachmentsModel {AttachmentID = 2, FileName = "imageslider-3.png", Path = "/app_data/wallimages/imageslider-3.png"} 
     }.ToList(); 

     return Json(new { Data = attachmentsList }, JsonRequestBehavior.AllowGet); 
    } 

Answer 1

Вам потребуется действие контроллера, который будет течь изображение:

public class ImagesController : Controller 
{ 
    [Authorize] // <!-- You probably want only authenticated users to access this 
    public ActionResult Thumbnail(string imageName) 
    { 
     // TODO: your authorization stuff comes here 
     // Verify that the currently authenticated user has the required 
     // permissions to access the requested image 
     // It is also very important to properly sanitize the imageName 
     // parameter to avoid requests such as imageName=../../../super_secret.png 

     var path = Server.MapPath("~/App_Data/" + imageName); 

     return base.File(path, "image/png"); 
    } 
} 

и теперь вы можете использовать этот /images/thumbnail?imagename=my_thumbnail.png действие от клиента:

var attachmentsList = new List<AttachmentsModel> 
{ 
    new AttachmentsModel 
    { 
     AttachmentID = 1, 
     FileName = "dropzonelayout.png", 
     Path = Url.Action("thumbnail", "images", new { imagename = "dropzonelayout.png" }) 
    }, 
    new AttachmentsModel 
    { 
     AttachmentID = 2, 
     FileName = "imageslider-3.png", 
     Path = Url.Action("thumbnail", "images", new { imagename = "imageslider-3.png" }) 
    } 
}.ToList();