Repository: excalidraw/excalidraw
File: src/components/App.tsx (TypeScript)

Code before:

        const imageElement = this.createImageElement({ sceneX, sceneY });
        this.insertImageElement(imageElement, file);
        this.initializeImageDimensions(imageElement);
        this.setState({ selectedElementIds: { [imageElement.id]: true } });

        return;
      }
    } catch (error: any) {
      return this.setState({
        isLoading: false,
        errorMessage: error.message,
      });
    }

    const libraryShapes = event.dataTransfer.getData(MIME_TYPES.excalidrawlib);
    if (libraryShapes !== "") {
      this.addElementsFromPasteOrLibrary({
        elements: JSON.parse(libraryShapes),
        position: event,
        files: null,
      });
      return;
    }

    const file = event.dataTransfer?.files[0];
    if (
      file?.type === MIME_TYPES.excalidrawlib ||
      file?.name?.endsWith(".excalidrawlib")
    ) {
      this.library
        .importLibrary(file)
        .then(() => {
          // Close and then open to get the libraries updated
          this.setState({ isLibraryOpen: false });
          this.setState({ isLibraryOpen: true });
        })
        .catch((error) =>
          this.setState({ isLoading: false, errorMessage: error.message }),
        );
      // default: assume an Excalidraw file regardless of extension/MimeType
    } else {
      this.setState({ isLoading: true });
      if (nativeFileSystemSupported) {
        try {
          // This will only work as of Chrome 86,
          // but can be safely ignored on older releases.
          const item = event.dataTransfer.items[0];
          (file as any).handle = await (item as any).getAsFileSystemHandle();
        } catch (error: any) {
          console.warn(error.name, error.message);

Review comment (suggestion):
```suggestion
    const file = event.dataTransfer?.files.item(0);
```

Code after:

        const imageElement = this.createImageElement({ sceneX, sceneY });
        this.insertImageElement(imageElement, file);
        this.initializeImageDimensions(imageElement);
        this.setState({ selectedElementIds: { [imageElement.id]: true } });

        return;
      }
    } catch (error: any) {
      return this.setState({
        isLoading: false,
        errorMessage: error.message,
      });
    }

    const libraryShapes = event.dataTransfer.getData(MIME_TYPES.excalidrawlib);
    if (libraryShapes !== "") {
      this.addElementsFromPasteOrLibrary({
        elements: JSON.parse(libraryShapes),
        position: event,
        files: null,
      });
      return;
    }

    const file = event.dataTransfer?.files.item(0);
    if (
      file?.type === MIME_TYPES.excalidrawlib ||
      file?.name?.endsWith(".excalidrawlib")
    ) {
      this.library
        .importLibrary(file)
        .then(() => {
          // Close and then open to get the libraries updated
          this.setState({ isLibraryOpen: false });
          this.setState({ isLibraryOpen: true });
        })
        .catch((error) =>
          this.setState({ isLoading: false, errorMessage: error.message }),
        );
      // default: assume an Excalidraw file regardless of extension/MimeType
    } else if (file) {
      this.setState({ isLoading: true });
      if (nativeFileSystemSupported) {
        try {
          // This will only work as of Chrome 86,
          // but can be safely ignored on older releases.
          const item = event.dataTransfer.items[0];
          (file as any).handle = await (item as any).getAsFileSystemHandle();
        } catch (error: any) {
          console.warn(error.name, error.message);