Как отправить файл и вернуть данные?

Question

[Vlad Yanukovich]

Здравствуйте дамы и господа. Нужна Ваша помощь.

Не могу понять как работать с формами в TS.

Делаю приложение для создания и чтения qr кодов. Все готово кроме последнего варианта обработки qr кода - загрузки файла.

Использую API (https://goqr.me/api/doc/read-qr-code/), ссылка на чтение qr кода, там ниже есть вариант с загрузкой файла через обычную форму HTML. Она работает, однако там идет перенаправление где уже содержится ответ на странице.

Я пытаюсь переписать это все с использованием state. Мои действия: через инпут я закидываю файл (обработчик onChange) и сохраняю его в стейте. Далее из стейта я забираю этот файл и кладу в тело запроса POST. ну как понимаете ничего не выходит - бэд реквеcт 400.

Ниже приложу код как я это делаю, сильно не ругайте, только недавно начал использовать TS.
Помогите решить задачу: нужно отправить фотку с qr кодом по адресу что будет в теле запроса, и можно ли как то вернуть результат и вывести его на страницу после? (без редиректа, а динамически вывести его под инпутом, например)

const [file, setFile] = useState<FileList | any | string>()  //тут хранится файл который гружу в инпут

function uploadFile(e: React.ChangeEvent<HTMLInputElement>) {  //функция обработки загрузки файла
        setFile(e.target.files[0]) //тут 0 потому что полный ответ приходит в FileList и я забираю первый элемент (единственный )
    }
 const handleSubmission = async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault()
       
		const formData = new FormData();

		formData.append('File',  file); //тут закидываю тот файл что загрузил через инпут

		await fetch('http://api.qrserver.com/v1/read-qr-code/', {
				method: 'POST',
				body: formData,
                                headers: { 'Content-Type': 'multipart/form-data' },               
			}
		)
			.then((res) => res.json())
			.then((result) => console.log(result))
			.catch((error) => console.error( error));
	};

Вот сама форма которую я пытаюсь обработать (почти не отличается от той что на сайте предложена):

<form onSubmit={handleSubmission} >

                    <input type="file" name="file" className="upload-input" id="upload-file" onChange={uploadFile}/>

                    <label className="upload-btn" htmlFor="upload-file" >   Upload your QR code  </label>              
  
                   <button type="submit">send</button>
                </form>

P.S. инпут загрузки скрыт - открываю окно загрузки по label

В этом потоке информации повторю что я пытаюсь решить:
1. Обработку и вывод информации на страницу с пост запроса.
2. сделать это все без редиректа, как происходит на примере формы html на сайте с API

надеюсь, в столь поздний час мне сможет кто-то помочь

Answer 1

[Alexandroppolus]

1) const [file, setFile] = useState< File | null >(null);
2) в документации (п. 3.2, пример к нему) есть параметр MAX_FILE_SIZE, судя по всему обязательный.
3) "file", а не "File". Сервер скорее всего чувствителен к регистру названий полей
итого:

formData.append('MAX_FILE_SIZE', '12345678'); // или сколько там
formData.append('file',  file);

4) неужели нет js-библиотеки для парсинга qr, чтобы не надо было зависеть от интернета?

Comments

[Vlad Yanukovich]

Благодарю,я уже завтра утром исправлю и проверю Ваш вариант

По поводу библиотеки - просто все находится в одном месте,не хочется кучу API использовать вот и вся причина,можно конечно было бы попробовать что-то еще, но пока остановился на таком варианте

Завтра утром отпишу Вам) благодарю ещё раз что откликнулись

[Vlad Yanukovich]

Не знаю, у меня не получилось исправить это, я наверное все таки попробую сделать с другой библиотекой, для загрузки qr. Сделаю упор на возможность использования функции без интернета. Так пожалуй даже правильнее будет

В любом случае спасибо за помощь и подсказку, почему Ваш ответ как решение)