# Force crop before upload

**URL:** <https://community.transloadit.com/t/force-crop-before-upload/16829>\
**Category:** Uppy\
**Created:** [October 3, 2023, 9:27am UTC](https://community.transloadit.com/t/force-crop-before-upload/16829 "2023-10-03T09:27:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![zasuh](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/zasuh/32/974_2.png) [@zasuh](https://community.transloadit.com/u/zasuh)\
**Post date:** [October 3, 2023, 9:27am UTC](https://community.transloadit.com/t/force-crop-before-upload/16829/1 "2023-10-03T09:27:34Z")

</div>

Is there a way to know if the image has been cropped before uploading it? Trying to disable the upload button if a user doesn’t crop it first.

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [October 3, 2023, 9:49am UTC](https://community.transloadit.com/t/force-crop-before-upload/16829/2 "2023-10-03T09:49:21Z")

</div>

You might be able to do something like this with [`hideUploadButton`](https://uppy.io/docs/dashboard/#hideuploadbutton), the [`file-editor:complete`](https://uppy.io/docs/image-editor/#file-editorcomplete) event, and [`info()`](https://uppy.io/docs/uppy/#infomessage-type-duration) to notify what went wrong.

---

<div class="post-metadata">

**Author:** ![Merlijn](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/merlijn/32/1382_2.png) [@Merlijn](https://community.transloadit.com/u/Merlijn)\
**Post date:** [October 3, 2023, 9:50am UTC](https://community.transloadit.com/t/force-crop-before-upload/16829/3 "2023-10-03T09:50:35Z")

</div>

Alternatively, [write a pre-processor](https://uppy.io/docs/guides/building-plugins/) which can fail and thus preventing going to the upload stage.

---

<div class="post-metadata">

**Author:** ![zasuh](https://yyz2.discourse-cdn.com/flex032/user_avatar/community.transloadit.com/zasuh/32/974_2.png) [@zasuh](https://community.transloadit.com/u/zasuh)\
**Post date:** [October 3, 2023, 10:15am UTC](https://community.transloadit.com/t/force-crop-before-upload/16829/4 "2023-10-03T10:15:48Z")

</div>

Tried to do something like this but had no luck:

```auto
const [isCropped, setIsCropped] = useState(false);

useEffect(() => {
    uppy.on('file-editor:complete', (file) => {
      setIsCropped(true);
      const img = URL.createObjectURL(file.data);
      setImage(img);
    });
    uppy.on('file-removed', () => setImage(''));
    uppy.on('upload', () => {
      if (!isCropped) {
        console.log('Not cropped');
        return;
      }
      console.log('Cropped');
    });
  }, [uppy]);

```