twentyhq/twenty · error · Error

Failed to upload file "${fileNameForError}": ${errorMessage}

Error message

Failed to upload file "${fileNameForError}": ${errorMessage}

What it means

Thrown by useUploadFilesFieldFile (useUploadFilesFieldFile.ts:30-44) when the underlying file upload call rejects. The hook first enqueues an error snack bar with a user-facing message, then re-throws a more detailed Error containing the file name and String(error). This surfaces the failure to the form so the field can mark itself errored.

Source

Thrown at packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/hooks/useUploadFilesFieldFile.ts:39

      const fileName = file.name;
      enqueueSuccessSnackBar({
        message: t`File "${fileName}" uploaded successfully`,
      });

      return {
        fileId: uploadedFile.id,
        label: file.name,
        extension: DEFAULT_VALUE_BEFORE_SERVER_RESPONSE,
        url: DEFAULT_VALUE_BEFORE_SERVER_RESPONSE,
      };
    } catch (error) {
      const fileNameForError = file.name;
      const errorMessage = String(error);
      enqueueErrorSnackBar({
        message: t`Failed to upload "${fileNameForError}"`,
      });

      throw new Error(
        t`Failed to upload file "${fileNameForError}": ${errorMessage}`,
      );
    }
  };

  return { uploadFile };
};

View on GitHub (pinned to 1f5dd2bbd2)

Solutions

1. Inspect the inner errorMessage (String(error)) — it carries the underlying cause.
2. Validate file size/type on the client before uploading.
3. Confirm the upload endpoint is reachable and auth token is valid.
4. Add retry with backoff for transient network failures.

Example fix

// before
<input type="file" onChange={(e) => uploadFile(e.target.files?.[0]!)} />
// after
const file = e.target.files?.[0];
if (file && file.size <= MAX_SIZE && ALLOWED_TYPES.has(file.type)) {
  uploadFile(file);
} else {
  enqueueErrorSnackBar({ message: t`File not allowed` });
}

const MAX_SIZE = 10 * 1024 * 1024;
const ALLOWED_TYPES = new Set(['image/png', 'image/jpeg', 'application/pdf']);
if (file.size > MAX_SIZE || !ALLOWED_TYPES.has(file.type)) {
  enqueueErrorSnackBar({ message: t`File too large or unsupported type` });
  return;
}
await uploadFile(file);

const isAllowedFile = (f: File): boolean =>
  f.size <= MAX_SIZE && ALLOWED_TYPES.has(f.type);

try {
  await uploadFile(file);
} catch (err) {
  // hook already enqueues a snack bar; mark the field errored here
  setFieldError(fieldName, t`Upload failed`);
}

When it happens

Trigger: Calling uploadFile(file) where the awaited upload promise rejects (network failure, 4xx/5xx from the upload endpoint, file too large, unsupported type, auth failure).

Common situations: File exceeds server size limit; network interruption during upload; expired auth token on the upload endpoint; unsupported MIME type; CORS on the upload endpoint; disk/storage failure server-side.

Related errors

• Field ${fieldMetadata.name} is missing, please refresh the p
• Failed to create record
• No date fields for calendar
• Failed to merge records
• createFileUpload mutation did not return an upload target

AI-assisted analysis of twentyhq/twenty@1f5dd2bbd2 (2026-08-12). Data as JSON: /api/errors/fa2d40d881db73af. Report an issue: GitHub.