reactjs – iOS Safari & Chrome crash and reload when I attempt to do many file uploads in React app

I am having a really bizarre subject in iOS. There is a web page in my React app the place customers can add footage to cloudinary. At any time when I choose greater than 6 pictures, the app crashes and reloads. It occurs in each Safari and Chrome.

I consider it has to do one thing with the browser cache hitting a restrict however I may very well be improper.

I used to be initially utilizing react-dropzone and thought it was a problem with the bundle so I switched to use-file-picker, the API could be very related so my code remained just about the identical. The problem saved occurring.

Earlier than doing any change, I used to be simply looping by way of the accepted recordsdata and calling a fetch (POST) for every file to add it to cloudinary. This was inside a Promise.all().

I assumed it was on account of making all of the 7+ requests on the similar time so I added a promisified setTimeout so every request is made each 650 milliseconds. Sadly this did not repair the problem both. That is once I began considering this is perhaps a browser subject.

The next snippet is the place I am at present doing the add, with the 650 milliseconds delay between calls. As soon as once more, the problem additionally occurred earlier than I added the delay between calls.

The rationale I am doing a separate fetch per file is as a result of cloudinary would not have a bulk add endpoint. They do help bulk uploads however provided that I exploit their snippet, which I do not need to use on account of its UI design.

This does not appear to be a problem with Cloudinary as I can add rather more recordsdata concurrently from my PC. Additionally, whereas debugging the iOS Safari, I do not see any failed request. The web page simply reloads and shortly exhibits a message that claims “The web page was reloaded on account of an error”. The add calls then hold indefinitely.

I hope you may assist me with this one!

    const duties = acceptedFiles.map(async (file, idx) => {
        const delay = 650 * idx;
        return new Promise(async perform (resolve) {
          const formData = new FormData();
          formData.append("file", file);
        
          formData.append("tags", userId); 

          await new Promise((res) => setTimeout(res, delay));

          const information = await fetch(
            `${course of.env.NEXT_PUBLIC_CLOUDINARY_BASE_URL}`,
            {
              technique: "POST",
              physique: formData,
            }
          ).then((r) => r.json());

          const res = information.secure_url;
          resolve(res);
        });
      });

    const guarantees = await Promise.all(duties);