iosreactjsiphonevideobrowserstack

IOS iPhone browsers does not accept video files via upload dialog

We are using IOS file upload dialog in order to use video files with our service using react.

All video files are working in android platforms and all browsers in linux and MacOS. However, when we use video files with upload dialog in IOS IPhones such as Iphone 14 Pro Max, then the compress process starts and following that the dialog rejects the video file.

We have been debugging with browserstack using a real phone in a simulator, however no luck until this point.

When we select the file, it firstly runs a compression activity then changes the name of the file to an intermediate file name (as below, the original file name is different), and then upload procedure fails.

enter image description here

Below is the react part which triggers upload mechanism which works with every platform and operating system with exception of IOS.

export const UploadVideo = async (file, signedurl, uploading) =>
{
  let resultState = { state: '', data: {} };

  if (SERVER_STATUS !== 'localhost')
  {
    await axios({
      method: 'put',
      url: signedurl,
      data: file,
      headers: { 'Content-Type': 'application/octet-stream', },
      onUploadProgress: uploading
    }).then(function (response)
    {
      resultState.state = 'success';
    }).catch(function (error)
    {
      resultState.state = 'error';
      resultState.data.message = error.message;
      window.toastr.error(error.message);
    })
  } else resultState.state = 'success';

  return resultState;
}

enter image description here

Solution

  • The error message I notice here, OS Status error -9806 refers to, according to osstatus.com a secure transport result code. More specifically this one, on Apple's documentation

    My take here is that the system is not trusting this URL, I would suggest adding your URL to trusted domains under NSAppTransportSecurity in the Info.plist file. More info on how to do that here.

    This is not a solution I would go for for a production app tho, you might want to have a valid certificate for your production URL and app.

    Hope this helps.