I've written the following code to upload a file from a web browser. It works in Firefox but not Safari, are there any obvious reasons why this might be the case.

```
// when the file field is changed I get its data and the "salonId" variable
    $("#btnFrontUpload").change(function (e){
        frontPic = e.target.files[0]
        displayPicAsBackground(frontPic, "btnFrontUploadShow")
        frontPicName = frontPic.name
        salonId=$("#salonId").val();
    });

fd = new FormData()

$("#btnNextPhotos").click(function(){
    $('#mdlPhotos').modal('hide')
        resizeAndPopulateVariables()
        doAjaxRequest()
    });

});

function updateMilliTime(){
    milliTime = (new Date).getTime()
}

function displayPicAsBackground(file, btn){
// here I display the uploaded file (which is a picture) on the screen
//  it works on most browsers including mobile safari, but not the "desktop" safari
    $.canvasResize(file,
        {
            width: 160,
            height: 0,
            crop: false,
            quality: 100,
            callback: function (data)
            {
                $('#'+btn).css("background", "url("+data+")")
            }
        });
}

function resizeAndPopulateVariables(){
// I resize the image and create a file variable for upload
    $.canvasResize(frontPic,
           {
                width: 400,
                height: 0,
                crop: false,
                quality: 100,
                callback: function (data)
           {    // Add file data
                var frontPicForUpload = $.canvasResize('dataURLtoBlob', data)
                fd.append("frontPic", frontPicForUpload)
                fd.append("frontPicName", frontPicName)
                fd.append("salonId", salonId)
           }
           });
}

function doAjaxRequest(){
// send the ajax request
    $.ajax(
          {
                url: '/create/picture',
                type: 'POST',
                data: fd,  //fd is a global variable
                dataType: 'json',
                contentType: false,
                processData: false,
                beforeSend: function (xhr)
                {
                    xhr.setRequestHeader("pragma", "no-cache");
                }
          }
          ).done(function (response){
            window.location.reload()
    });

```