Использование fileuploader.js в codeigniter вместе с csrf в ajax

Как использовать fileuploader.js в Codeigniter с csrf в ajax?

Я использую библиотеку images_crud http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-codeigniter/

я продолжаю получать

The action you have requested is not allowed.

Добавлено..

Я добавил метод create в контроллер:

/**
 * pages form
 */
public function create(){

    if(!isset($this->data['output'])){
        $this->data = array_merge($this->data, 
                        array(  'output'    => '' , 
                                'js_files'  => array() , 
                                'css_files' => array()
                            )
                        );
    }


    //-------------------------
    //for file uploading
    $image_crud = new image_CRUD();

    $image_crud->set_primary_key_field('id');
    $image_crud->set_url_field('filename');
    $image_crud->set_table('news')
        ->set_image_path('public/documents');

    $output = $image_crud->render();

    $this->data['output']=$output->output;
    $this->data['js_files']=$output->js_files;
    $this->data['css_files']=$output->css_files;
    //-------------------------


    //display
    $this->load->view('templates/admin_header');
    $this->load->view('admin/index.php');
    $this->load->view('admin/create_pages.php', $this->data);
    $this->load->view('templates/admin_footer');
}

И create_pages в поле зрения:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<?php echo validation_errors()?>

<?php 
foreach($css_files as $file): ?>
<link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>
<?php foreach($js_files as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

<?php echo form_open(site_url('admin/pages/save'),array('style'=>'width:700px;'))?>

<label>
    Title
    <input type='text' name='title' value='<?php echo @$title?>' />
</label>
<br/>

content :
<textarea name="content" id="content" >
    <?php echo @$content?>
</textarea>
<br/>

<?php echo $output?>

<input type='submit' name='submit' value='save' />
</form>

Я добавил image_crud.php и image_moo.php в библиотеку.

Я получаю 500 Internal Server Error с URL-адресом http://example.com/mole/pages/create/upload_file?qqfile=1355936206.9151.jpg

которым я хотел быть http://example.com/mole/admin/pages/create/upload_file?qqfile=1355936206.9151.jpg

Я не уверен, почему fileuploader.js использует другой URL для загрузки.

Добавлено

Что ж, я не внес больших изменений в кодировку, доступную на http://www.web-and-development.com/image-crud-an-automatic-multiple-image-uploader-for-codeigniter/

$(function(){
<?php if ( ! $unset_upload) {?>
    createUploader();
<?php }?>
    loadColorbox();
});
function loadColorbox()
{
$('.color-box').colorbox({
    rel: 'color-box'
});
}
function loadPhotoGallery(){
$.ajax({
    url: '<?php echo $ajax_list_url?>',
    dataType: 'text',
    data:$('input[type=hidden]').eq(1).prop('name')+':'+$('input[type=hidden]').eq(1).prop('value'),
    beforeSend: function()
    {
        $('.file-upload-messages-container:first').show();
        $('.file-upload-message').html("<?php echo $this->l('loading');?>");
    },
    complete: function()
    {
        $('.file-upload-messages-container').hide();
        $('.file-upload-message').html('');
    },
    success: function(data){
        $('#ajax-list').html(data);
        loadColorbox();
    }
});
}
function createUploader(){
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader-demo1'),
            template: '<div class="qq-uploader">' +
                '<div class="qq-upload-drop-area"><span><?php echo $this->l("upload-drop-area");?></span></div>' +
                '<div class="qq-upload-button"><?php echo $this->l("upload_button");?></div>' +
                '<ul class="qq-upload-list"></ul>' +
                '</div>',
            fileTemplate: '<li>' +
                '<span class="qq-upload-file"></span>' +
                '<span class="qq-upload-spinner"></span>' +
                '<span class="qq-upload-size"></span>' +
                '<a class="qq-upload-cancel" href="#"><?php echo $this->l("upload-cancel");?></a>' +
                '<span class="qq-upload-failed-text"><?php echo $this->l("upload-failed");?></span>' +
                '</li>',
            action: '<?php echo $upload_url?>',
            debug: true,
            onComplete: function(id, fileName, responseJSON){
                loadPhotoGallery();
            }
        });
}
function saveTitle(data_id, data_title)
{
    $.ajax({
        url: '<?php echo $insert_title_url; ?>',
        type: 'post',
        data: {primary_key: data_id, value: data_title},
        beforeSend: function()
        {
            $('.file-upload-messages-container:first').show();
            $('.file-upload-message').html("<?php echo $this->l('saving_title');?>");
        },
        complete: function()
        {
            $('.file-upload-messages-container').hide();
            $('.file-upload-message').html('');
        }
        });
}

person maan81    schedule 12.01.2013    source источник
comment
Я использовал его раньше. но вам нужно опубликовать свой код, чтобы мы могли помочь :)   -  person mamdouh alramadan    schedule 12.01.2013
comment
Да, опубликуйте свой клиентский код. Как кто-то может помочь в противном случае?   -  person Ray Nicholus    schedule 12.01.2013
comment
Куда именно вы отправляете токен csrf на сервер? Это работает без включенного csrf?   -  person mallix    schedule 12.01.2013


Ответы (2)


тут у вас две проблемы.

