[SOLVED] Resize image before uploading with upload control

Hi,

I’ve a problem with the ImageUpload extension that resize the image before uploade…I’m using vb and not c#, when i click on the button that should call the “upload” event I’ve this error:

Wisej: Widget class not found, scheduling for lazy loading: wisej.web.ext.ImageUpload

Wisej: onActionCreate Error creating:  { , middleRig………..

Wisej: Widget not found: id_782; function: upload

The steps that I’ve followed are:

1. I’ve create the Folder Platform and inside it the file named “Platform.wisej.web.ext.ImageUpload.js”
2. I’ve defined the class ImageUpload that inherits Upload
3. In my page where I need to upload the files, I’ve added a button to “Resize and Upload Image” and on its click I do this:
   

    Me.MyImageUpload.Call(“upload”, “”)

What can i check?

Thank you

Giorgia

This was working flawlessly, but broke in my VB  to C# converted WiseJ project.  It was also converted to WiseJ 2.5.

I can’t even get the original sample provided by Luca to compile.  I opened it an added the WiseJ 2.5 nuget package to the project, but I still have 67 errors.

I just realized today that the app was still uploading full resolution (4032×3024) photos from the camera, and the ImageUpload control is no longer sizing them down.  Of course this makes upload times markedly higher on cellular connections, creating a slow and unpleasant experience for the user.  I have to demo the app at a convention next week and am really hoping that I can get it working again.

What must be done in order to get this working in WiseJ 2.5 again?  My plan is to open the original C# sample provided by Luca, implement my modifications, and then reference the .dll assembly in my WiseJ 2.5 app.  Would it be possible for the sample to be re-uploaded?  I still think this would make a great “stock” control in WiseJ.  Thank you

I was finally able to achieve what I was looking for from your sample (resize to a limited width and height while preserving the aspect ratio, and without risking a skew of the image)

in wisej.web.ext.ImageUpload.js I modified the img.onload function like this

 img.onload = function () {

 //set max width and height we are willing to accept
 var maxWidth = imageSize.width;//800;
 var maxHeight = imageSize.height;// 600;

 //get the original source photo width and height
 var srcWidth = img.width;
 var srcHeight = img.height;

 //define our target size variables
 var newWidth = srcWidth;
 var newHeight = srcHeight;

 //only need to resize if source dimensions exceed our maximum dimensions
 if ((srcWidth > maxWidth) || (srcHeight > maxHeight)) {
 //Conserve aspect ratio of the original 
 var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

 //set new dimensions with aspect ratio preserved
 newWidth = srcWidth * ratio;
 newHeight = srcHeight * ratio;
 }

 canvas.width = newWidth;
 canvas.height = newHeight;

 ctx.drawImage(img, 0, 0, newWidth, newHeight);
....

(the rest is identical)

in the bottom, below  document.body.appendChild(img); , I commented out the setting of img.width = imageSize.width and img.height = imageSize.height.  Essentially this changes the behavior so the input values specify a MAXIMUM width and height, instead of a fixed width and height.

Next step is trying to implement in an existing project.

Would you be interested in adding these changes and including the ImageUpload class in a future WiseJ?

regards,

Andrew

Wow that is pretty much a complete implementation! Thanks  🙂

I tried extending it to support a “ImageSizePercent” field that could resize width and height by a percent, instead of fixed amounts (we don’t always know the orientation or size of images coming in, so its hard to resize to a fixed width and height without risking a skew of the image). Something like

if (imageSizePercent > 0) {
//resize by a percentage
img.width = img.width * imageSizePercent;
img.height = img.height * imageSizePercent;
}
else {
//resize into specified dimensions
if (imageSize.width)
img.width = imageSize.width;
if (imageSize.height)
img.height = imageSize.height;
}

where it overrides.

I added the new properties to ImageUpload.js and ImageUpload.cs, and while it compiles I can’t get it to work, and nothing is logged in the console.  Attached is the sample.  I can keep hacking at it but I suspect you may see what’s wrong right away.

See attached sample. It’s a more complete than what you find online.

Hi Andrew,

The upload control uses the <input type=”file”> element (there is no other way to upload files). Our control (source code is here: https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.Upload.js) attaches the “change” event, reads the files list (see getFiles()) and uses the static method uploadFiles (same js code) to send the file through an ajax request using the FormData javascript class.

On the server side, the request is handled by the ASP.NET file upload handler and you get the uploaded file collection.

If you want to resize the image on the client you have to do it obviously before it is sent to the server. And since the file selected by the <input type=”file”> is not an image yet, you have to create an <img> element (or Image class), load the file, process the onload event to get the image, draw it scaled on a canvas, get the image back as a data uri from the canvas, convert it to a file object and send it to the server. Not too easy.

You can override the upload method in Wisej easily like this:

qx.Mixin.define("my.UploadPatch", {

   statics: {
      uploadFiles: function (files, submitUrl, filter, maxSize, callbacks) {
         
           // process the files
           
           // call the base implementation or replace with a custom ajax request.
           this.base(arguments, files, submitUrl, filter, maxSize, callbacks);

      }
   }

});

qx.Class.patch(wisej.web.Upload, my.UploadPatch);

HTH