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 !!!
Labels:

Comments

Post a Comment

Popular posts from this blog

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 othe...
Post a Comment
Read more

Why SitecoreAI - Getting into the shoes of the customer how to select right CMS

Hi Team, Lately, I have been talking to lot of our customers / potential customers and having pre-sales demos where one question always comes is "Why Sitecore" ?  Now this question can be for any product which is out for sell. And as a technician I always get into product technical features, but at the same time as a pre-sales guy, it also makes me think, surely all competitive products have same features, so definitely answer to this is not in the technicalities.  If you step back and think, we are also a customer in our daily life and buy lot of things, what is that process we go through? When we buy, how can your customer decide if this is a right fit for you or not, why we select A over B? Is it price? is it service? Is it a brand? Is it about features? Is it about brand loyalty?  When it is a technical product, I am sure it cannot start with the technicalities of the product or selecting product itself, 100% not, I feel decision is always business strategy first and ...
1 comment
Read more

Sitecore SXA creative exchange export appends hyphen(-) number to the static assets

Hello There, So, today i will be sharing some information which i think will be useful for many as this might come as a blocker just like me, where i was planning for a next sprint for which i was checking prerequisites and suddenly found out that, Export functionality of SXA is not working properly, it was exporting things but i open the page which was exported (index.html), it was loading without any CSS or JS functioning. Problem I have been using SXA but i never had this issue before, where page or site gets exported but when we open the page, it comes up without CSS or JS functioning properly on the page. So, first thing like any developer i opened up the source of the HTML and tried to see why CSS is not working properly and checked its path and found out following  I was surprised at first point as i never saw this behavior, but one thing was confirmed that, SXA is adding these "-number" at the end of CSS when we export so, i tried to de-assemble the DLL just to see wh...
Post a Comment
Read more