below is the view :
i want to display images as they are saved to database , not getting how to go about it.i have took one div named uploadedimages when i bind the data from controller but it is not getting called.
@{
ViewBag.Title = "ImageUpload";
//hardcoded patientid temporary
TempData["PatientId"] = 2;
}
<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:
[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 UploadedImage;
}