<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:tal="http://xml.zope.org/namespaces/tal"
      xmlns:metal="http://xml.zope.org/namespaces/metal"
      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
      lang="en"
      metal:use-macro="context/main_template/macros/master"
      i18n:domain="xmldirector.plonecore">
<body>
    
    
<slot metal:fill-slot="javascript_head_slot">
    <script type="text/javascript" tal:attributes="src string:$portal_url/++resource++xmldirector.plonecore/uploadify/jquery.uploadifive.min.js"></script>
    <script type="text/javascript" tal:content="string: UPLOAD_URL = '${context/absolute_url}/@@upload-file?subpath=${request/subpath|nothing}'" />
</slot>


<slot metal:fill-slot="style_slot">
    <link rel="stylesheet" tal:attributes="href string:$portal_url/++resource++xmldirector.plonecore/uploadify/uploadifive.css" />
</slot>


<metal:main fill-slot="content-core">
  <metal:content-core define-macro="content-core">

      <fieldset>
          <legend i18n:translate="">ZIP import</legend>
          <div class="help" i18n:translate="">
              Use this form for upload a ZIP file. The ZIP file will be unzipped. The ZIP file may contain nested directories.
          </div>
          <form method="POST" tal:attributes="action string:${context/absolute_url}/connector-zip-upload" enctype="multipart/form-data">
              <div>
                  <label for="zip-file" i18n:translate="">ZIP file</label>
                  <input type="file" name="zipfile" size="60" id="zipfile" />
                  <input type="hidden" name="subpath" tal:attributes="value request/subpath | nothing" />
              </div>
              <div>
                  <input class="zip-upload" type="submit" class="context" i18n:attributes="value" value="UPLOAD" />
              </div>
          </form>
      </fieldset>

      <!-- uploadify -->    
      <fieldset>
          <legend i18n:translate="">Multi/single file upload</legend>
          <div class="help" i18n:translate="">
              Use this form uploading a single or multiple files.
          </div>
          <form id="upload-form">
              <input type="submit" id="file_upload" name="file_upload" multiple="true" />
              <input type="hidden" name="subpath" tal:attributes="value request/subpath | nothing" />
          </form>
          <div id="upload-message"></div>
      </fieldset>

      <script type="text/javascript">
        $(function() {
            $('#file_upload').uploadifive({
                buttonText: 'Upload',
                width: 100,
                multi: true,
                queueSizeLimit: 100,
                simUploadLimit: 4,
                buttonClass: 'onkopedia-button',
                uploadScript: UPLOAD_URL,
                onError: function(errorType) {
                    $('#upload-message').show().addClass('upload-error').text('Upload unsuccessfull (' + errorType + ')');    
                    setTimeout(function() {window.location.reload(true)}, 1000);
                },
                onUploadComplete: function(file, data) {
                    $('#upload-message').show().addClass('upload-ok').text('Upload successfull');    
                    setTimeout(function() {window.location.reload(true)}, 1000);
                }
            });
        });
      </script>
  </metal:content-core>
</metal:main>

</body>
</html>

