Display images on same view as images are uploaded to database using plupload in mvc3

Question

i want to display images as they are uploaded using plupload , images are getting stored in database but i want them to show on screen as they are saved to database and when images are saved it is not submiting using form as below validation is never checked for more than 8files .i have no idea how to go about it.

i just want images to be displayed in uploadedimages div as they are getting saved in db.

below is my view :
<link href="@Url.Content("~/Scripts/plupload/js/jquery.plupload.queue/css/jquery.plupload.queue.css")"
    rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Scripts/plupload/js/jquery.ui.plupload/css/jquery.ui.plupload.css")"
    rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/plupload/js/plupload.full.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/plupload/js/jquery.ui.plupload.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js")" type="text/javascript"></script>
<script type="text/javascript">


    $(document).ready(function () {

        $("#uploader").pluploadQueue({
            // General settings
            runtimes: 'html5,html4,gears,flash,silverlight',
            url: '@Url.Action("ImageUpload")',
            max_file_size: '10mb',
            chunk_size: '1mb',
            unique_names: true,
            button_browse_hover: true,
            multiple_queues: true,
            dragdrop: false,

            // Resize images on clientside if we can
            resize: { width: 320, height: 340, quality: 90 },

            // Specify what files to browse for
            filters: [
                { title: "Image files", extensions: "jpg,gif,png,jpeg,bmp" },
                { title: "Zip files", extensions: "zip" },
                { title: 'PDF files', extensions: 'pdf' },
                { title: "Excel Files", extensions: "xls,xslx,csv" },

            ],



            // Silverlight settings
            silverlight_xap_url: '@Url.Content("~/Scripts/plupload/plupload.silverlight.xap")'
        });

        // Client side form validation
        $('form').submit(function (e) {

            var uploader = $('#uploader').pluploadQueue();
            // Files in queue upload them first
            if (uploader.files.length > 0) {

                if (uploader.files.length < 9) {
                    // When all files are uploaded submit form
                    uploader.bind('StateChanged', function () {
                        if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {

                            $('form')[0].submit();

                        }
                    });
                    uploader.bind('FileUploaded', function (data) {

                        $('#uploadedImages').prepend('<img id="theImg" src="' + data + '" />');

                    });
                    uploader.start();
                } else {
                    alert('Number of files more than 8.');
                }
                return false;
            }
            else {
                alert('You must queue at least one file.');
            }
            return false;
        });



    });


</script>
@using (Html.BeginForm("ImageUpload", "Image", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div id="uploader">
        <p>
            You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
    </div>



}
<div id="uploadedImages">
</div>

Below is the controller :

in this i have saved it database and return the UploadedImage to display on same view .

 [HttpPost]
        public string ImageUpload(HttpPostedFileBase uploadFile)
        {
            var bytes = new byte[0];
            int patientId = (int)TempData["PatientId"];
            TempData.Keep();
            string UploadedImage = string.Empty;
            PatientChartImage oPatientChartImage = new PatientChartImage();

            uploadFile = Request.Files[0];

            if (uploadFile.ContentLength > 0)
            {
                bytes = new byte[uploadFile.ContentLength];
                var fileName = Path.GetFileName(uploadFile.FileName);
                var path = Path.Combine(Server.MapPath("~/TempFolder"), fileName);
                oPatientChartImage.PatientId = patientId;
                oPatientChartImage.PracticeId = (User as CustomPrincipal).CustomIdentity.PracticeId;
                oPatientChartImage.Title = fileName;
                oPatientChartImage.UserId = (User as CustomPrincipal).CustomIdentity.UserId;
                oPatientChartImage.SerialNumber = 2;

                Bitmap original = Bitmap.FromStream(uploadFile.InputStream) as Bitmap;

                using (System.IO.MemoryStream stream = new System.IO.MemoryStream())
                {
                    original.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
                    oPatientChartImage.Image= stream.ToArray();
                    UploadedImage = ViewBag.ImageData = "data:image/png;base64," + Convert.ToBase64String(stream.ToArray());

                }

                db.PatientChartImages.Add(oPatientChartImage);
                db.SaveChanges();

            }
            //return Json(new { ImageData = UploadedImage },JsonRequestBehavior.AllowGet);
            return UploadedImage;
        }

Answer 1

I feel its better to use Ajax Upload than any other plugins..

your HomeController goes like this,

public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public WrappedJsonResult UploadImage(HttpPostedFileWrapper imageFile)
        {
            if (imageFile == null || imageFile.ContentLength == 0)
            {
                return new WrappedJsonResult
                {
                    Data = new
                    {
                        IsValid = false,
                        Message = "No file was uploaded.",
                        ImagePath = string.Empty
                    }
                };
            }

            var fileName = String.Format("{0}.jpg", Guid.NewGuid().ToString());
            var imagePath = Path.Combine(Server.MapPath(Url.Content("~/Uploads")), fileName);

            imageFile.SaveAs(imagePath);

            return new WrappedJsonResult
            {
                Data = new
                {
                    IsValid = true,
                    Message = string.Empty,
                    ImagePath = Url.Content(String.Format("~/Uploads/{0}", fileName))
                }
            };
        }
    }

Add a separate class for JsonResult

public class WrappedJsonResult : JsonResult
    {
        public override void ExecuteResult(ControllerContext context)
        {
            context.HttpContext.Response.Write("<html><body><textarea id=\"jsonResult\" name=\"jsonResult\">");
            base.ExecuteResult(context);
            context.HttpContext.Response.Write("</textarea></body></html>");
            context.HttpContext.Response.ContentType = "text/html";
        }
    }

And your view goes like,

@using (Html.BeginForm("UploadImage", "Home", FormMethod.Post, 
    new { enctype = "multipart/form-data", id="ImgForm", 
        name="ImgForm", target="UploadTarget" }))
{
    <h3>Upload Image</h3>
    <input type="file" name="imageFile" />

    <input type="button" value="Save Image" onclick="UploadImage()" />
}
<iframe id="UploadTarget" name="UploadTarget" onload="UploadImage_Complete();" style="position: absolute; left: -999em; top: -999em;"></iframe>
<div id="Images"></div>

<script type="text/javascript">
    var isFirstLoad = true;

    function UploadImage() {
        $("#ImgForm").submit();
    }

    function UploadImage_Complete() {
        //Check to see if this is the first load of the iFrame
        if (isFirstLoad == true) {
            isFirstLoad = false;
            return;
        }

        //Reset the image form so the file won't get uploaded again
        document.getElementById("ImgForm").reset();

        //Grab the content of the textarea we named jsonResult .  This shold be loaded into 
        //the hidden iFrame.
        var newImg = $.parseJSON($("#UploadTarget").contents().find("#jsonResult")[0].innerHTML);

        //If there was an error, display it to the user
        if (newImg.IsValid == false) {
            alert(newImg.Message);
            return;
        }

        //Create a new image and insert it into the Images div.  Just to be fancy, 
        //we're going to use a "FadeIn" effect from jQuery
        var imgDiv = document.getElementById("Images");
        var img = new Image();
        img.src = newImg.ImagePath;

        //Hide the image before adding to the DOM
        $(img).hide();
        imgDiv.appendChild(img);
        //Now fade the image in
        $(img).fadeIn(500, null);
    }

</script>

Write your code for inserting the picture to the database.. Hope it helps someone ! :)