Question 73498 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Include resume for download on click – Reactjs

I added resume pdf file to react asset folder so it could be download on click.
it works fine on a local server when I run npm start but its doesn’t work when its built through AWS amplify. can you please tell me what Im doing wrong?
the file downloads but says could not be opened file damaged or doesn’t recognize.Also, file size is different. downloaded file is lot smaller than original

import HRK from './Assets/HRK.png';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { Github, Linkedin, FilePerson } from 'react-bootstrap-icons';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import Resume from './Assets/Resume.pdf'

const NaviLink = () => {

  const tooltipGithub = (props) => (
      <Tooltip id="link-tooltip" style={{color:'white'}} {...props}>Github</Tooltip>
  )
  const tooltipLinkedin = (props) => (
      <Tooltip id="link-tooltip" style={{color:'white'}} {...props}>LinkedIn</Tooltip>
  )
  const tooltipResume = (props) => (
      <Tooltip id="link-tooltip" style={{color:'white'}} {...props}>Resume</Tooltip>
  )

  return (
      <Navbar bg="dark" variant="dark" sticky="top">
        <Container>
          <Navbar.Brand>
            <img
              alt="HRK"
              src={HRK}
              width="70"
              height="70"
              className="d-inline-block align-top"
              style={{borderRadius: '50px'}}
            />
          </Navbar.Brand>
        </Container>
          <Nav>
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#skills">Skills</Nav.Link>
            <Nav.Link href="#project">Project</Nav.Link>
            <Nav.Link href="#contact">Contact</Nav.Link>
            <OverlayTrigger placement='bottom' overlay={tooltipGithub}>
              <a href="https://github.com/HyungKim0105" target="_blank" rel="noreferrer">
                <Github style={{color:'white',height:'30',width:'30',marginLeft:'0.5rem',marginRight:'0.5rem'}}/>
              </a>
            </OverlayTrigger>
            <OverlayTrigger placement='bottom' overlay={tooltipLinkedin}>
              <a href="https://www.linkedin.com/in/hyungkim0105" target="_blank" rel="noreferrer">
                <Linkedin style={{color:'white',height:'30',width:'30',marginRight:'0.5rem'}}/>
              </a>
            </OverlayTrigger>
            <OverlayTrigger placement='bottom' overlay={tooltipResume}>
              <a href={Resume} download="HyungKim_Resume.pdf">
                <FilePerson style={{color:'white',height:'30',width:'30',marginRight:'2rem'}}/>
              </a>
            </OverlayTrigger>
          </Nav>
      </Navbar>
  )
}

export default NaviLink

I tried using Link in react router Dom but that just show empty page on local build.
(maybe its because Im using a icon in-between Link.)

tried to put file in public folder with href="resume.pdf" and href="/resume.pdf". Both didn’t work with or without the download.

also tried to link it my iCloud but couldn’t get that to work either.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I think the problem is with how AWS builds with GitHub. I ran npm run build on a local machine and uploaded the build folder to AWS and everything works fine. before I had opted for GitHub connected build. still not sure why it didn't work since build settings looked exactly the same.....


  2. 0

    It looks like the download availability is defined like this:

     <a href="/resume.pdf" download>

    Be sure your resume is in the same directory, or give it its respective pathname.

    Alternatively, you can use AWS S3 in AWS Amplify, by writing amplify add storage in the CLI to the project, and then obtain the file with Storage.get(). Read more about this here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search