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

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

401.1 Unauthorized with windows authentication error code 0xc000006d

How many of you have faced this hosting issue when you do everything what it takes to run the site with windows authentication but still you are getting the same error again and again? If you think you also have faced the same issue and you tired of reading MSDN KBs for it and still have not found the issue (If KB has solved the issue, well and good, if not you can try this trick),Please Read below Typical scenario In typical hosting with IIS, i did every possible things like enabling windows authentication, changing it in web.config, configuring connection pool, authorization rules, it asks me for window authentication login and despite of entering correct credentials it always fails and keeps on asking for login, and when pressed cancel it gives 401.1 with 0xc000006d error code Solution (Which worked for me at-least after trying for almost 6-9 hrs) You need to change the Loop Back Check in registry so that it allows the host names which you are giving in url are allowed and au...
2 comments
Read more

Error in Sitecore 10.3 XM with CDs - Could not find configuration node: database/database[@id='master']

Hi Team, Recently we came across two distinct scenarios with same error message.  1) We started getting below error when we try to hit our layout service API endpoint. If we hit end point of CM, it was working fine and when we try to hit end point of CD it was giving this error, It was clear there is something in backend expecting master DB instead of WEB DB In first scenario my colleague  Jatin  also got same issue while setting up docker instance for 10.3, and my friend  Akshay Barve  and I had the same observation. 2) Second scenario I was having the same exception, It was another project on 10.3 XM with CD, It was one of the migration project so we were migrating from 10.2 to 10.3, Older site was not giving any error but new site the moment we hit, it was giving same exception in the log Issue in second scenario was in site grouping there was only site and both CM and CD URLs were given in host name and had WEB db as database, so basically there was no previ...
Post a Comment
Read more