File download via link

[micha149]

Hey.

My API provides an endpoint for a simple file download. Its behavior is just the one from the binary response recipe. In my app I just have simple links pointing to the endpoint like <a href="https://my.api.com/path/to/binary/endpoint" target="_blank">. But a click on these links isn't intercepted by msw. Is there a way to get this working?

Best regards,
Michael

[kettanaito]

Hey, @micha149.

The request your link makes is a navigation request. Such navigation requests are bypassed by design:

msw/src/mockServiceWorker.js

Lines 246 to 249 in 3ea2534

	// Bypass navigation requests.
	if (request.mode === 'navigate') {
	return
	}

Intercepting navigation requests may lead to all sorts of unpredictable behavior and must be avoided alongside static assets interception (like the initial HTML/CSS/JS of the page).

I can also see that what you're doing is navigating to a resource in the next tab. This may prompt the download (depending on the response), but that's not the only way to initiate an in-browser download.

Solution

To control the downloaded binary in MSW, consider making a fetch request and then constructing a data URL, or using libraries like downloadjs.

import download from 'downloadjs'

export default function Home() {
  const handleDownload = () => {
    fetch('/resource').then((blob) => {
      download(blob, 'file.txt')
    })
  }

  return (
    <div>
      <button onClick={handleDownload}>Download me</button>
    </div>
  )
}

// handlers.js
import { rest } from 'msw'

export const handlers = [
  rest.get('/resource', (req, res, ctx) => {
    const content = 'hello world'

    return res(
      ctx.set({
        'Content-Disposition': 'attachment',
        'Content-Length': content.length,
      }),
      ctx.text(content)
    )
  }),
]

[micha149]

Previously I often used FileSaver.js, but I noticed that it downloads the whole file in background and then popup the actual „downloading behavior” of the browser which is immediately finished. So the user will never see the browsers download indicator on large files. Instead I need to implement it on my own and this feels a little redundant when there's a default behavior. So I came back to the plain old link in previous projects.

[kettanaito]

I suggest trying downloadjs. I've used it on a small text file, so that's not objective, but it may behave differently from FileSaver.

Plain links can't be intercepted by MSW.