Fix upload section adding deleted images to the canvas

[MichaelDimmitt]

Update:

Updated this solution to use event.stopPropagation.

Issue:

upload-section adds an image to the canvas when deleting.

Expected:

Image should be deleted and no image added to the canvas.

Steps to reproduce:

Uncommenting the following line in App.js: DEFAULT_SECTIONS.unshift(UploadSection);

add import {UploadSection} from './sections/upload-section' to the top of App.js

Video of issue: (deleted image is added to the canvas)

https://github.com/user-attachments/assets/18c56f07-819f-4d3f-96bf-9b6109ceb4de

Video with solution: (deleted image does not get added to the canvas)

https://github.com/user-attachments/assets/8722409a-98d0-4b32-aa6c-85765e048a06

Cheers, Michael Dimmitt

[netlify[bot]]

👷 Deploy request for polotno-studio pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	9bd65fb6918681e14d1b95b4b20340ae18c76354

[lavrton]

Hello @MichaelDimmitt Thank you so much for such a detailed issue and Pull Request.

I will postpone a little on merging it. In polotno core, we are doing some rewrites of the Images grid component. It may or may not affect the solution of the original issue. So I want to finish some refactoring first, then come back to the issue.

[MichaelDimmitt]

awesome

[ADTC]

@MichaelDimmitt The boolean ref is unnecessary and can be removed (all current changes reverted).

To solve the problem, you can simply change the button's onClick code:

        getCredit={(image) => (
          <div>
            <Button icon="trash"
              onClick={(e) => {
                e.stopPropagation();
                handleDelete(image);
              }}
            />
          </div>
        )}

I created my own version of Upload Panel and I did the same to solve the problem.

[MichaelDimmitt]

@ADTC, ...thanks

Not sure why it did not work for me the first time but after a fresh npm install the event is there. Updating my pr to have the event instead.