Dropzone.js - display images stored in app_data folder

Question

I have the following dropzone to display images stored in app_data folder but the thumnail doesn't work becuase the app_data folder is restricted to web users.

In the console i get:

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

I have delibrately stored the images in the app_data folder to restrict access and only users with certain roles can edit uploaded file i.e. delete etc. So my question is how can i display a thumbnail image in this scenario for editing uploaded files. I don't want to use some default image as I already know that could be another solution if i want to keep files stored in the app_data folder.

Any suggestions?

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;
                    });
                }

            });




        }


    };

And this is the action to get the images:

 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

You will need a controller action that will stream the image:

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");
    }
}

and now you can use this /images/thumbnail?imagename=my_thumbnail.png action from the client:

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();