Во-первых: вам нужно установить токен csrf при каждом запросе ajax. что просто.

Во-вторых: вам необходимо установить токен csrf для загрузки. что невозможно.

Но уверен, у вас есть другие альтернативы здесь. НЕ волнуйтесь!.

каждый метод, такой как редактирование заголовка или удаление и т. д., вы можете решить это следующим образом:

в вашем list.php в самом начале:

    $this->set_css('assets/image_crud/css/fileuploader.css');
    $this->set_css('assets/image_crud/css/photogallery.css');
    $this->set_css('assets/image_crud/css/colorbox.css');

    $this->set_js('assets/image_crud/js/jquery-1.8.2.min.js');
    $this->set_js('assets/image_crud/js/jquery-ui-1.9.0.custom.min.js');
    $this->set_js('assets/image_crud/js/fileuploader.js');
    $this->set_js('assets/image_crud/js/jquery.colorbox-min.js');
    $CI =& get_instance(); // create codeigniter reference instance.

Затем:

function saveTitle(data_id, data_title)
{
        $.ajax({
            url: '<?php echo $insert_title_url; ?>',
            type: 'post',
            data: {primary_key: data_id, value: data_title,
            '<?php echo $CI->security->get_csrf_token_name(); ?>':'<?php echo $CI->security->get_csrf_hash(); ?>'},
            beforeSend: function()
            {
                $('.file-upload-messages-container:first').show();
                $('.file-upload-message').html("<?php echo $this->l('saving_title');?>");
            },
            complete: function()
            {
                $('.file-upload-messages-container').hide();
                $('.file-upload-message').html('');
            }
            });
}

простое решение. просто добавив csrf_token_name и csrf_hash_value.

теперь для второй проблемы я сказал, что это невозможно, потому что qq.fileuploader использует $_GET, а не $_POST, поэтому свойство params, которое они предлагают, просто добавляет аргумент получения для you, которые не будут анализироваться методом csrf_verify(). как это решить: просто зайдите в свой config/config.php и добавьте в его конец следующий код:

if(stripos($_SERVER["REQUEST_URI"],'/upload_file') === FALSE)
{
    $config['csrf_protection'] = TRUE;
}
else
{
    $config['csrf_protection'] = FALSE;
} 

который отключит проверку загрузки csrf для вас (она будет отключена только при загрузке) и снова включит ее при следующем запросе.

Я проверил этот код, и он работает на 100%. :)

Обновление: основная проблема заключается в том, что разработчик image_crud не учел многочастный закодированный запрос (как я вижу из новых результатов). и он использует старую версию fineuploader. проблема решена в fineuploader 3.0+, но еще не в image_crud, что создает проблемы при использовании многокомпонентного кодированного запроса.

Надеюсь, что помог.

person mamdouh alramadan    schedule 13.01.2013
comment
qq.fileuploader не отправляет запросы GET. Никогда не было, никогда не будет. Наличие параметров в строке запроса не означает, что запрос является запросом GET. qq.fileUploader отправляет запросы POST. Способ решить вторую проблему — перейти на более новую версию кода загрузчика, где у пользователей есть возможность отправлять все параметры исключительно в теле запроса. - person Ray Nicholus; 13.01.2013
comment
Я уверен, что читал это в обсуждении на github. и я проверил это. и я могу предоставить вам вывод параметров. @RayNicholus - person mamdouh alramadan; 13.01.2013
comment
Я поддерживаю этот проект. qq.fileUploader не отправляет запросы GET. - person Ray Nicholus; 13.01.2013
comment
@RayNicholus - одна минута, и я опубликую для тебя образ. одну минуту :) - person mamdouh alramadan; 13.01.2013
comment
@RayNicholus - /images_examples/example4/ - person mamdouh alramadan; 13.01.2013
comment
вот как это выглядит, когда вы добавляете параметры :) - person mamdouh alramadan; 13.01.2013
comment
@RayNicholus - еще кое-что. здесь вы можете найти отличное обсуждение, поддерживающее мой ответ :) - person mamdouh alramadan; 13.01.2013
comment
Похоже, вы думаете, что метод запроса можно определить, просто взглянув на URL-адрес. Это неправильно. Также похоже, что вы думаете, что глобальный $_GET в PHP используется для анализа параметров для запросов GET. Это также неверно. Это, по-видимому, распространенное заблуждение. Я объяснил, как работают $_GET и $_POST в PHP другому пользователю, загружающему файлы, в этот пост здесь. Почитайте. - person Ray Nicholus; 13.01.2013
comment
и image_crud OP, использующий встроенный параметр paramsInBody = false. если вы превратите его в истину. вам нужно полностью переписать image_crud, чтобы он соответствовал проблеме многокомпонентного кодирования. - person mamdouh alramadan; 13.01.2013
comment
давайте продолжим это обсуждение в чате - person mamdouh alramadan; 13.01.2013

Автор image_crud только что выпустил новую версию, в которой используется последняя версия Fine Uploader. Проблемы с IE и другие проблемы, с которыми вы могли столкнуться, должны быть исправлены в новейшей версии. Теперь вы сможете использовать токены csrf без минимальной перенастройки.

person Ray Nicholus    schedule 27.01.2013