MultiConverter ConvertApi.com example, show how to retriew API data and convert files using client side JavaScripts

HTML

<h3>MultiConverter ConvertApi.com example, show how to retriew API data and convert files using client side JavaScripts</h3>        
<form id="form" method="post" enctype="multipart/form-data" target="iframe">

    <div id="step1">
        Step1: select source file:<br />
        <input type="file" id="file" name="File" size="0" />
    </div>

    <br />

    <div id="step2" style="display: none;">
        Step2: select destination format:<br />
        <select id="outputFormat" name='OutputFormat'>
        </select>        
        <br />
        Step3: enter api key:<br />
             <input id="apiKey" name="ApiKey" type="text" value="" /><a href="http://www.convertapi.com/prices" target="_blanks">get free if you don't have one</a>
        <br /><br />
        <input type="submit" id="submit" value="Convert" />
    </div>

    <br />

    <div id="step3" style="display: none;">
        Step3: Here is resulting url links.<br /> 
        <small>*You can choose another file or another output format to repeat convertation.</small><br /><br />
    </div>

    <input type="hidden" name="StoreFile" value="true" />
</form>

<div id="load_api" style="display: none;">
Load availiable file formats from <i><b><span></span></b></i> 
</div>

JavaScript

var convertAPIs = [
        
        'http://do.convertapi.com/PowerPoint2Pdf',
        'http://do.convertapi.com/Lotus2Pdf',
        'http://do.convertapi.com/SnapShot2Pdf',
        'http://do.convertapi.com/Image2Pdf',
        'http://do.convertapi.com/Pdf2PowerPoint',
        'http://do.convertapi.com/Xps2Pdf',
        'http://do.convertapi.com/Word2Pdf',
        'http://do.convertapi.com/RichText2Pdf',
        'http://do.convertapi.com/Publisher2Pdf',
        'http://do.convertapi.com/Excel2Pdf',
        'http://do.convertapi.com/Text2Pdf',
        'http://do.convertapi.com/OpenOffice2Pdf',
        'http://do.convertapi.com/Email2Pdf',
        
];


//Configuration map ext -> {'apiUrl' : url, 'outputFormats' : [ext1, ext2, ...]}
var convertConfig = false;


// onload :)
$(function (){
        
        if(! checkBrowser()){
            $('#step1').hide();
            alert('We use HTML5 elements for cross-domain file upload. Looks like your browser does not support this feature - open this page in more recent browser please.');
            return;
        }
        
        $('#file').change(function(){
                onFileSelect();
        });
        
        $('#form').submit(function(event){
                event.preventDefault();
                convertFile();
        });
        
 });


/**
 * Browser support check
 */
 function checkBrowser(){
           
     if(! window.FormData){
         return false;
     }
     
      if($.browser.msie && $.browser.version < 10){
           if(! XDomainRequest){
                return false;
           }
      }
      
      return true;
 }
 

/**
 * File selection handler
 * Load config if required and fill select control for step2
 */
function onFileSelect(){
    
    var filename = $('#file').val();
    var ext = filename.substr(filename.indexOf('.', filename) + 1);
    if(! ext){
        alert('Can not convert selected file: converted file should have extension');
        return;
    }
    
   ...