Mixing
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!
javascript reactjs express react-router
asked Nov 22 '18 at 5:23
R.RomeroR.Romero
2719
add a comment |
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!
javascript reactjs express react-router
asked Nov 22 '18 at 5:23
R.RomeroR.Romero
2719
add a comment |
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!
javascript reactjs express react-router
asked Nov 22 '18 at 5:23
R.RomeroR.Romero
2719
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
javascript reactjs express react-router
asked Nov 22 '18 at 5:23
R.RomeroR.Romero
2719
asked Nov 22 '18 at 5:23
R.RomeroR.Romero
2719
asked Nov 22 '18 at 5:23
R.RomeroR.Romero
2719
asked Nov 22 '18 at 5:23
R.RomeroR.Romero
2719
asked Nov 22 '18 at 5:23
R.RomeroR.Romero
2719
2719
add a comment |
add a comment |
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>
answered Nov 22 '18 at 10:50
Gabriele PetrioliGabriele Petrioli
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
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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>
answered Nov 22 '18 at 10:50
Gabriele PetrioliGabriele Petrioli
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
add a comment |
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>
answered Nov 22 '18 at 10:50
Gabriele PetrioliGabriele Petrioli
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
add a comment |
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>
answered Nov 22 '18 at 10:50
Gabriele PetrioliGabriele Petrioli
151k23200257
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>
answered Nov 22 '18 at 10:50
Gabriele PetrioliGabriele Petrioli
151k23200257
answered Nov 22 '18 at 10:50
Gabriele PetrioliGabriele Petrioli
151k23200257
answered Nov 22 '18 at 10:50
Gabriele PetrioliGabriele Petrioli
151k23200257
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
add a comment |
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
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
