react-admin FileInput组件target="_blank"属性失效问题咨询

Hey there! Let's break down why your target="_blank" attribute isn't behaving as expected with react-admin's FileInput component, and how to fix it.

This Isn't a Bug — It's a Component Design Choice #

First off, this isn't a bug in react-admin. The FileInput component handles file previews and navigation internally, and it doesn't automatically pass the target="_blank" prop to the underlying link elements by default. Here's the core reason:

• The default preview uses a custom click handler to render files in the current tab, rather than relying on native <a> tag behavior.
• The target attribute you pass directly to FileInput doesn't get propagated to the actual preview link that renders in the UI.

How to Fix It: Customize the Preview Component #

The solution is to override the default preview component with your own, where you explicitly add the target="_blank" attribute (plus the security-friendly rel="noopener noreferrer"). Here's a step-by-step example:

Step 1: Create a Custom Preview Component #

import React from 'react';

const CustomFilePreview = ({ record, source }) => {
  const fileUrl = record?.[source];
  if (!fileUrl) return null;

  // Extract filename from the URL for cleaner display
  const fileName = fileUrl.split('/').pop();

  return (
    <a 
      href={fileUrl} 
      target="_blank" 
      rel="noopener noreferrer"
      style={{ textDecoration: 'underline', color: '#1976d2' }}
    >
      {fileName}
    </a>
  );
};

Step 2: Use the Custom Preview in FileInput #

Pass your custom component to the previewComponent prop of FileInput:

import { FileInput } from 'react-admin';

// Inside your form component
<FileInput 
  source="document" 
  label="Uploaded Document"
  previewComponent={CustomFilePreview}
>
  {/* Add your file input options here (e.g., <FileField />) */}
</FileInput>

Key Notes #

• Always include rel="noopener noreferrer" with target="_blank" — this prevents security vulnerabilities where the new tab could access your parent tab's window object.
• If your file URLs require authentication (like signed cloud storage links), ensure the new tab can access them (the same auth rules apply as the current tab).

内容的提问来源于stack exchange，提问作者Paolo Guerra