Fetch 10MB limit problem

[sacred epoch]

Hello. Has anyone encountered the problem of uploading files larger than 10 MB through fetch [TypeError: Failed to fetch]? The tauri server refused to work with them, and I had to upload them in chunks. Maybe there is some local server setting that increases the limit because if you run the code just in the browser, fetch uploads everything without any extra hassle.

[south dust]

do you use fetch from tauri's api ?

with the http plugin ?

[sacred epoch]

This function does not upload files over 10mb
function fetchImage(url) {
fetch(url).then(response => {
return response.blob();
}).then(blob => {
const blobUrl = URL.createObjectURL(blob);
setImages(blobUrl);
}).catch(error => {
console.error("Ошибка при загрузке изображения:", error);
});
}

If you rewrite like this or fetch with chunks, it already loads.

function fetchImage(url) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';

xhr.onload = function () {
if (xhr.status === 200) {
const blob = xhr.response;
const blobUrl = URL.createObjectURL(blob);
setImages(blobUrl);
} else {
console.error(Ошибка при загрузке изображения: ${xhr.statusText});
}
};

[sacred epoch]

normal fetch in JS

[south dust]

any error in devtools ?

except the type error

[south dust]

what if you add a console log before the processing of blob ?

[sacred epoch]

Certainly! Here's the translation of your text into English:

I made a test HTML that simply fetches a PNG image larger than 15 MB and creates a blob link, and the code works just in the browser with any files and under tauri with files less than 10 MB, but there's always a problem with files larger than 10 MB.

[sacred epoch]

One moment

[south dust]

I have no idea 😅

that's weird for sure

[sacred epoch]

i have the same condition

[south dust]

why not giving a try to axios ?

it's just a syntaxic sugar over httpxml req

but with a good dx

[sacred epoch]

I'm using it specifically in the main code, and it's precisely where the problems with large files started, so I'm trying to understand what's wrong.

[south dust]

axios is a wrapper around XMLHttpRequest

did they finally add a fetch adapter ?

[sacred epoch]

but the same problem ))

[safe zenith]

i think you have to add the scope to the tauri config

"allowlist": {
   "http": {
        "scope": ["https://example.com/*"]
    }
 }

you can do this https://**/* too. but is not good.

But i'm just guessing...

[south dust]

it would be weird that request under 10MB doesn't have issues with scope

[safe zenith]

or he could try to use the tauri http client ... not the native fetch() or xhr.

I'm using the tauri client

improt { getClient } from '@tauri-apps/api/http'; // The scope above is for this API

this has also a function Body.

i use this and it works... (using the client to upload files to and other server i build)

If you need some docs here there are: https://tauri.app/v1/api/js/http/

[sacred epoch]

You'll laugh, but if you rewrite the promises with async, the error is gone.

async function fetchImage(url) {
try {
const response = await fetch(url);
const data = await response.arrayBuffer();
const blob = new Blob([data]);
const blobUrl = URL.createObjectURL(blob);
setImages(blobUrl);
} catch (error) {
console.error("Ошибка при загрузке изображения:", error);
}
}

[south dust]

it's different

here you use arrayBuffer

not blob method

[sacred epoch]

I don't understand anything, but after several tries and restarts, suddenly all the options I tried before started working. I didn't update the packages. I'm baffled...

🤷‍♂️

[safe zenith]

The first code works to but there is a async/await inside .then missing ... overall thats basic JS.... <---- MY BAD THIS IS WRONG 😄

But if you need better Performance use this "@tauri-apps/api/http" its also and http client like fetch or so but is rust....