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

High CPU to completely normal CPU - SXA issue, SXA pages not loading in mobile device

  Hi Team, Today i am going to share one of the nightmarish issue with you all, We are having Sitecore 9.1.1 hosted in azure PaaS environment Our site was working just fine and no noise, but we have been working on a feature release where 7-8 months of development needed to be released to production, Big GO LIVE event right?  Also to make the development smoother we also introduced BLUE/GREEN deployment slots in the same release, so we can easily SWAP slots and go live Everything went well, we went live, we even did load and performance testing on our staging and pre-prod and we were confident enough of results Very next day we started getting "SITE DOWN" alerts, and also product owners and clients mentioned that site is very slow for them in US time and in our morning when we were accessing it, it was working lighting fast so we were clue less at start, but we started digging  1) First thing caught our eyes were HIGH CPU spikes, in US time, also without any traffic CPU u...
3 comments
Read more

One or more exceptions occurred while processing the subscribers to the 'item:creating' event

I was recently installing the packages from one of the QA environment to my local Sitecore instance, "Media library package" to be precise, And it started giving me this below error One or more exceptions occurred while processing the subscribers to the 'item:creating' event Looking at the sitecore logs, it gave me more info on the context and the actual inner exception was following Solution: 'Name' should consist only of letters, digits, dashes or underscore Now it was evident that some of my file names were violating the naming rule, I could see in the log just before exception from where the installer stopped creating items, and that file name had round braces "(" and ")" at the end of it, with my surprise I was able to create the item with those name in the content tree, but below was the solution for it, Solution I am using SC 9.0.1 and in that Go to Sitecore.Marketing.config file residing in "App_Config\Sitecore\Mar...
9 comments
Read more

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