Transform Stored Image

import { useMemo, useState } from "react";
import { Filelink } from "filestack-js";

// To run this demo,  Open ".env" file and replace "YOUR_API_KEY" with a vaild API key from Filestack DevPortal (https://dev.filestack.com/login/)
const filestackApiKey = process.env.VITE_FILESTACK_KEY;

// Replace "file_handle" with the handle of the file you want to transform.
const fileHandle = "file_handle";

export default function ImageTransformer() {
  const [width, setWidth] = useState("");
  const [height, setHeight] = useState("");
  const [fit, setFit] = useState("scale");

  const [format, setFormat] = useState("no");
  const [quality, setQuality] = useState("");
  const [compress, setCompress] = useState(false);

  const [flop, setFlop] = useState(false);

  const transformedUrl = useMemo(() => {
    const filelink = new Filelink(fileHandle, filestackApiKey);

    const w = Number(width);
    const h = Number(height);

    if (w > 0 && h > 0) {
      filelink.resize({
        width: w,
        height: h,
        fit,
      });
    }

    if (format !== "no") {
      const q = Number(quality);

      filelink.output({
        format,
        compress,
        quality: q >= 1 && q <= 100 ? q : 90,
      });
    }

    if (flop) {
      filelink.flop();
    }

    return filelink.toString();
  }, [width, height, fit, format, quality, compress, flop]);

  return (
    

      

        

          
Resize

          

            Width:
             setWidth(e.target.value)}
            />
          

          

            Height:
             setHeight(e.target.value)}
            />
          

          

            Fit:
             setFit(e.target.value)}>
              Scale

              Clip

              Crop

              Max
            
          
        

        

          
Convert

          

            Quality:
             setQuality(e.target.value)}
            />
          

          

            Compress:
             setCompress(e.target.checked)}
            />
          

          

            Format:
             setFormat(e.target.value)}>
              Don't Change

              JPG

              PNG

              WEBP
            
          
        

        

          
More Controls

          

            Flop:
             setFlop(e.target.checked)}
            />
          
        
      

      

        
      
    
  );
}

Copied!