However, the script introduced in that tutorial could only upload one image at once. Simplified, but should be clear how it works. This was the reason, I have written a tutorial in which I have described how to resize an image directly on client side in the browser for sending a reduced version of it to the server without using a server-side PHP script. There is a parent component which renders StyledDropzone component.

The code is available from Github github.Import React,.

Img.src = src Draw an image with a certain size on a Canvas ctx.drawImage(image, 0, 0, 1024, 576) Fill content of a canvas into an image $('#outputImage').attr('src', canvas.toDataURL('image/jpeg')) The image will be filled with base64 encoded data Demo Resizing an Image with Javascript is fairly simple, the key points are: How to create an Image Object var img = new Image() One advantage of this approach, is of course, the smaller upload size. When a shopper views a page that contains images, Commerce Cloud automatically sizes them on the client side for display on different devices, such as laptops. After the image is resized, you can upload it with ajax and store it on the filesystem of your server. It basically boils down to the question if you need to support anything lower than IE 9. If you choose this approach you must be aware that it will only work on Browsers that support Canvas. There are many ways to resize an image in JavaScript. I decided to resize the images in the client with Javascript.

On a Javascript heavy project, I was facing the same decision and decided to go a different path.

Usually when you are implementing an image upload, you have to decide whether you use GD or ImageMagic.

Javascript resize image client side