Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

A failed upload from a file drop or paste leaves a stuck "Loading..." block

Ouverte
  • Quelque chose ne va pas ?
#3,246 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@nperez0111 y travaille déjà.

Depuis le 23/10/2026.

  • #3247 par @nperez0111 — ouverte

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
À l'abandon
Stack technique
react, typescript
Domaine
frontend, full-stack

Piste de recherche

The report identifies handleFileInsertion, editor.uploadFile, and editor.updateBlock, but gives no file path or test name. Start by locating handleFileInsertion and tracing the drop and paste upload flow. Reproduce with uploadFile resolving to an empty string and with a rejected promise; done means a failed upload no longer leaves a Loading block and rejections are handled. An open linked pull request (#3247) already addresses this issue.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

needs-triage
What’s broken?

When uploadFile fails for a file that was dropped or pasted into the editor, the inserted file block keeps showing "Loading..." forever. The user has to delete it by hand.

handleFileInsertion inserts a file block, awaits editor.uploadFile(file, blockId) and then always calls editor.updateBlock(blockId, { props: { url } }).

  • If uploadFile resolves with "" to report a failure, the props don't change, so the block doesn't render again. Its vanilla render replaced the "Add file" button with .bn-file-loading-preview in onUploadStart, and nothing restores it when the upload ends.
  • If uploadFile rejects, the rejection isn't caught. updateBlock never runs, the promise rejection is unhandled, and the block stays on "Loading..." as well.

The file panel's upload tab doesn't show this, because it sets name together with url. The block renders again and offers "Add file".

What did you expect to happen?

A failed upload doesn't leave a stuck placeholder. The block is either removed or goes back to its "Add file" state, and a rejected uploadFile is caught. A documented way for uploadFile to report a failure would help too.

Steps to reproduce
  1. Create an editor whose uploadFile fails: 
    const editor = useCreateBlockNote({
  uploadFile: () => Promise.resolve(""),
});
  2. Drag any file from your computer into the editor, or paste one.
  3. A file block showing "Loading..." stays in the document.

With uploadFile: () => Promise.reject(new Error("rejected")) the block stays as well, and the console shows an unhandled promise rejection.

BlockNote version

@blocknote/core, @blocknote/react, @blocknote/mantine 0.55.0

Environment

No response

Additional context

We work around it by listening to onUploadEnd and, in a timeout after BlockNote's updateBlock, removing the block if it still renders .bn-file-loading-preview.

Contribution
  • I'd be interested in contributing a fix for this issue
Sponsor
  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖
Langage dominant
TypeScript
Étoiles
10.3k
Forks
780
Merge moyen
3 j 6 h
PR mergées (30 j)
48

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TypeCellOS/BlockNote

Toutes les issues de TypeCellOS/BlockNote

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.