This is a migrated thread and some comments may be shown as answers.

[Solved] [Telerik upload] Preview Image before save

0 Answers 27 Views
Upload
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
vinacode
Top achievements
Rank 1
vinacode asked on 13 Aug 2012, 03:40 AM
I want do an action the follow:
I want upload an image use telerik upload. I want preview Image before save it.
@using (Html.BeginForm(FormMethod.Post, new { enctype = "multipart/form-data" }))
{
                      <div class="editor-label">
                            @Html.LabelFor(model => model.Title)
                        </div>
                        <div class="editor-field">
                            @Html.EditorFor(model => model.Title)
                        </div>
                       <div class="editor-label">
                            @Html.LabelFor(model => model.Image)
                        </div>
                       <div class="editor-field">
                            @(Html.Telerik().Upload()
                                .Name("imageUpload")
                                .Multiple(false)
                                .HtmlAttributes(new { @class = "btnUploaderCss" })
                                .Async(async => async
                                    .Save("Save", "Product")
                                    .Remove("Remove", "Product")
                                )
                                .ClientEvents(events => events
                                    .OnSuccess("onSuccess"))
                              )
                     <img alt="" id="imgThumbnail"  />
                     </div>
<input type="submit" value="submit />
}
 public ActionResult Save(IEnumerable<HttpPostedFileBase> imageUpload)
        {
            if (imageUpload== null || imageUpload.Count() <= 0) return Content("1");

            var proImage = imageUpload.FirstOrDefault();
            if (proImage != null)
            {
                Session["ContentLength"] = proImage.ContentLength;
                Session["ContentType"] = proImage.ContentType;
                Session["FileName"] = proImage.FileName;
                var b = new byte[proImage.ContentLength];
                proImage.InputStream.Read(b, 0, proImage.ContentLength);
                Session["ContentStream"] = b;
                return Content("");
            }
            return Content("2");
        }

        public ActionResult Remove(IEnumerable<HttpPostedFileBase> imageUpload)
        {
            return Content("");
        }
       public ActionResult ImageLoad(int? id)
        {
            var b = (byte[])Session["ContentStream"];
            var fileName = (string)Session["FileName"];
            var contentType = (string)Session["ContentType"];
            Session["ContentLength"] = null;
            Session["ContentType"] = null;
            Session["FileName"] = null;
            Session["ContentStream"] = null;
            if (b != null)
            {
                return File(b, contentType, fileName);
            }

            return null;
        }
and function javascript:
       function onSuccess(e) {           
            $("#imgThumbnail")[0].src = "/ImagePreview/ImageLoad?a=" + guidGenerator();
        }
Image thumbnai have showed. but when i click submit button then imageUpload = null
        [HttpPost]
        [ValidateInput(false)]
        public ActionResult Create(ProductModel model, IEnumerable<HttpPostedFileBase> imageUpload)
       {
       }
Please help me. Thank you very much.
Tags
Upload
Asked by
vinacode
Top achievements
Rank 1
Share this question
or