I have an ajax function that posts an image, which works perfectly in Chrome and Firefox. Safari and iOS Safari both balk at it, though.

I'm creating and appending the value like this:

var ajaxImage = new FormData();
ajaxImage.append('file-0', $('.some-file-input')[0].files[0]);

I then call this image later, using ajaxImage.entries() to init the iterator for the FormData object, so that I can perform a validation on it. However, in Safari ajaxImage.entries() throws an entries is not a function TypeError.

I guess I could just do the validation before getting to this point as a workaround, but now it's bugging me so I wanted to see if anyone could shed some light on this.

Thanks!

I have an ajax function that posts an image, which works perfectly in Chrome and Firefox. Safari and iOS Safari both balk at it, though.

I'm creating and appending the value like this:

var ajaxImage = new FormData();
ajaxImage.append('file-0', $('.some-file-input')[0].files[0]);

I then call this image later, using ajaxImage.entries() to init the iterator for the FormData object, so that I can perform a validation on it. However, in Safari ajaxImage.entries() throws an entries is not a function TypeError.

I guess I could just do the validation before getting to this point as a workaround, but now it's bugging me so I wanted to see if anyone could shed some light on this.

Thanks!

• javascript
• ios
• ajax
• safari

Share Improve this question Follow asked Dec 7, 2016 at 22:47 Jonathan BowmanJonathan Bowman 1,64611 gold badge1212 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Unfortunately, Safari doesn't support this part of the specification: https://developer.mozilla/en-US/docs/Web/API/FormData#Browser_patibility, specifically the entries method.

I haven't tried it myself, but perhaps a polyfill like this one: https://github./francois2metz/html5-formdata might work?

But yes, you might be right -- doing validation before that point might be worth it.

I solved this by conditionally (if Safari is the browser) iterating through the elements property of the form. For all other browser, my wrapper just iterates through FormData entries(). The end result of my function, in either case, is a simple javascript object (JSON) which amounts to name/value pairs. That object can be passed directly to the data property of the JQuery ajax function (with contentType and processData not specified).

function FormDataNameValuePairs(FormName)
{
  var FormDaytaObject={};
  var FormElement=$('#'+FormName).get(0);

  if (IsSafariBrowser())
  {
    var FormElementCollection=FormElement.elements;
    //console.log('namedItem='+FormElementCollection.namedItem('KEY'));
    var JQEle,EleType;
    for (ele=0; (ele < FormElementCollection.length); ele++)
    {
      JQEle=$(FormElementCollection.item(ele));
      EleType=JQEle.attr('type');

      // https://github./jimmywarting/FormData/blob/master/FormData.js
      if ((! JQEle.attr('name')) ||
          (((EleType == 'checkbox') || (EleType == 'radio')) &&
           (! JQEle.prop('checked'))))
        continue;
      FormDaytaObject[JQEle.attr('name')]=JQEle.val();
    }
  }
  else
  {
    var FormDayta=new FormData(FormElement);
    for (var fld of FormDayta.entries())
      FormDaytaObject[fld[0]]=fld[1];
  }

  return FormDaytaObject;
}

where IsSafariBrowser() is implemented by whatever your favorite method is, but I chose this:

function IsSafariBrowser()
{
  var VendorName=window.navigator.vendor;
  return ((VendorName.indexOf('Apple') > -1) &&
          (window.navigator.userAgent.indexOf('Safari') > -1));
}

Example usage with an ajax call:

var FormDaytaObject=FormDataNameValuePairs('FiltersForm');

$.ajax({url: 'AJAXDoSomethingWithFilters/',
        method: 'POST',
        data: FormDaytaObject,
        dataType: 'text',
        success: function(data)
                 {
                   console.log('AJAXDoSomethingWithFilters success:'+data);
                 },
        error: function(JQXhr,Status,Err)
               {
                 console.log('AJAXDoSomethingWithFilters error:'+Err);
               }
       });