php - How to use blueimp jquery file upload in kohana?

184

I would like to use blueimp jquery file upload with kohana framework, but can't implement it properly. I have controller with index action with upload handler initialization like this:

 class Controller_Ajax_Jfupload extends Controller_Ajax {

        public function action_index() {
            $upload_handler = new UploadHandler();
        }

    }

UploadHandler.php is copied to /Controller folder. I created view with html given in example file. But is not working at all. I do not know where to put url pointing on my upload controller.

643

Answer

Solution:

There are many methods: this is my Method

public function action_index() {
//no render the body of page : error json
        $this->auto_render=false; 
        error_reporting(E_ALL | E_STRICT);
        require('UploadHandler.php');
        $upload_handler = new UploadHandler();
    }

Don't forget this script in your page:

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
  <tr >
    <td>
      <span ></span>
    </td>
    <td>
      <p >{%=file.name%}</p>
      <strong ></strong>
    </td>
    <td>
      <p >Processing...</p>
      <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div ></div></div>
    </td>
    <td>
      {% if (!i && !o.options.autoUpload) { %}
        <button disabled>
          <i ></i>
          <span>Start</span>
        </button>
      {% } %}
      {% if (!i) { %}
        <button >
          <i ></i>
          <span>Cancel</span>
        </button>
      {% } %}
    </td>
  </tr>
{% } %}
</script>
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
  <tr >
    <td>
      <span >
        {% if (file.thumbnailUrl) { %}
          <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
        {% } %}
      </span>
    </td>
    <td>
      <p >
        {% if (file.url) { %}
          <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
        {% } else { %}
          <span>{%=file.name%}</span>
        {% } %}
      </p>
      {% if (file.error) { %}
        <div><span >Error</span> {%=file.error%}</div>
      {% } %}
    </td>
    <td>
      <span >{%=o.formatFileSize(file.size)%}</span>
    </td>
    <td>
      {% if (file.deleteUrl) { %}
        <button data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
          <i ></i>
          <span>Delete</span>
        </button>
        <input type="checkbox" name="delete" value="1" >
      {% } else { %}
        <button >
          <i ></i>
          <span>Cancel</span>
        </button>
      {% } %}
    </td>
  </tr>
{% } %}
</script>

  $(function() {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
      // Uncomment the following to send cross-domain cookies:
      //xhrFields: {withCredentials: true},
      url: 'yourUrl' (in this case index)
    });

    // Enable iframe cross-domain access via redirect option:


    if (window.location.hostname === 'blueimp.github.io') {
      // Demo settings:

      $('#fileupload').fileupload('option', {
        url: '//jquery-file-upload.appspot.com/',
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        maxFileSize: 5000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
      });
      // Upload server status check for browsers with CORS support:
      if ($.support.cors) {
        $.ajax({
          url: '//jquery-file-upload.appspot.com/',
          type: 'HEAD'
        }).fail(function() {
          $('<div />')
              .text('Upload server currently unavailable - ' +
              new Date())
              .appendTo('#fileupload');
        });
      }
    } else {

      // Load existing files:
      $('#fileupload').addClass('fileupload-processing');

      $.ajax({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]

      }).always(function() {
        $(this).removeClass('fileupload-processing');
      }).done(function(result) {
        alert('done')
        $(this).fileupload('option', 'done')
            .call(this, $.Event('done'), {result: result});
      });
    }

  });

</script>

People are also looking for solutions to the problem: javascript - Could someone clarify this code snippet for me?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question