How to upload an image and get its metadata using "metaplex-foundation/js"

Question

I want to upload a picture through a browser, get metadata and make an NFT.

After I uploaded the image and received a response from

await toMetaplexFileFromBrowser(fileImg.data)

{
  buffer: Uint8Array(6872) [137, 80, 78, …]
  contentType: "image/png"
  displayName: "Screenshot_2.png"
  extension: "png"
  fileName: "Screenshot_2.png"
  tags: []
  uniqueName: "075RzPsJyNXOGvKA6HGI"
}

I want to get the metadata, but when call

await metaplex.storage().upload(file)

I get the error

this._stream.destroy is not a function

in file /node_modules/@bundlr-network/client/src/common/s2ai.ts
(HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

• I use a test wallet: 589M771bHzjH5au7sUBUpntzsia8RpUJQKP8oTzyu7x9
• sometimes transactions are created, I get tx_id, but the error remains

My code

<script setup>
  import { reactive } from "vue";

  import { Metaplex, keypairIdentity, bundlrStorage, toMetaplexFileFromBrowser } from "@metaplex-foundation/js";
  import { Connection, Keypair } from "@solana/web3.js";

  const QUICKNODE_RPC = 'https://dark-autumn...'
  const connection = new Connection(QUICKNODE_RPC);

  const secret = [216,164,1, ...];
  const fromWallet = Keypair.fromSecretKey(new Uint8Array(secret));

  const fileImg = reactive({
    data: null
  })

  let metaplex = Metaplex.make(connection)
    .use(keypairIdentity(fromWallet))
    .use(bundlrStorage({
      address: "https://devnet.bundlr.network",
      providerUrl: QUICKNODE_RPC,
      timeout: 60000,
    }),
  );

  const createNFT = async () => {
    const file = await toMetaplexFileFromBrowser(fileImg.data)
    console.log(file);

    const imageUri = await metaplex.storage().upload(file);
    console.log(imageUri);
  }

  const uploadImg = (file) => {
    fileImg.data = file.target.files[0]
  }
</script>

<template>
  <input type="file" name="" id="" @change="uploadImg">
  <button @click="createNFT()">CreateNFT</button>
</template>