How to get a picture name in react-quill?

[Nurseit05]

How can I get the name/alt of the picture when a user uploads a photo?

Ticket due diligence

• I have verified that the issue persists under ReactQuill v2.0.0-beta.2
• I can't use the beta version for other reasons

ReactQuill version

• v2.0.0

FAQ

Is this a bug in Quill or ReactQuill?

• ReactQuill
• Quill

I get the image via DOMParser and src which is converted to File format but I set the name myself image.jpg resolve(new File([blob], 'image.jpg', { type: mime })) and the question is how can I get the name/alt when googling the image via react-quill

export const CKEditor = ({
  onChange,
  value,
  placeholder = 'Ваш рассказ',
}: Props) => {
  const quillRef = useRef<ReactQuill | null>(null)
  const [images, setImages] = useState<ImagePost[]>([])

  const handleQuillChange = useCallback(
    (content: string) => {
      extractAndHandleImages(content)
    },
    [onChange],
  )

  const extractAndHandleImages = useCallback(
    (content: string) => {
      const parser = new DOMParser()
      const doc = parser.parseFromString(content, 'text/html')
      const images = doc.querySelectorAll('img')

      images.forEach(img => {
        const imgSrc = img.src
        if (imgSrc?.startsWith('data:image/')) {
          base64ToFile(imgSrc)
            .then(file => {
              setImages(prev => [...prev, { image: file }])
            })
        }
      })
    },
    [],
  )

  const base64ToFile = useCallback((base64: string): Promise<File> => {
    return new Promise((resolve, reject) => {
      try {
        const [meta, data] = base64.split(',')
        const mime = meta.match(/:(.*?);/)?.[1] || 'image/jpeg'
        const byteCharacters = atob(data)
        const byteNumbers = new Uint8Array(
          Array.from(byteCharacters).map(char => char.charCodeAt(0)),
        )
        const blob = new Blob([byteNumbers], { type: mime })
        resolve(new File([blob], 'image.jpg', { type: mime }))
      } catch (error) {
        reject(error)
      }
    })
  }, [])

  const modules = {
    toolbar: [
      [{ header: '1' }, { header: '2' }],
      [
        { list: 'ordered' },
        { list: 'bullet' },
        { indent: '-1' },
        { indent: '+1' },
      ],
      [{ align: [] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ script: 'sub' }, { script: 'super' }],
      [{ color: [] }, { background: [] }],
      ['link', 'image', 'clean'],
    ],
  }

  const formats = [
    'header',
    'bold',
    'italic',
    'underline',
    'strike',
    'blockquote',
    'list',
    'bullet',
    'indent',
    'align',
    'link',
    'image',
    'color',
    'background',
    'script',
  ]

  return (
    <div className={s.container}>
      <ReactQuill
        ref={quillRef}
        className={s.quill}
        placeholder={placeholder}
        value={value}
        onChange={handleQuillChange}
        modules={modules}
        formats={formats}
        theme="snow"
      />
      <div>{images.map(item => item.image.name)}</div>
    </div>
  )
}