#100 - Auto-Compress Image Uploads v0.1

Compress image uploads, including profile images.


<!-- 💙 MEMBERSCRIPT #100 v0.1 💙 AUTO-COMPRESSED IMAGE UPLOADS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/compressorjs/1.2.1/compressor.min.js" integrity="sha512-MgYeYFj8R3S6rvZHiJ1xA9cM/VDGcT4eRRFQwGA7qDP7NHbnWKNmAm28z0LVjOuUqjD0T9JxpDMdVqsZOSHaSA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const compressibleInputs = document.querySelectorAll('input[type="file"][ms-code-file_compress]');

  compressibleInputs.forEach(fileInput => {
    let isCompressing = false;

    fileInput.addEventListener('change', function (event) {
      if (isCompressing) {
        isCompressing = false;
        return;
      }

      if (fileInput.files.length === 0) {
        return;
      }

      const originalFile = fileInput.files[0];
      const compressionLevel = parseFloat(fileInput.getAttribute('ms-code-file_compress'));

      new Compressor(originalFile, {
        quality: compressionLevel,
        maxWidth: 2000,
        maxHeight: 2000,
        success(compressedResult) {
          const compressedFile = new File([compressedResult], originalFile.name, {
            type: compressedResult.type,
            lastModified: Date.now(),
          });

          const dataTransfer = new DataTransfer();
          dataTransfer.items.add(compressedFile);
          fileInput.files = dataTransfer.files;

          isCompressing = true;
          fileInput.dispatchEvent(new Event('change', { bubbles: true }));
        },
        error(err) {
          console.error('Compression Error: ', err.message);
        },
      });

      event.stopPropagation();
    }, true);
  });
});
</script>

Création du scénario Make.com

1. Téléchargez le modèle JSON ci-dessous pour commencer.

Télécharger le fichier

2. Naviguez jusqu'à Make.com et créez un nouveau scénario...

3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...

4. Téléchargez votre fichier et voilà ! Vous êtes prêt à relier vos propres comptes.

Besoin d'aide avec ce MemberScript ?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

Join the 2.0 Slack

Version notes

Attributs

Description

Attribut

Aucun élément n'a été trouvé.

Guide

How to Automatically Compress Images your Visitors Upload

Memberscripts needed

https://www.meberstack.com/scripts/100-auto-compress-image-uploads

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/amazon-s3-file-uploads?utm_medium=affiliate&ps_partner_key=ZHVuY2FuaGFtcmE1MTg5&ps_xid=MsYjHs6tTwHdhh&gsxid=MsYjHs6tTwHdhh&gspk=ZHVuY2FuaGFtcmE1MTg5

Why/When would you need to Automatically Compress Images your Visitors Upload?

Save storage space on your file upload service.
Avoid file size restrictions when users upload large images by compressing them.

Compressing the images users upload can be great when you’re using services like Amazon S3, Make.com, or any other similar ones, and users try to upload images that are too big, like for example an image for their profile picture.

This guide will help you compress the images your users upload so you can save space and avoid any file size restrictions from the services you’re using.

Automatically compressing user-uploaded images in Webflow

To automatically compress user-uploaded images in Webflow, we’re going to use MemberScript #100 – Auto Compress Image Uploads. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is create your file input field.

In the HTML code for your file input field, you need to add the following attribute:

ms-code-file_compress=”0.8”

The value will determine the quality and size of the image; for example, a higher-quality image can have a value of “1” and a lower-quality image can have a value of 0.2.

Of course, the higher the quality, the larger the file size.

Now in the case of Memberstack profile picture uploads, a couple of things will be different.

First off, these are the attributes you need to add to the upload button:

data-ms-action=”profile-image”
ms-code-file_compress=”0.8” – again, change the value based on your needs

Then you’ll also need to make a small change in the custom code, which you can see below.

Making it work

Now that you’ve got everything set up, all you need to do is add the MemberScript #100 custom code to your page, before the closing body tag.

In the case of profile picture uploads, you’ll need to replace “ms-code-file_compress” with “profile-picture”.

Conclusion

That’s everything, you can now go ahead and test your file input field’s image compression on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you create an S3 bucket in AWS, create roles and permissions, build a file uploader API, and make it all work with Webflow.

Take me to the Script!

Read full guide

Tutorial

Texte du bouton

#100 - Auto-Compress Image Uploads v0.1

Création du scénario Make.com

Besoin d'aide avec ce MemberScript ?

How to Automatically Compress Images your Visitors Upload

Memberscripts needed

Tutorial

Cloneable

Why/When would you need to Automatically Compress Images your Visitors Upload?

Setting it up

Making it work

Conclusion

Take me to the Script!

Essayez Memberstack gratuitement

Produit

Langue

Clients

Entreprise

Ressources

Something not working as expected?