Downloading a File from Expressr with React Router












0















I have this route on my server.js



app.get('/api/users/download/:id', auth, admin, (req, res) => {
const file = path.resolve(".") + `/uploads/${req.params.id}`;
res.download(file)
})


And this is a part of my component in React (using CRA)



class AddFile extends Component {
showFileList = () => (
this.state.files ?
this.state.files.map((item,i)=>(
<li key={i}>
<Link to={`/api/users/download/${item}`} target="_blank">
{item}
</Link>
</li>
))
:null
)
}

render() {
return (
<div>
{this.showFileList()}
</div>
);
}
export default AddFile;


Theses are some of my routes



const Routes = () => {
return(
<Layout>
<Switch>
<Route path="/admin/add_file" exact component={Auth(AddFile, true)}/>
<Route component={Auth(PageNotFound)}/>
</Switch>
</Layout>
)
}


When I click on the li item it takes me to the 404 not found route, when it should take me to the route I'm handling in Express and download the file,BUT clearly is caught by react router first and displays me the "Not Found" page I have created,can it be something related to the proxy on package.json?



  "proxy": "http://localhost:5000"


Thank you!










share|improve this question



























    0















    I have this route on my server.js



    app.get('/api/users/download/:id', auth, admin, (req, res) => {
    const file = path.resolve(".") + `/uploads/${req.params.id}`;
    res.download(file)
    })


    And this is a part of my component in React (using CRA)



    class AddFile extends Component {
    showFileList = () => (
    this.state.files ?
    this.state.files.map((item,i)=>(
    <li key={i}>
    <Link to={`/api/users/download/${item}`} target="_blank">
    {item}
    </Link>
    </li>
    ))
    :null
    )
    }

    render() {
    return (
    <div>
    {this.showFileList()}
    </div>
    );
    }
    export default AddFile;


    Theses are some of my routes



    const Routes = () => {
    return(
    <Layout>
    <Switch>
    <Route path="/admin/add_file" exact component={Auth(AddFile, true)}/>
    <Route component={Auth(PageNotFound)}/>
    </Switch>
    </Layout>
    )
    }


    When I click on the li item it takes me to the 404 not found route, when it should take me to the route I'm handling in Express and download the file,BUT clearly is caught by react router first and displays me the "Not Found" page I have created,can it be something related to the proxy on package.json?



      "proxy": "http://localhost:5000"


    Thank you!










    share|improve this question

























      0












      0








      0








      I have this route on my server.js



      app.get('/api/users/download/:id', auth, admin, (req, res) => {
      const file = path.resolve(".") + `/uploads/${req.params.id}`;
      res.download(file)
      })


      And this is a part of my component in React (using CRA)



      class AddFile extends Component {
      showFileList = () => (
      this.state.files ?
      this.state.files.map((item,i)=>(
      <li key={i}>
      <Link to={`/api/users/download/${item}`} target="_blank">
      {item}
      </Link>
      </li>
      ))
      :null
      )
      }

      render() {
      return (
      <div>
      {this.showFileList()}
      </div>
      );
      }
      export default AddFile;


      Theses are some of my routes



      const Routes = () => {
      return(
      <Layout>
      <Switch>
      <Route path="/admin/add_file" exact component={Auth(AddFile, true)}/>
      <Route component={Auth(PageNotFound)}/>
      </Switch>
      </Layout>
      )
      }


      When I click on the li item it takes me to the 404 not found route, when it should take me to the route I'm handling in Express and download the file,BUT clearly is caught by react router first and displays me the "Not Found" page I have created,can it be something related to the proxy on package.json?



        "proxy": "http://localhost:5000"


      Thank you!










      share|improve this question














      I have this route on my server.js



      app.get('/api/users/download/:id', auth, admin, (req, res) => {
      const file = path.resolve(".") + `/uploads/${req.params.id}`;
      res.download(file)
      })


      And this is a part of my component in React (using CRA)



      class AddFile extends Component {
      showFileList = () => (
      this.state.files ?
      this.state.files.map((item,i)=>(
      <li key={i}>
      <Link to={`/api/users/download/${item}`} target="_blank">
      {item}
      </Link>
      </li>
      ))
      :null
      )
      }

      render() {
      return (
      <div>
      {this.showFileList()}
      </div>
      );
      }
      export default AddFile;


      Theses are some of my routes



      const Routes = () => {
      return(
      <Layout>
      <Switch>
      <Route path="/admin/add_file" exact component={Auth(AddFile, true)}/>
      <Route component={Auth(PageNotFound)}/>
      </Switch>
      </Layout>
      )
      }


      When I click on the li item it takes me to the 404 not found route, when it should take me to the route I'm handling in Express and download the file,BUT clearly is caught by react router first and displays me the "Not Found" page I have created,can it be something related to the proxy on package.json?



        "proxy": "http://localhost:5000"


      Thank you!







      javascript reactjs express react-router






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 22 '18 at 5:23









      R.RomeroR.Romero

      2719




      2719
























          1 Answer
          1






          active

          oldest

          votes


















          1














          Some testing (https://codesandbox.io/s/8ykx3j88v0) shows that you can use




          • <Link to="/some-file" download target="_self">..</Link>

          • a regular <a href="/some-file" download>...</a>






          share|improve this answer
























          • I doesnt work, the browser "downloads a file" (not taking me to a new route like before though) but with a message something like: "Error: no files". Also, the route in express is not triggered (its not showing my console.logs). Looks like it still being handled in the browser, because it downloads an empty file instead of the file from the server.

            – R.Romero
            Nov 23 '18 at 4:54













          • @R.Romero open the developer tools in your browser, go to the Network tab and then click on the button in your app and see if a network request is registered on the Network tab. If nothing registers there then it is handled by the react/browser. If on the other hand it appears then the issue is with the backend (check the url that is logged if it is the correct and check if it completes or if it fails)

            – Gabriele Petrioli
            Nov 23 '18 at 9:13






          • 1





            It works now, I think it was something related to the proxy of Create React App, I moved my project to a newer version (v2+) and setup the proxy using the http proxy middlware library in a file called setupProxy.js with the following: const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api/', { target: 'localhost:5000' })); }; it now works thank you btw!

            – R.Romero
            Nov 23 '18 at 15:07













          • @R.Romero glad you got it sorted out.

            – Gabriele Petrioli
            Nov 23 '18 at 15:27











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424369%2fdownloading-a-file-from-expressr-with-react-router%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          Some testing (https://codesandbox.io/s/8ykx3j88v0) shows that you can use




          • <Link to="/some-file" download target="_self">..</Link>

          • a regular <a href="/some-file" download>...</a>






          share|improve this answer
























          • I doesnt work, the browser "downloads a file" (not taking me to a new route like before though) but with a message something like: "Error: no files". Also, the route in express is not triggered (its not showing my console.logs). Looks like it still being handled in the browser, because it downloads an empty file instead of the file from the server.

            – R.Romero
            Nov 23 '18 at 4:54













          • @R.Romero open the developer tools in your browser, go to the Network tab and then click on the button in your app and see if a network request is registered on the Network tab. If nothing registers there then it is handled by the react/browser. If on the other hand it appears then the issue is with the backend (check the url that is logged if it is the correct and check if it completes or if it fails)

            – Gabriele Petrioli
            Nov 23 '18 at 9:13






          • 1





            It works now, I think it was something related to the proxy of Create React App, I moved my project to a newer version (v2+) and setup the proxy using the http proxy middlware library in a file called setupProxy.js with the following: const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api/', { target: 'localhost:5000' })); }; it now works thank you btw!

            – R.Romero
            Nov 23 '18 at 15:07













          • @R.Romero glad you got it sorted out.

            – Gabriele Petrioli
            Nov 23 '18 at 15:27
















          1














          Some testing (https://codesandbox.io/s/8ykx3j88v0) shows that you can use




          • <Link to="/some-file" download target="_self">..</Link>

          • a regular <a href="/some-file" download>...</a>






          share|improve this answer
























          • I doesnt work, the browser "downloads a file" (not taking me to a new route like before though) but with a message something like: "Error: no files". Also, the route in express is not triggered (its not showing my console.logs). Looks like it still being handled in the browser, because it downloads an empty file instead of the file from the server.

            – R.Romero
            Nov 23 '18 at 4:54













          • @R.Romero open the developer tools in your browser, go to the Network tab and then click on the button in your app and see if a network request is registered on the Network tab. If nothing registers there then it is handled by the react/browser. If on the other hand it appears then the issue is with the backend (check the url that is logged if it is the correct and check if it completes or if it fails)

            – Gabriele Petrioli
            Nov 23 '18 at 9:13






          • 1





            It works now, I think it was something related to the proxy of Create React App, I moved my project to a newer version (v2+) and setup the proxy using the http proxy middlware library in a file called setupProxy.js with the following: const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api/', { target: 'localhost:5000' })); }; it now works thank you btw!

            – R.Romero
            Nov 23 '18 at 15:07













          • @R.Romero glad you got it sorted out.

            – Gabriele Petrioli
            Nov 23 '18 at 15:27














          1












          1








          1







          Some testing (https://codesandbox.io/s/8ykx3j88v0) shows that you can use




          • <Link to="/some-file" download target="_self">..</Link>

          • a regular <a href="/some-file" download>...</a>






          share|improve this answer













          Some testing (https://codesandbox.io/s/8ykx3j88v0) shows that you can use




          • <Link to="/some-file" download target="_self">..</Link>

          • a regular <a href="/some-file" download>...</a>







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 22 '18 at 10:50









          Gabriele PetrioliGabriele Petrioli

          151k23200257




          151k23200257













          • I doesnt work, the browser "downloads a file" (not taking me to a new route like before though) but with a message something like: "Error: no files". Also, the route in express is not triggered (its not showing my console.logs). Looks like it still being handled in the browser, because it downloads an empty file instead of the file from the server.

            – R.Romero
            Nov 23 '18 at 4:54













          • @R.Romero open the developer tools in your browser, go to the Network tab and then click on the button in your app and see if a network request is registered on the Network tab. If nothing registers there then it is handled by the react/browser. If on the other hand it appears then the issue is with the backend (check the url that is logged if it is the correct and check if it completes or if it fails)

            – Gabriele Petrioli
            Nov 23 '18 at 9:13






          • 1





            It works now, I think it was something related to the proxy of Create React App, I moved my project to a newer version (v2+) and setup the proxy using the http proxy middlware library in a file called setupProxy.js with the following: const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api/', { target: 'localhost:5000' })); }; it now works thank you btw!

            – R.Romero
            Nov 23 '18 at 15:07













          • @R.Romero glad you got it sorted out.

            – Gabriele Petrioli
            Nov 23 '18 at 15:27



















          • I doesnt work, the browser "downloads a file" (not taking me to a new route like before though) but with a message something like: "Error: no files". Also, the route in express is not triggered (its not showing my console.logs). Looks like it still being handled in the browser, because it downloads an empty file instead of the file from the server.

            – R.Romero
            Nov 23 '18 at 4:54













          • @R.Romero open the developer tools in your browser, go to the Network tab and then click on the button in your app and see if a network request is registered on the Network tab. If nothing registers there then it is handled by the react/browser. If on the other hand it appears then the issue is with the backend (check the url that is logged if it is the correct and check if it completes or if it fails)

            – Gabriele Petrioli
            Nov 23 '18 at 9:13






          • 1





            It works now, I think it was something related to the proxy of Create React App, I moved my project to a newer version (v2+) and setup the proxy using the http proxy middlware library in a file called setupProxy.js with the following: const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api/', { target: 'localhost:5000' })); }; it now works thank you btw!

            – R.Romero
            Nov 23 '18 at 15:07













          • @R.Romero glad you got it sorted out.

            – Gabriele Petrioli
            Nov 23 '18 at 15:27

















          I doesnt work, the browser "downloads a file" (not taking me to a new route like before though) but with a message something like: "Error: no files". Also, the route in express is not triggered (its not showing my console.logs). Looks like it still being handled in the browser, because it downloads an empty file instead of the file from the server.

          – R.Romero
          Nov 23 '18 at 4:54







          I doesnt work, the browser "downloads a file" (not taking me to a new route like before though) but with a message something like: "Error: no files". Also, the route in express is not triggered (its not showing my console.logs). Looks like it still being handled in the browser, because it downloads an empty file instead of the file from the server.

          – R.Romero
          Nov 23 '18 at 4:54















          @R.Romero open the developer tools in your browser, go to the Network tab and then click on the button in your app and see if a network request is registered on the Network tab. If nothing registers there then it is handled by the react/browser. If on the other hand it appears then the issue is with the backend (check the url that is logged if it is the correct and check if it completes or if it fails)

          – Gabriele Petrioli
          Nov 23 '18 at 9:13





          @R.Romero open the developer tools in your browser, go to the Network tab and then click on the button in your app and see if a network request is registered on the Network tab. If nothing registers there then it is handled by the react/browser. If on the other hand it appears then the issue is with the backend (check the url that is logged if it is the correct and check if it completes or if it fails)

          – Gabriele Petrioli
          Nov 23 '18 at 9:13




          1




          1





          It works now, I think it was something related to the proxy of Create React App, I moved my project to a newer version (v2+) and setup the proxy using the http proxy middlware library in a file called setupProxy.js with the following: const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api/', { target: 'localhost:5000' })); }; it now works thank you btw!

          – R.Romero
          Nov 23 '18 at 15:07







          It works now, I think it was something related to the proxy of Create React App, I moved my project to a newer version (v2+) and setup the proxy using the http proxy middlware library in a file called setupProxy.js with the following: const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use(proxy('/api/', { target: 'localhost:5000' })); }; it now works thank you btw!

          – R.Romero
          Nov 23 '18 at 15:07















          @R.Romero glad you got it sorted out.

          – Gabriele Petrioli
          Nov 23 '18 at 15:27





          @R.Romero glad you got it sorted out.

          – Gabriele Petrioli
          Nov 23 '18 at 15:27




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53424369%2fdownloading-a-file-from-expressr-with-react-router%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

          SQL update select statement

          'app-layout' is not a known element: how to share Component with different Modules