Skip to main content

File upload reference on client side for client side processing like crop image or anything

I have had a requirement were i needed to include the crop functionality in already developed file upload control, requirement was user should be able to crop the images he selects and later on when he finalize the selection, and that file should get saved on server so next it is available to user
Here our tradition approach is always like, we upload the file on server on some temporary location, so that it is available for cropping to user, and he can apply cropping on client side and send that to server with its crop selection and on server side we can process that image and crop on server side with already uploaded image and save so only cropped version will be saved and use that image
There is another approach which can save us from doing the upload first, crop and later on again save that image, the process is like following, Find the following code



Consider following is my upload control










Now,Consider following javascript registered which will take the file reference on client side and return the byte array of image and directly show in preview on the fly and very fast, as it is yet not uploaded on server, so process is very fast


function getImageFromClientSide(file) {

    var reader = new FileReader();
    var image  = new Image();
  
    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
    image.src    = _file.target.result;              
    image.onload = function() {
           var w = this.width,
           h = this.height,
           t = file.type,                           
           n = file.name,
           s = ~~(file.size/1024) +'KB';
           $('#uploadedImagePreview').attr('src',this.src);
        };
    };
    
}
$("#imgSelector").change(function (e) {
    getImageFromClientSide(this);

});



As you can above, what it is using is FileReader method of DOM and reading a file from client's computer, and it will convert image into byte array of base 64, now you can treat this as a string and you can send this image to server side using ajax or anything as a string, and on server side (i am using asp.net c#, and you can use following


byte[] imageBytes = Convert.FromBase64String(imageByteArray); // Here imageByteArray is my string variable which contains the byte array string sent from client side 
   TypeConverter tc = TypeDescriptor.GetConverter(typeof(Image));
   Image OriginalImage = (Image)tc.ConvertFrom(imageBytes))



As this whole process is working on client side, this is very fast in performance, I got the reference of my search and r&d from http://jsbin.com/oTAtIpA/490/edit url and i implimented it from the same, i hope this will help some of you coders
Thanks you !!!

Comments

Popular posts from this blog

Sitecore Technical Workshops - Top FAQs customers asked on XM Cloud

Hi Readers, I want to talk to you about interesting things which we have been doing which is "Technical Workshops" for our customers, so here goes the scenarios. So, we have been doing multiple types of technical workshops.  1) Training customer and their Sitecore technical team on latest and the greatest technologies like XM Cloud & Another composable stack and try enabling them for new Sitecore tech stack. 2) Customers / Potential Customers have their agenda of existing pain points, and we take a workshop on topics around them with best practices etc. little on new technologies, so they also know the future. Basically, we prepare custom targeted presentations & demos for individual workshops, and make sure it helps them answer their questions and they get insights of where Sitecore eco systems has to offer from their versatile toolset and try to keep them up to date with it. So, Purpose of this blog is, because in all these customer & their technical team's

An error occurred while receiving the HTTP response to This could be due to the service endpoint binding not using the HTTP protocol. This could also be due to an HTTP request context being aborted by the server (possibly due to the service shutting down). See server logs for more details.

You have noticed many times that everything was working fine and suddenly the below error starts coming and you find no way to work it out An error occurred while receiving the HTTP response to This could be due to the service endpoint binding not using the HTTP protocol. This could also be due to an HTTP request context being aborted by the server (possibly due to the service shutting down). See server logs for more details. The reason for this is the receiving size of WCF service is smaller then the data which is coming from service It was working before because it was small,So you will have to try to increase the receiving setting in your end point,Possible settings can be following maxStringContentLength="2147483647" maxReceivedMessageSize="2147483647" maxBufferSize="2147483647" maxArrayLength="2147483647" That would definately help you!!!

Set up leprechaun code generation with Sitecore XM Cloud Starterkit

Hi Sitecorians, It has been amazing learning year so far and with the change in technology and shift of the focus on frontend frameworks and composable products, it has been market demand to keep learning and exploring new things. Reasons behind this blog Today's topic is something that was in my draft from April-May, and I always thought that there is already a good documentation out there for  Leprechaun  and a blog post is not needed, Until I realized that there was so many of us facing same kind of issues and same kind of problems and spending same amount of time, That is where I thought, if I could write something which can reduce that repetitive troubleshooting time, That would really help the community. 1)  In a project environment, if we get into some configuration issues, we resolve them, we make sure we are not blocked and continue, but if you think same issue, same step and same scenario will come to other people, so if we can draft it online, it will help other people 2