Cross-Browser Support

/**
 * Iframe transport configuration options
 */
interface IframeTransportOptions {
    /** Force iframe transport usage, default: false */
    forceIframeTransport?: boolean;
    
    /** Initial iframe src for IE, default: 'javascript:false;' */
    initialIframeSrc?: string;
    
    /** File input element for iframe uploads */
    fileInput?: JQuery;
    
    /** Parameter name for file uploads */
    paramName?: string | string[];
    
    /** Additional form data to include */
    formData?: any;
}

/**
 * Iframe transport automatically registers with jQuery AJAX
 * Transport name: 'iframe'
 * Supported data types: text, json, html, xml, script
 */

/**
 * PostMessage transport configuration options
 */
interface PostMessageTransportOptions {
    /** URL of postMessage handler window, required for cross-domain uploads */
    postMessage?: string;
    
    /** Redirect parameter name for postMessage transport */
    redirectParamName?: string;
}

/**
 * PostMessage transport automatically registers with jQuery AJAX
 * Transport name: 'postmessage'
 * Supported data types: text, json, html
 * Requires postMessage handler on target domain
 */

/**
 * XDomainRequest transport configuration
 * Automatically enabled when window.XDomainRequest exists and !$.support.cors
 * No additional configuration required - works transparently
 */

/**
 * XDomainRequest limitations:
 * - Only supports GET and POST methods
 * - Cannot send custom headers
 * - Cannot access response headers
 * - Only supports text response types
 */

/**
 * File input support detection
 * Detects mobile devices with broken file input
 */
$.support.fileInput: boolean;

/**
 * XHR file upload support
 * Detects XHR2 with ProgressEvent and FileReader support
 */
$.support.xhrFileUpload: boolean;

/**
 * XHR FormData upload support  
 * Detects native FormData API support
 */
$.support.xhrFormDataFileUpload: boolean;

/**
 * Blob slicing support
 * Required for chunked file uploads
 */
$.support.blobSlice: boolean;

/**
 * Transport selection priority:
 * 1. Native XHR with FormData (modern browsers)
 * 2. XDomainRequest (IE8/9 cross-domain)
 * 3. PostMessage (cross-domain with postMessage support)
 * 4. Iframe (fallback for all other cases)
 */

interface TransportSelection {
    /** Preferred transport for current browser/configuration */
    preferredTransport: 'xhr' | 'iframe' | 'postmessage' | 'xdr';
    
    /** Available transports in order of preference */
    availableTransports: string[];
    
    /** Reason for transport selection */
    selectionReason: string;
}

interface CrossDomainOptions {
    /** Cross-domain upload URL */
    url: string;
    
    /** Cross-domain iframe redirect URL */
    redirect?: string;
    
    /** PostMessage handler window URL */
    postMessage?: string;
    
    /** Parameter name for redirect */
    redirectParamName?: string;
    
    /** Force specific transport */
    forceIframeTransport?: boolean;
}

interface CORSConfiguration {
    /** Server must include these headers for CORS uploads */
    requiredHeaders: {
        'Access-Control-Allow-Origin': string;
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS';
        'Access-Control-Allow-Headers': 'Content-Type, Content-Range, Content-Disposition';
        'Access-Control-Expose-Headers': 'Content-Range';
    };
    
    /** For credentials (cookies) in cross-domain requests */
    xhrFields?: {
        withCredentials: boolean;
    };
}

// Automatic transport selection (recommended)
$('#fileupload').fileupload({
    url: '/upload',
    // Transport is automatically selected based on browser capabilities
});

// Force iframe transport for testing
$('#fileupload').fileupload({
    url: '/upload',
    forceIframeTransport: true,
    // Useful for testing fallback behavior in modern browsers
});

// Cross-domain upload with postMessage
$('#fileupload').fileupload({
    url: 'https://example.com/upload',
    postMessage: 'https://example.com/postmessage-handler.html',
    
    // PostMessage handler page content:
    /*
    <!DOCTYPE html>
    <html>
    <head>
        <script src="jquery.min.js"></script>
        <script src="jquery.postmessage-transport.js"></script>
    </head>
    <body>
        <script>
        // This page handles the postMessage communication
        // No additional code needed - transport handles everything
        </script>
    </body>
    </html>
    */
});

// Cross-domain upload with iframe redirect  
$('#fileupload').fileupload({
    url: 'https://example.com/upload',
    redirect: 'https://example.com/upload-redirect.html',
    redirectParamName: 'redirect',
    
    // Redirect page must return JSON result:
    /*
    <!DOCTYPE html>
    <html>
    <head>
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <script>
        // Parse JSON from server response and post to parent
        var result = <?php echo json_encode($uploadResult); ?>;
        window.parent.postMessage(JSON.stringify(result), '*');
        </script>
    </body>
    </html>  
    */
});

// CORS upload configuration
$('#fileupload').fileupload({
    url: 'https://api.example.com/upload',
    xhrFields: {
        withCredentials: true  // Include cookies in cross-domain request
    },
    
    // Server must respond with appropriate CORS headers:
    /*
    Access-Control-Allow-Origin: https://mysite.com
    Access-Control-Allow-Methods: POST, OPTIONS
    Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition
    Access-Control-Allow-Credentials: true
    */
});

// Detect browser capabilities
if ($.support.xhrFileUpload) {
    console.log('Modern XHR file upload supported');
} else if ($.support.fileInput) {
    console.log('File input supported, will use iframe transport');
} else {
    console.log('File upload not supported on this device');
}

// Chunked upload capability check
if ($.support.blobSlice) {
    $('#fileupload').fileupload({
        url: '/upload',
        maxChunkSize: 1000000, // 1MB chunks
        // Chunked uploads will work
    });
} else {
    $('#fileupload').fileupload({
        url: '/upload',
        // Files will be uploaded whole
    });
}

// Browser-specific configuration
if (navigator.userAgent.indexOf('MSIE') !== -1) {
    // Internet Explorer specific settings
    $('#fileupload').fileupload({
        url: '/upload',
        initialIframeSrc: 'javascript:false;', // Prevent IE security warnings
        forceIframeTransport: true            // Use iframe for consistent behavior
    });
} else {
    // Modern browser configuration
    $('#fileupload').fileupload({
        url: '/upload',
        maxChunkSize: 5000000  // 5MB chunks for faster uploads
    });
}

// Progressive enhancement approach
$('#fileupload').fileupload({
    url: '/upload',
    
    // Enhance based on capabilities
    add: function(e, data) {
        if ($.support.xhrFileUpload) {
            // Modern browsers: show progress, enable chunking
            data.progressInterval = 100;
            if (data.files[0].size > 10000000) { // > 10MB
                this.options.maxChunkSize = 2000000; // 2MB chunks
            }
        } else {
            // Older browsers: simple upload without progress
            $('.progress').hide();
        }
        
        data.submit();
    }
});

// Error handling for transport failures
$('#fileupload').fileupload({
    url: '/upload',
    
    fail: function(e, data) {
        if (data.textStatus === 'parsererror') {
            // Likely iframe transport parsing issue
            console.error('Upload response parsing failed - check server response format');
        } else if (data.textStatus === 'abort') {
            // Upload was cancelled
            console.log('Upload cancelled by user');
        } else {
            // Other transport or network error
            console.error('Upload failed:', data.textStatus, data.errorThrown);
        }
    }
});