Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Dec 21 2023
Dec 21

When we was implementing a customer relationship management for a local client using Drupal, we faced this challege:

  • The client wanted to manage records of his patients with many treatment images captured by his iPhone
  • Each iPhone images can be large, 5 to 10MB depending on resolutions
  • While we can't hold so many large images to the web server, the disk space will soon run out

So we have to find a way to resize and compress images quality on the client side before uploading so they won't place burdens to the web server.

After googling around, we found a tip on this thread mentioning DropzoneJs. So we tried it and successfully reduce image sizes to 10% (from 3M to 300kb) while maintaining image quality.

In this tutorial, we will show you how to configure DropzoneJs in Drupal 10 to resize and compress images on client sides before uploading.

1. Install DropzoneJS and Entity Browser:

Please follow instructions to install DropzoneJS and Entity Browser modules

Download DropzoneJs and Exif-JS libraries and place them to /libraries folder, so the js files can be accessed as:
/libraries/dropzone/dist/min/dropzone.min.js
/libraries/dropzone/dist/min/dropzone.min.css
/libraries/exif-js/exif.js

Enable DropzoneJs and Dropzone Entity Browser widget, it will also enable Entity Browser module, as below:

Enable Dropzone modules

2. Create a Dropzone browser:

Please browse Admin - Configuration - Content authoring - Entity Browsers and Add a new Entity browser, name it Dropzone for example, and leave default settings.

Add Dropzone browser

Name Dropzone browser

On the next screen "Widget settings", please select Dropzone.

Select Dropzone browser

On the form below, please check the option "Use client side resizing" (note: it won't be checkable if you don't install Exif library as on step 1), then you will be able to select max width, max height and resize quality. We put 1920px for width and height, then image resize quality as 0.8 on our case.

Configure Dropzone browser

Save it.

3. Configure file upload widget

On your content type with image fields, please choose Manage form display, and set the widget to Entity browser

Set Manage form display to Entity Browser

4. Test the upload:

Now edit a node with image fields, the DropzoneJs browser is now displayed:

Dropzone browser display

We uploaded a test image, a fullsize image from our mobile camera, 3MB.

Upload an original image

After uploading successfully, we checked that file on our server, it was reduced to 300K, only 10% of the original size.

Image compressed

It is done. Now you can use DropzoneJs to resize and compress images on client sides before uploading, which is great for your web server.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web