Download Button does not work on mobile

[stmoor]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When clicking on a button to download a file on mobile, instead of downloading the file, it downloads an html file (with the name of the actual file it is supposed to download and .html at the end), but the file download notification on Android says "No file". On iOS, it tries to go tho the html page that gets downloaded on Android.

Here is how I defined the button:

<Button
    color="inherit"
    aria-label="download resume"
    href="../../public/Stefani_Moore_Resume.pdf"
    float="left"
    component={Link}
    download="Stefani_Moore_Resume.pdf"
    startIcon={<FileDownloadIcon />}
>
    Resume
</Button>

Expected behavior 🤔

it should download the file on mobile as well.

Steps to reproduce 🕹

Steps:

1. Create a button that downloads a file:

   <Button
   color="inherit"
   aria-label="download file"
   href="[path to file to download]"
   float="left"
   component={Link}
   download="[File to download name]"
   startIcon={<FileDownloadIcon />}
   >
   Download File
   </Button>

2. Click the button from a mobile device using any browser (I used Edge on Android, and Safari on iOS)
3. Notice that on iOS, it tries to go to an html page, while on Android it downloads the html file.

Context 🔦

I am creating a professional portfolio website and a crucial button I need is to download my resume.

Your environment 🌎

npx @mui/envinfo

``` System: OS: macOS 12.5.1 Binaries: Node: 16.17.0 - /usr/local/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.15.0 - /usr/local/bin/npm Browsers: Chrome: Not Found Edge: Not Found Firefox: Not Found Safari: 15.6.1 npmPackages: @emotion/react: ^11.10.4 => 11.10.4 @emotion/styled: ^11.10.4 => 11.10.4 @mui/base: 5.0.0-alpha.96 @mui/core-downloads-tracker: 5.10.4 @mui/icons-material: ^5.10.3 => 5.10.3 @mui/lab: ^5.0.0-alpha.98 => 5.0.0-alpha.98 @mui/material: ^5.10.4 => 5.10.4 @mui/private-theming: 5.10.3 @mui/styled-engine: 5.10.4 @mui/system: 5.10.4 @mui/types: 7.2.0 @mui/utils: 5.10.3 @types/react: 18.0.19 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: 4.8.3 ```

[michaldudak]

We don't have any custom logic for the download attribute in Material UI components, so likely this isn't a bug in our project. What is this Link component you pass into the component prop? Could you try using it directly and checking if the problem still exists?

<Link
  href="[path to file to download]"
  download="[File to download name]">...

[PunitSoniME]

@stmoor

There might be the issue in the path of your file,

Try with normal HTML button to download the file, If that works then it should work with MUI Button as well

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.