[React] input태그내에서 file읽기

<Input 
  type='file' label='Upload' accept='.txt' 
  buttonAfter={uploadFileButton} 
  ref={(ref) => this.fileUpload = ref}
/>

다음과같이 ref를 사용하여 파일을 this.fileUpload에 저장하여 사용하는방법이있다.하지만공식문서에서 ref를 남발하지말라고 하였으니 조심하여 사용하자

addFile = (event: any): void => {
    console.log(event.target.files[0]);
}

<FormGroup>
    <ControlLabel htmlFor="fileUpload" style={{ cursor: "pointer" }}><h3><Label bsStyle="success">Add file</Label></h3>
        <FormControl
            id="fileUpload"
            type="file"
            accept=".pdf"
            onChange={this.addFile}
            style={{ display: "none" }}
        />
    </ControlLabel>
</FormGroup>

다음은 e.target.files를 사용한 파일접근법이다.타입스크립트를 사용하여 타입을 추가로 지정하였다

import React from 'react'

function UploadForm(props) {
  return(
    <div>
      <input type="file" name="docx" onChange={setFile.bind(this)} />
      <input type="button" onClick={postFile} value="Upload" />
    </div>
  )
  function postFile(event) {   
    // HTTP POST  
  }
  function setFile(event) {
    // Get the details of the files
    console.log(event.target.files)
  }
}

export default UploadForm;

함수형으로 사용할시 bind(this)를 해줘야 한다.

<input type="file"
      name="myFile"
      onChange={this.handleChange} />
onSubmit = (e) => {
  e.preventDefault;
  const formData = new FormData();
  formData.append({ [e.target.name]: e.target.value })
  formData.append('file', e.target.files[0]);

  axios.post({
    method:'POST',
    url:'EXPRESS JS POST REQUEST PATH',
    data: formData,
    config:{ headers: {'Content-Type':'multipart/form-data, boundary=${form._boundary}'}}
  })
  .then(res => console.log(res))
  .catch(err => console.log('Error', err))
}

formdata에 삽입하여 axios로 보내기

import * as React from "react";

export class FileSelector extends React.Component<undefined, undefined>
{
    constructor(props: any)
    {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(selectorFiles: FileList)
    {
        console.log(selectorFiles);
    }

    render ()
    {
        return <div>
            <input type="file" onChange={ (e) => this.handleChange(e.target.files) } />
        </div>;
    }
}

타입스크립트 예제