IOS Safari Javascript Form data.append limiting upload because of file size

user_1102586 0
Viewed 322

I have a react app that communicates with a node server to upload a file using Multer. The app size uses a form data.append as shown below..

const data = new FormData();
data.append('file', this.state.fileData); 
        
const requestOptions = {
            method: "POST",
            body: data,
};

Later I send the form data via ajax to the node server. Via a fetch and promise.

All works really well under the following circumstances.

  1. The photo is uploaded from FireFox on my mac.
  2. The photo is uploaded from the camera roll on my iphone and I've said to use a smaller version (like 500kb)
  3. The filesize on my mac can be very very large without troubles.

WHEN IT DOESNT WORK

  1. If I select a photo from my phone and use original size
  2. If I use the camera and take a photo (instead of selecting from camera roll)

I've put an alert into the script to see if it even hits the server, and it appears it doesn't enter the fetch function when the filesize is large.

Ignore the console log and trace information below... but this is the fetch function

fetch(config().apiURL+'/capsulecontent/'+this.state.id, requestOptions)
            .then(response => {
                alert("received response"); // doesn't fire on large file upload
                if(response.status == 200)
                {
                    alert("uploaded ok");
                } else {
                    alert("error on api");
                    alert(JSON.stringify(response));
                }
            });
reactjs javascript
1 Answers

Nothing obviously wrong with your code, assuming this.state.fileData is a valid File object.

I've put an alert into the script to see if it even hits the server...

You should add more logging for when your fetch request fails. At the very least, log an error to the console:

fetch(url, opts)
    .then(response => {
        console.log("received response");
        ...
    }).catch(console.error);

There's a good chance it is hitting your server, but that the server is failing to process larger files for some reason, and is returning an error response.

  1. Check your server logs
  2. Check your network tab in developer tools to see what the response was.

For (2), you'll need to debug iOS Safari: enable Web Inspector in your phone settings, then connect it to a Mac, open Safari on the Mac, enable Developer menu via options, then you should be able to see your phone listed on that menu.

As an aside - I've seen the same issue as you (100KB+ files uploaded via fetch in iOS Safari failing) and it was due to the file stream being closed on the server for some reason. Not sure if it is an edge case with request streaming or something to do with the API framework we use, but server logging helped diagnose the issue.

user_1889260
Related