Какое значение из input type=file передавать на сервер?

Question

[Александр Князев]

Работаю с компонентом https://github.com/greena13/react-simple-file-input.
Мне нужно передать загруженный в форму файл на сервер. Событие onload компонента получает два аргумента - event и File.
Если посмотреть на объект event - в нем есть строка, которая представляет из себя наш закодированный файл:

А объект File содержит различную информацию о нашем файле. Мы может также получить этот объект, если повесим обработчик на onChange.

Вопрос: что мне следует записывать в value этого инпута, т.е. что в результате должно передаваться на сервер в качестве файла?

Answer 1

[davidnum95]

File и записывай.
Action отправки файла (для thunk):

function uploadFile(file) {
  return () => {
    const data = new FormData();
    data.append('file', file);
    return api.post('url', data);
  };
}

Answer 2

[askhat]

File это специальный тип Blob ~ MDN

Вы можете использовать объект File в качестве аргумента метода #sendXMLHttpRequest, чтобы отправить его в теле POST запроса. Например:

function eventHandler (event) {
  const file = event.files[0];
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/someroute', true)
  xhr.onreadystatechange = function () {
    if (xhr.status === 200) {
      console.log(xhr.reponseText);
    }
  }
}
xhr.send(file);