Question

Recently discovered an issue while trying to upload files in Safari. I get the same issue in Safari 10.0.3 on macOS 10.12.3 as I do in mobile Safari on iOS 10.3.1. This code works perfectly in both Google Chrome and IE, but hangs indefinitely in Safari.

Also worth noting: the FormData posts successfully in Safari when there isn't a file(s) attached.

Here is my JSX/HTML:

<Button bsStyle="primary" onClick={() => this.refs.selectFiles.click()}>
   Browse <input style={{ display: 'none' }} ref="selectFiles" type="file" onChange={this.handleAttachments} accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.pdf,.xcf" multiple />
</Button>

Here is my client-side networking code:

export function createAction(action, files) {
const data = new FormData();
for (var prop in action) {
  data.append(prop, action[prop]);
}
if (files) {
  for (let i = 0; i < files.length; i++) {
    data.append(files[i].name, files[i]);
  }
}

return fetch('api/actions', {
  credentials: 'include',
  headers: { 'Accept': 'application/json', "Content-Type": "multipart/form-data" },
  method: 'post',
  body: data
});
}

Here is how the files are handled on the server:

function insertActionAndComment(req, res) {
  if (req.files) {
  funcs = req.files.map(file => {
    return db.proc('dbo.InsertAttachment', request => {
      request.addParameter('ID', TYPES.NVarChar, id);
      request.addParameter('Name', TYPES.NVarChar, file.fieldname);
      request.addParameter('File', TYPES.VarBinary, file.buffer);
    });
  });
  }
  //Other processing code

  Promise.all(funcs)
    .then(() => {
  //Send notification email, etc

  res.status(201);
  res.end();
  })
  .catch(error => {
    console.error(error);
  });
}

router.route('/')
.post(upload.any(), insertActionAndComment)

I've found that imgur has implemented this functionality perfectly in their mobile site on Safari.

Here is an example of the FormData for the image in a POST on their site:

------WebKitFormBoundaryvnoeYeAi7QAdnoE1
Content-Disposition: form-data; name="image"; filename="image.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryvnoeYeAi7QAdnoE1--

And here's an example of the FormData from my file 'POST':

------WebKitFormBoundaryobH1qsBmUuSGQHiX
Content-Disposition: form-data; name="Screen Shot 2017-04-11 at 4.16.54 
PM.png"; filename="Screen Shot 2017-04-11 at 4.16.54 PM.png"
Content-Type: image/png


------WebKitFormBoundaryobH1qsBmUuSGQHiX--

Answer 1

经过大量研究，我发现Safari在Windows身份验证方面效果不佳，这就是我的问题的原因。

如果可以，请转到IIS管理器并从Windows身份验证切换到基本身份验证，文件应成功上传。

React/Node File Upload Fails in Safari

1 个答案: