%head
  %title Sample 29 - How to use Filepicker.io to upload document and get it's URL
  %link(rel="stylesheet" type="text/css" href="/css/style.css")
  %script{:src=>'//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'}
%body
  %script{:type => 'text/javascript', :src => '//api.filepicker.io/v1/filepicker.js'}
  %h3{:style => 'text-align:center;'}
    %a{:href => '/'}GroupDocs Ruby SDK Samples
    %br/
    Sample 29 - How to use Filepicker.io to upload document and get it's URL
  .samplecontent{:style => 'padding:10px;'}
    %i This sample will show how to use Filepicker.io to upload document and get it's URL using Ruby SDK
    %br/
    %br/
    %span.documentation
      %a{:href => '/docs/sample29.html'} Builtin documentation for this sample
    %br/
    %br/
    %p
      %font{:color => 'red'} #{(defined? err) ? err : ''}
      #requestForm{:style => 'padding:20px; border:1px solid black;'}
        %p Click "Pick file" to select file which will be uploaded and shown in iframe
        %form{:name => 'gdform', :action => '/sample-29-how-to-use-filepicker-io-to-upload-document-and-get-it\'s-url', :enctype => 'multipart/form-data', :method => 'post'}
          %label{:for => 'clientId'} GroupDocs Client ID
          %br/
          %input{:type=>'text', :name=>'clientId'}
          %br/
          %label{:for => 'serverType'} Base path
          %br/
          %input{:type=>'text', :name=>'serverType', :id => 'server_type'}
          %br/
          %input{:id => 'gdButton', :type => 'filepicker', :data => {'fp-store-access' => "public", 'fp-apikey' => "AjhtkJk6rRLWQxanzZAFVz", 'fp-store-path' => "files/"}, :value => 'Upload file', :onChange => "upload(event.fpfile.url)", :style => 'display: block'}
        %span{:id => 'results_status', :style => 'color:red;display:none;' } (Please wait for ajax response)
      %div{:id => 'iframeDiv', :style => 'padding:20px; border:1px solid black; display: none;'}
        %iframe{:id=>"iframe", :frameborder=>"0", :width=>"800", :height=>"650", :src=>""}
  = partial :_others_samples

  :javascript
    function upload(url) {
                form = document.forms.gdform;
                var preLoad = document.getElementById("results_status");
                preLoad.style.display = "block";
                document.getElementById("gdButton").style.display = "none";
                xhttp=new XMLHttpRequest();
                xhttp.onreadystatechange= function() {
                    if (xhttp.readyState==4 && xhttp.status==200){
                        result = eval( "("+xhttp.responseText+")" );
                        iframe = result.iframe;
                        error = result['error'];
                        if (iframe != null) {
                              var button = document.getElementById("gdButton").style.display = "block";
                              var preLoad = document.getElementById("results_status");
                                  preLoad.style.display = "none";
                              var iframeDiv = document.getElementById("iframeDiv");
                              var iframeShow = document.getElementById("iframe");
                                  iframeShow.setAttribute("src", iframe);
                                  iframeDiv.style.display = "block";
                        } else if (error != null) {
                              var message = '<span style="color:red;>' + error + '</span>';
                                  iframe.style.display = "block";
                        }
                    }
                }
                xhttp.open('POST','/sample29',true);
                xhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                var str= 'url=' + url + '&basePath=' + document.forms.gdform.server_type.value + '&clientId=' + document.forms.gdform.client_id.value;
                xhttp.send(str);
          }