Delete images in React Spreadsheet

10 Jul 20264 minutes to read

Images added to a worksheet can be removed either through user interaction or programmatically.

Delete via UI:

To remove an image from the worksheet:

  1. Click the image to select it
  2. Press Delete or Backspace to remove it immediately

Alternative UI method:

  • Select the image and choose Clear All or Clear Contents from the ribbon to clear the selection and all embedded objects including the image

Delete programmatically:

The Spreadsheet component provides the deleteImage method. This method removes an image based on its unique identifier and the cell address where it is placed.

Pass the image ID to remove a specific image. This approach is useful when you track image IDs at insertion time and want to remove them later without relying on user selection.

Calling deleteImage() removes the image from the runtime model and the DOM overlay.

The following code example shows how to delete an image by ID in spreadsheet:

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App() {
  const spreadsheetRef = React.useRef(null);

  const onCreated = () => {
    // Insert an image to demonstrate deletion
    spreadsheetRef.current.insertImage(
      [
        {
          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
          width: 320,
          height: 220
        }
      ],
      'A1'
    );
  };

  const onDeleteById = () => {
    // Delete a known image by its overlay id and anchor cell.
    spreadsheetRef.current.deleteImage('spreadsheet_1821633465_0_overlay_picture__5', 'A3');
  };
  

  return (
  <div>
      <button onClick={onDeleteById}>Delete Image by id</button>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} allowImage={true}>
      </SpreadsheetComponent>
  </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root'));
root.render(<App />);
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

function App(): React.ReactElement {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);

  const onCreated = (): void => {
    // Insert an image to demonstrate deletion
    spreadsheetRef.current.insertImage(
      [
        {
          src: 'https://www.syncfusion.com/products/essential-js2/control/images/spreadsheet/javascript-spreadsheet-cell-format.png',
          width: 320,
          height: 220
        }
      ],
      'A1'
    );
  };

  const onDeleteById = (): void => {
    // Delete a known image by its overlay id and anchor cell.
    spreadsheetRef.current.deleteImage('spreadsheet_1821633465_0_overlay_picture__5', 'A3');
  };
  

  return (
  <div>
      <button onClick={onDeleteById}>Delete Image by id</button>
      <SpreadsheetComponent ref={spreadsheetRef} created={onCreated} allowImage={true}>
      </SpreadsheetComponent>
  </div>
  );
}

export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);