How can I prevent form submitting

[MuttakinHasib]

I am using the react-uploady upload button inside the form tag. That's why when I click on the upload button; it's submitting the form

example code

<form>
   <Uploady
      debug
      destination={{
        url: `https://api.cloudinary.com/v1_1/${process.env['NX_CLOUDINARY_CLOUD_NAME']}/image/upload`,
        params: {
          upload_preset: process.env['NX_CLOUDINARY_UPLOAD_PRESET'],
        },
      }}
      multiple={false}
      accept="image/*"
      fileFilter={filterBySize}
    >
      <UploadDropZone clearPendingOnAdd>
        <UploadButton clearPendingOnAdd>
          {/*  eslint-disable-next-line react/jsx-no-useless-fragment */}
          <React.Fragment>{props.children}</React.Fragment>
        </UploadButton>
      </UploadDropZone>
      <UploadPreview PreviewComponent={PreviewWithCrop} previewComponentProps={{ ...props }} />
    </Uploady>
</form>

@yoavniran can you please help me ?

[yoavniran]

Hey @MuttakinHasib

Check out this sandbox I created.

It shows how to prevent submission before a file is chosen.

There are definitely more ways than one to achieve this as technically this isnt an Uploady question.

Uploady gives you the information and the control to start uploads at the right time based on your logic. Using a custom button (asUploadButton) can help with that.

Hope this helps