Getting filename from React fetch call

Active3 hr before
Viewed126 times

9 Answers


How can I get the filename and call my function showFile with the filename?,That blob should contain the file name also. You can get the name like this:, Are multiple scenes filmed at the same time?

I ended up using this instead.

fetch(BASE_URL + `/example/example/pdf/${exampleId}`)
   .then(response => {
      const filename = response.headers.get('Content-Disposition').split('filename=')[1];
      response.blob().then(blob => {
         let url = window.URL.createObjectURL(blob);
         let a = document.createElement('a');
         a.href = url; = filename;;
load more v

And that's a wrap. In this guide, you learned how to upload a file with React and how to use the Fetch API to upload files. If you'd like to read more on the Fetch API and the formData API, the following resources will help:,Now add the conditional display logic to give the user details of the file.,The Fetch API can be used to implement file uploads, or you can also use a library such as Axios to implement the upload logic. Implement the onClick handler, as shown below, to handle the file upload.

1npx create-react-app <YOUR_APP_NAME>
load more v

See document and examples,Automatically Link Native Modules,rn-fetch-blob version 0.10.16 is only compatible with react native 0.60 and up. It should have been a major version bump, we apologize for the mistake. If you are not yet upgraded to react native 0.60 or above, you should remain on rn-fetch-blob version 0.10.15

npm install--save rn - fetch - blob
load more v

In our Fetch Response example (see Fetch Response live) we create a new Request object using the Request() constructor, passing it a JPG path. We then fetch this request using fetch(), extract a blob from the response using Response.blob, create an object URL out of it using URL.createObjectURL, and display this in an <img>.,Note that at the top of the fetch() block we log the response headers value to the console.,The headers read-only property of the Response interface contains the Headers object associated with the response.

var myHeaders = response.headers;
load more v


async function generateFilePath() {
   const dirs = RNFetchBlob.fs.dirs
   const demoDirectory = `${dirs.SDCardDir}/RNAndroidDownloadShare`
   const dirExist = await RNFetchBlob.fs.isDir(demoDirectory)
   if (!dirExist) {
      await RNFetchBlob.fs.mkdir(demoDirectory)
   return `${demoDirectory}/Dropbox.pdf`
load more v

In order to do so you have to get the full path to a file.,You should use getStaticProps if:,Note: You should not use fetch() to call an API route in getStaticProps. Instead, directly import the logic used inside your API route. You may need to slightly refactor your code for this approach.

notFound - An optional boolean value to allow the page to return a 404 status and page. Below is an example of how it works:

export async function getStaticProps(context) {
   const res = await fetch(`https://.../data`)
   const data = await res.json()

   if (!data) {
      return {
         notFound: true,

   return {
      props: {
      }, // will be passed to the page component as props
load more v

method (String) - HTTP request method. Default: "GET", A request can be initialized using another instance of Request in place of the URL. In that case, the URL and other options are inherited from the provided Request object. ,body (String, body types) - HTTP request body

Usage synopsis (use the argument links to find out more):

fetch(url, options).then(function(response) {
   // handle HTTP response
}, function(error) {
   // handle network error

More comprehensive usage example:

fetch(url, {
   method: "POST",
   body: JSON.stringify(data),
   headers: {
      "Content-Type": "application/json"
   credentials: "same-origin"
}).then(function(response) {
   response.status //=> number 100–599
   response.statusText //=> String
   response.headers //=> Headers
   response.url //=> String

   return response.text()
}, function(error) {
   error.message //=> String

Note that the promise won't be rejected in case of HTTP 4xx or 5xx server responses. The promise will be resolved just as it would be for HTTP 2xx. Inspect the response.status number within the resolved callback to add conditional handling of server errors to your code.

fetch(...).then(function(response) {
   if (response.ok) {
      return response
   } else {
      var error = new Error(response.statusText)
      error.response = response
      throw error
load more v

 Pretag team - issue, fix, solve, resolve

Let’s say you want to make a request to an API endpoint for a PDF or other document. There are a few ways you can do this to get the user to automatically start downloading the file.,For this we’re going to use the standard create-react-app template.,There are some caveats to using this method. Fetch is technically not fully supported in most IE and Edge browsers:

 Pretag team - issue, fix, solve, resolve

Other "getting-react" queries related to "Getting filename from React fetch call"