Download image from Express (Back-end) using React (Front-end)
0
I have an image stored in Express server. I have been trying to download the image using the following method in a React component.
<a href=my_image_url_from_state download>Download Image</a>
But when i click on the 'Download Image' image is not downloaded. I see this error message:
I am able to display the same image in img tag, ie
<img src=my_image_url_from_state />
that means nothing wrong with URL.
Do I need to make any changes in Express to download any files?
node.js reactjs express node-modules mern
asked Nov 13 '18 at 4:38
Darshn
9261923
add a comment |
0
I have an image stored in Express server. I have been trying to download the image using the following method in a React component.
<a href=my_image_url_from_state download>Download Image</a>
But when i click on the 'Download Image' image is not downloaded. I see this error message:
I am able to display the same image in img tag, ie
<img src=my_image_url_from_state />
that means nothing wrong with URL.
Do I need to make any changes in Express to download any files?
node.js reactjs express node-modules mern
asked Nov 13 '18 at 4:38
Darshn
9261923
Can u open image url in a new tab?
– Suresh Prajapati
Nov 13 '18 at 5:09
@SureshPrajapati I hard-coded the image url. Image is opened in new tab
– Darshn
Nov 13 '18 at 5:19
Also see this notes for usingdownloadattribute correctly developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
– Suresh Prajapati
Nov 13 '18 at 5:26
add a comment |
0
0
0
I have an image stored in Express server. I have been trying to download the image using the following method in a React component.
<a href=my_image_url_from_state download>Download Image</a>
But when i click on the 'Download Image' image is not downloaded. I see this error message:
I am able to display the same image in img tag, ie
<img src=my_image_url_from_state />
that means nothing wrong with URL.
Do I need to make any changes in Express to download any files?
node.js reactjs express node-modules mern
asked Nov 13 '18 at 4:38
Darshn
9261923
I have an image stored in Express server. I have been trying to download the image using the following method in a React component.
<a href=my_image_url_from_state download>Download Image</a>
But when i click on the 'Download Image' image is not downloaded. I see this error message:
I am able to display the same image in img tag, ie
<img src=my_image_url_from_state />
that means nothing wrong with URL.
Do I need to make any changes in Express to download any files?
node.js reactjs express node-modules mern
node.js reactjs express node-modules mern
asked Nov 13 '18 at 4:38
Darshn
9261923
asked Nov 13 '18 at 4:38
Darshn
9261923
asked Nov 13 '18 at 4:38
Darshn
9261923
asked Nov 13 '18 at 4:38
Darshn
9261923
asked Nov 13 '18 at 4:38
Darshn
9261923
9261923
Can u open image url in a new tab?
– Suresh Prajapati
Nov 13 '18 at 5:09
@SureshPrajapati I hard-coded the image url. Image is opened in new tab
– Darshn
Nov 13 '18 at 5:19
Also see this notes for usingdownloadattribute correctly developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
– Suresh Prajapati
Nov 13 '18 at 5:26
add a comment |
Can u open image url in a new tab?
– Suresh Prajapati
Nov 13 '18 at 5:09
@SureshPrajapati I hard-coded the image url. Image is opened in new tab
– Darshn
Nov 13 '18 at 5:19
Also see this notes for usingdownloadattribute correctly developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
– Suresh Prajapati
Nov 13 '18 at 5:26
Can u open image url in a new tab?
– Suresh Prajapati
Nov 13 '18 at 5:09
Can u open image url in a new tab?
– Suresh Prajapati
Nov 13 '18 at 5:09
@SureshPrajapati I hard-coded the image url. Image is opened in new tab
– Darshn
Nov 13 '18 at 5:19
@SureshPrajapati I hard-coded the image url. Image is opened in new tab
– Darshn
Nov 13 '18 at 5:19
Also see this notes for using
download attribute correctly developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes– Suresh Prajapati
Nov 13 '18 at 5:26
Also see this notes for using
download attribute correctly developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes– Suresh Prajapati
Nov 13 '18 at 5:26
add a comment |
1 Answer
1
active
oldest
votes
0
You need to write a function and invoke it on OnClick of the download button.
<button onClick=() => download()>Download</button>
download function would be:
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
working code in reactJS class
class App extends React.Component
constructor()
super();
render()
return (
<div>
<img onClick=() => download(); src="<The URL of the image>" />
</div>
);
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
answered Nov 13 '18 at 5:14
Ashish Kirodian
765
Can you please add a working code snippet so as to make this answer more helpful.
– Suresh Prajapati
Nov 13 '18 at 5:28
@SureshPrajapati I have edited my answer and added a React class
– Ashish Kirodian
Nov 13 '18 at 5:31
@AshishKirodian thanks for writing this answer bro. But, this solution didn't work. I figured out the root cause and fixed it after referring several articles. I will post solution for it. thanks anyways :)
– Darshn
Nov 16 '18 at 8:49
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%2f53273916%2fdownload-image-from-express-back-end-using-react-front-end%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
0
You need to write a function and invoke it on OnClick of the download button.
<button onClick=() => download()>Download</button>
download function would be:
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
working code in reactJS class
class App extends React.Component
constructor()
super();
render()
return (
<div>
<img onClick=() => download(); src="<The URL of the image>" />
</div>
);
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
answered Nov 13 '18 at 5:14
Ashish Kirodian
765
Can you please add a working code snippet so as to make this answer more helpful.
– Suresh Prajapati
Nov 13 '18 at 5:28
@SureshPrajapati I have edited my answer and added a React class
– Ashish Kirodian
Nov 13 '18 at 5:31
@AshishKirodian thanks for writing this answer bro. But, this solution didn't work. I figured out the root cause and fixed it after referring several articles. I will post solution for it. thanks anyways :)
– Darshn
Nov 16 '18 at 8:49
add a comment |
0
You need to write a function and invoke it on OnClick of the download button.
<button onClick=() => download()>Download</button>
download function would be:
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
working code in reactJS class
class App extends React.Component
constructor()
super();
render()
return (
<div>
<img onClick=() => download(); src="<The URL of the image>" />
</div>
);
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
answered Nov 13 '18 at 5:14
Ashish Kirodian
765
Can you please add a working code snippet so as to make this answer more helpful.
– Suresh Prajapati
Nov 13 '18 at 5:28
@SureshPrajapati I have edited my answer and added a React class
– Ashish Kirodian
Nov 13 '18 at 5:31
@AshishKirodian thanks for writing this answer bro. But, this solution didn't work. I figured out the root cause and fixed it after referring several articles. I will post solution for it. thanks anyways :)
– Darshn
Nov 16 '18 at 8:49
add a comment |
0
0
0
You need to write a function and invoke it on OnClick of the download button.
<button onClick=() => download()>Download</button>
download function would be:
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
working code in reactJS class
class App extends React.Component
constructor()
super();
render()
return (
<div>
<img onClick=() => download(); src="<The URL of the image>" />
</div>
);
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
answered Nov 13 '18 at 5:14
Ashish Kirodian
765
You need to write a function and invoke it on OnClick of the download button.
<button onClick=() => download()>Download</button>
download function would be:
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
working code in reactJS class
class App extends React.Component
constructor()
super();
render()
return (
<div>
<img onClick=() => download(); src="<The URL of the image>" />
</div>
);
function download()
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = '<The URL of the image>';
document.body.appendChild(link);
link.click();
answered Nov 13 '18 at 5:14
Ashish Kirodian
765
edited Nov 13 '18 at 5:31
answered Nov 13 '18 at 5:14
Ashish Kirodian
765
answered Nov 13 '18 at 5:14
Ashish Kirodian
765
answered Nov 13 '18 at 5:14
Ashish Kirodian
765
765
Can you please add a working code snippet so as to make this answer more helpful.
– Suresh Prajapati
Nov 13 '18 at 5:28
@SureshPrajapati I have edited my answer and added a React class
– Ashish Kirodian
Nov 13 '18 at 5:31
@AshishKirodian thanks for writing this answer bro. But, this solution didn't work. I figured out the root cause and fixed it after referring several articles. I will post solution for it. thanks anyways :)
– Darshn
Nov 16 '18 at 8:49
add a comment |
Can you please add a working code snippet so as to make this answer more helpful.
– Suresh Prajapati
Nov 13 '18 at 5:28
@SureshPrajapati I have edited my answer and added a React class
– Ashish Kirodian
Nov 13 '18 at 5:31
@AshishKirodian thanks for writing this answer bro. But, this solution didn't work. I figured out the root cause and fixed it after referring several articles. I will post solution for it. thanks anyways :)
– Darshn
Nov 16 '18 at 8:49
Can you please add a working code snippet so as to make this answer more helpful.
– Suresh Prajapati
Nov 13 '18 at 5:28
Can you please add a working code snippet so as to make this answer more helpful.
– Suresh Prajapati
Nov 13 '18 at 5:28
@SureshPrajapati I have edited my answer and added a React class
– Ashish Kirodian
Nov 13 '18 at 5:31
@SureshPrajapati I have edited my answer and added a React class
– Ashish Kirodian
Nov 13 '18 at 5:31
@AshishKirodian thanks for writing this answer bro. But, this solution didn't work. I figured out the root cause and fixed it after referring several articles. I will post solution for it. thanks anyways :)
– Darshn
Nov 16 '18 at 8:49
@AshishKirodian thanks for writing this answer bro. But, this solution didn't work. I figured out the root cause and fixed it after referring several articles. I will post solution for it. thanks anyways :)
– Darshn
Nov 16 '18 at 8:49
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53273916%2fdownload-image-from-express-back-end-using-react-front-end%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
Can u open image url in a new tab?
– Suresh Prajapati
Nov 13 '18 at 5:09
@SureshPrajapati I hard-coded the image url. Image is opened in new tab
– Darshn
Nov 13 '18 at 5:19
Also see this notes for using
downloadattribute correctly developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes– Suresh Prajapati
Nov 13 '18 at 5:26