Ваш вопрос не имеет никакого отношения к Reac, так как не React, но JavaScript в целом позволяет сохранять файлы из полей в локальную базу данных и хранить их там неограниченно долго.
Сохранить файл в память можно вот так:
// Берем первый попавшийся файл из поля input:
save_file = document.querySelector('input[type="files"]').files[0];
// И сохраняем в памяти браузера до востребования:
localforage.setItem('file', save_file, function(err, val) {
console.log('Файл успешно сохранен:');
console.dir(val);
});
Обратите внимание, что у вас должна быть подключена библиотека
localForage:
<script src="localforage/dist/localforage.js"></script>
Скачать библиотеку можно с гитхаба, смотрите папку
dist.
Чтобы потом извлечь сохраненный файл, попробуйте для теста перегрузить страницу и выполнить:
localforage.getItem('file', function(err, val) {
console.log('Ранее сохраненный файл:');
console.dir(val);
});
Увидите, что он ни куда не исчез, не смотря на перезагрузку страницы, а остался в памяти.
Если возникнет необходимость потом сохраненный файл отправить на сервер, то используйте
FormData и
XHR:
// Вытаскиваем файл из памяти и шлем на сервер:
localforage.getItem('file', function(err, val) {
// Адрес для отправки файла POST-ом:
var url = 'https://qna.habr.com/q/847927';
// Создаем форму в конструкторе:
var formData = new FormData();
// Добавляем наш файл в форму:
formData.append('file', val, val.name);
// Отправляем форму на сервер:
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
alert('Запрос выполнен успешно, ответ сервера: ' + xhr.responseText);
}
else {
alert('При выполнении запроса произошла неизвестная ошибка!');
}
}
}
xhr.send(formData);
});
