Получить файл-объект из файла Вход

Я пытаюсь использовать входной файл action-bootstrap с jquery fileupload(). С прямым jquery я бы сделал $('#fileUpload').prop('files'), чтобы передать файлы на вызов с файловой загрузкой. Тем не менее, я не знаю, как правильно получить файлы с помощью реакции-бутстрапа.

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

Ответ 1

Атрибут строки ref считается устаревшим, и, скорее всего, он будет устаревать в какой-то момент в будущем. Теперь можно сделать обратный вызов ref. Ниже я демонстрирую использование функции стрелок ES6.

Измените свой элемент ввода на:

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

Затем вы можете использовать:

const file = this.fileUpload.files[0];

И так далее.

Ответ 2

Это довольно прямолинейно; Я полностью пропустил это:

var files = this.refs.fileUpload.getInputDOMNode().files;

Ответ 3

Я решил загрузить файл как это для React-Bootstrap с помощью настраиваемой кнопки:

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>

Ответ 4

Добавляем к ответ fahad, если вы не можете использовать функцию стрелки (из-за более старой поддержки браузера или по какой-то другой причине), вы должны связать React контекст функции.

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

Ответ 5

Это сработало для меня.

let file = this.refs.fileUpload.files[0];

Ответ 6

Вы можете получить доступ к объекту файла, связав обработчик события с событием onChange входного файла HTML.

Вот быстрый пример использования функционального компонента:

import React from 'react'

function UploadForm(props) {
  return(
    <div>
      <input type="file" className="custom-file-input" id="inputGroupFile02" name="docx" onChange={setFile.bind(this)} />
      <input type="button" onClick={postFile} className="btn btn-primary" 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;