Working Example: Requiring Cropping Before Upload

Uppy
1

Wanted to post this working example I came up with to require cropping for one or multiple images being uploaded. This example uses the React flavor of DashboardModal, but can be adjusted for non react, or just Dashboard.

If a user clicks upload before the image editor has been opened and saved for any of the images, this will prevent the upload, show the user a message that cropping is required, and open the image editor for one of the images which has not been cropped yet. This would keep happening until all images have been cropped.

      if (aspectRatio) {
        uppy.on("file-editor:complete", (updatedFile) => {
          // add a property to indicate the image went through the image editor, and would have forced the aspect ratio to be applied.
          updatedFile.aspectRatioApplied = true;
        });

        uppyOptions.onBeforeUpload = (files) => {
          const filesArray = Object.entries(files);

          const validFiles = filesArray.filter(([, file]) => {
            if (file.aspectRatioApplied) return true;
            uppy.info({ message: "Please edit each image to apply a required crop." }, "warning");
            uppy.getPlugin("react:DashboardModal").toggleFileCard(file.id);
            uppy.getPlugin("react:DashboardModal").openFileEditor(file);
            return false;
          });

          return validFiles.length === filesArray.length;
        };
      }
      uppy.setOptions(uppyOptions);
1 Like