Save cropped image from session variable to database

2 posts, 0 answers
  1. don-E Merson
    don-E Merson avatar
    2 posts
    Member since:
    May 2010

    Posted 17 May 2014 Link to this post

    I have a situation where a user uploads a file and we put that into a session variable and an imageeditor.
     protected void AsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
                //Clear changes and remove uploaded image from Cache
            //   Context.Cache.Remove(Session.SessionID + "UploadedFile");
                using (Stream stream = e.File.InputStream)
                    byte[] imgData = new byte[stream.Length];
                    stream.Read(imgData, 0, imgData.Length);
                    MemoryStream ms = new MemoryStream();
                    ms.Write(imgData, 0, imgData.Length);

                    Context.Cache.Insert(Session.SessionID + "UploadedFile", ms, null, DateTime.Now.AddMinutes(20), TimeSpan.Zero);

    Then we put it into a image editor.
     protected void ImageEditor_CreateDonor_ImageLoading(object sender, ImageEditorLoadingEventArgs args)
                //Handle Uploaded images
                if (!Object.Equals(Context.Cache.Get(Session.SessionID + "UploadedFile"), null))
                    using (EditableImage image = new EditableImage((MemoryStream)Context.Cache.Get(Session.SessionID + "UploadedFile")))
                        args.Image = image.Clone();
                        args.Cancel = true;
    We the image is cropped we save the crop into the session variable.
     protected void RadImgEdt_ImageChanging(object sender, ImageEditorEventArgs e)
                Context.Cache.Remove(Session.SessionID + "UploadedFile");
                Context.Cache.Insert(Session.SessionID + "UploadedFile", e.Image, null, DateTime.Now.AddMinutes(20), TimeSpan.Zero);

    Now once we save, we want to save in the db which is a byte[] format, it doesn't save correctly. (I will the comments in to show the various things I have tried.
    protected void BtnDonorSave_Click(object sender, EventArgs e)
                Boolean isLandingPage = false;
                string rtxtScholarshipName = this.txtScholarshipName.Text;
                string rtxtScholarshipDesc = this.txtScholarshipDesc.Text;
                byte[] fileData;

                MemoryStream file;
                EditableImage eImage;
                    //UploadedFile file = AsyncUpload1.UploadedFiles[0];
                    //fileData = new byte[file.InputStream.Length];
                    //file.InputStream.Read(fileData, 0, fileData.Length);
                     file =
                         (MemoryStream) Context.Cache.Get(Session.SessionID + "UploadedFile");
                   // UploadedFile file = AsyncUpload1.UploadedFiles[0];
                   // var file = Context.Cache[(Session.SessionID + "UploadedFile")] as  MemoryStream;
                     fileData = new byte[file.Length];
                     file.Read(fileData, 0, fileData.Length);

                catch (ArgumentOutOfRangeException e1)
                    Response.Write("<script>alert('Donor cannot be added without an image');</script>");

                Int32 rcollegeId = Convert.ToInt32(this.collegeId.SelectedValue);
                string rtxtNotes = this.txtNotes.Text;
                if (chkBxNotes.Checked == true)
                    isLandingPage = true;

                db.CreateDonor(rcollegeId, rtxtScholarshipName, rtxtScholarshipDesc, ReadFully(Context.Cache.Get(Session.SessionID + "UploadedFile") as MemoryStream), rtxtNotes, User.Identity.Name, DateTime.Now, isLandingPage.ToString()).Execute();
                //Response.Write("<script>alert('Donor Created');</script>");
                Session["CollDiv"] = collegeId.SelectedValue;

    So after save when I try to view the image it is a bad image.

    Anyone know how to save a cropped image into a database from an imageeditor?


  2. Vessy
    Vessy avatar
    2249 posts

    Posted 19 May 2014 Link to this post


    When you want to save an edited image to a custom location (say another file, data base, etc.) you have to use the ImageEditor's saveImageOnServer() method in order to pass the made edits to the server, triggering the ImageSaving event. After that you can handle the ImageSaving event, saving the image to the desired custom location. You can review this approach in details in the following live demo: Save Image to a Custom Location


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top