SonataAdminBundle + AJAX загрузка файлов.

Больше нам тут ничего не надо делать. На минуту остановимся, и пойдем по этой ссылке - https://github.com/weixiyen/jquery-filedrop. Тут нас интересует библиотека, там только один js файл, так что не промахнетесь :).

Итак. Начинается самое интересное, ибо нам необходимо реализовать Drag & Drop, давайте его и реализуем. Для этого мы сделаем следующее, в папке MyBundle/Resources/view/Admin (Если такой нет, создайте, путаницы потом меньше будет) создаем файлик шаблона twig - sonata_admin_base_layout.html.twig с таким содержимым:

// MyBundle/Resources/view/Admin/sonata_admin_base_layout.html.twig
{% extends 'SonataAdminBundle::standard_layout.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/mybundle/css/admin/style.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('bundles/mybundle/js/admin/jquery.filedrop.js') }}"></script>
    <script src="{{ asset('bundles/mybundle/js/admin/js.fileDropBlock.js') }}"></script>
    <script src="{{ asset('bundles/mybundle/js/admin/js.fileLoadByDefault.js') }}"></script>
    <script src="{{ asset('bundles/mybundle/js/admin/init.js') }}"></script>
{% endblock %}

После идем в config.yml и переопределим основной шаблон сонаты

// app/config/config.yml
sonata_admin:
    title: My Admin Panel
    templates:
        ## default global templates
        layout:  MyFolderMyBundle:Admin:sonata_admin_base_layout.html.twig

Итак, что мы сделали, мы переопределили главный шаблон сонаты, чтобы иметь возможность внедрять свои файлы в него. Вы естественно могли заменить вот эти 4 строчки:

<script src="{{ asset('bundles/mybundle/js/admin/jquery.filedrop.js') }}"></script>
<script src="{{ asset('bundles/mybundle/js/admin/js.fileDropBlock.js') }}"></script>
<script src="{{ asset('bundles/mybundle/js/admin/js.fileLoadByDefault.js') }}"></script>
<script src="{{ asset('bundles/mybundle/js/admin/init.js') }}"></script>

Эти файлы собственно живут у нас по таком пути:

MyBundle/Resources/public/js/admin/jquery.filedrop.js

MyBundle/Resources/public/js/admin/js.fileDropBlock.js

MyBundle/Resources/public/js/admin/js.fileLoadByDefault.js

MyBundle/Resources/public/js/admin/js.init.js.

На заметку, что бы все было по правильному, настоятельно рекомендую вам создать в папке public папку admin в ней создать файлы:

1. js.fileDropBlock.js
2. js.fileLoadByDefault.js
3. init.js.

Как вы могли понять первый файл из 4 это наш ранее загруженный с гита, так что не стесняемся и кидаем его в папку admin, а после делаем assets. В консоле набираем

$ app/console assets:install www --symlink если все правильно, то у вас в папке /bundle/mybundle/ должна появиться копия вашей папки public, появилась? Погнали дальше. Теперь о каждом файле по порядку. Итак, файл №1(js.fileDropBlock.js) и его код:

// MyBundle/Resources/public/js/admin/js.fileDropBlock.js
function fileDropBlock(block, type) {
    var allowType = {
        'img': ['image/jpeg', 'image/png', 'image/gif']
    };

    block.filedrop({
        url: '/upload-file', # url к которой будет происходить обращение при активации загрузки
        paramname: 'file', # параметр. По сути это атрибут name вашего input поля
        fallbackid: 'upload_button', 
        maxfiles: 1, # кол-во файлов
        maxfilesize: 2, # размер файла в mb

# Реакция на ошибки. Тут может быть что угодно
        error: function (err, file) {
            switch (err) {
                case 'BrowserNotSupported':
                    console.log('Old browser');
                    break;
                case 'FileTooLarge':
                    console.log('File Too Large');
                    break;
                case 'TooManyFiles':
                    console.log('Only 1 file can be downloader');
                    break;
                case 'FileTypeNotAllowed':
                    console.log('Wrong file type');
                    break;
                default:
                    console.log('Some error');
            }

        },
        allowedfiletypes: allowType[type], # разрешенные типы файлов для загрузки
        dragOver: function () {
            block.addClass('active-drag-block');
        },
        dragLeave: function () {
            block._removeClass('active-drag-block');
        },


        uploadFinished: function (i, file, response) {
            block.find('input[type="text"]').val(response.filePath); # в инпут поместим путь к файлу
        }
    })
}

файл №2(js.fileDropBнВyDefault.js) и его код:

// MyBundle/Resources/public/js/admin/js.LoadByDefault.js
var arrayType = {
    'img': [
        'image/png',
        'image/jpg',
        'image/jpeg'
    ],
    'pdf': [
        'application/pdf',
        'application/x-pdf'
    ]
};


function fileLoadByDefault(selector, type, block) {

    var input = document.getElementById(selector),
        formdata = false;
    input.click();
}

Не много не правда ли? :) Он нам понадобиться чуть позже. Итак, и наконец файл под номером 3 (init.js) и его код:

// MyBundle/Resources/public/js/admin/init.js
(function ($) {
    $(document).ready(function () {
        $.fn.uploadFile = function (type) {
            var blockText = {
                'img': {'text': ['Drag Image File Here'], 'name': ['img'], 'id': ['imguploadform']}
            };

            this.append('<p>' + blockText[type].text + '</p>');
            this.append('<input type="file" class="upload-file" name="' + type + 'file" id="' + type + 'uploadform" data-type="'+ blockText[type].name +'">');
            this.addClass('drag_n_drop--' + type + 'Path');
            $('input', this).hide();

            fileDropBlock(this, type);
        };

        var imgBlock = $('div', 'div[id$="_coverPath"]');
        imgBlock.uploadFile('img');

        $('input[type="file"]').on("change", function () {
            var $_this = $(this),
                type = $_this.data('type'),
                reader,
                file;
            file = this.files[0];

            if (window.FormData) {
                formdata = new FormData();
            }

            if (window.FileReader) {
                reader = new FileReader();
                reader.readAsDataURL(file);
            }

            if (formdata) {
                formdata.append("file", file);
            }

            if (!$.inArray(file.type, arrayType[type])) {
                $.ajax({
                    url: "/upload-file",
                    type: "POST",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        var userData = jQuery.parseJSON(res);
                        $_this.parent().find('input[type="text"]').val(userData.filePath);
                    }
                });
            } else {
                alert('Wrong type')
            }
        });

        imgBlock.click(function () {
            fileLoadByDefault('imguploadform', 'img', this);
        });
    });
})(jQuery);

Давайте проясним что происходит и разберем код по частям. Ранее мы имели только один инпут на странице, а нам нужна область для Drag & Drop’a.

$.fn.uploadFile = function (type) {
    var blockText = {
        'img': {
            'text': ['Drag Image File Here'], 
            'name': ['img'], 
            'id': ['imguploadform']
        }
    };

    this.append('<p>' + blockText[type].text + '</p>');
    this.append('<input type="file" class="upload-file" name="' + type + 'file" id="' + type + 'uploadform" data-type="'+ blockText[type].name +'">');
    this.addClass('drag_n_drop--' + type + 'Path');
    $('input', this).hide();

    fileDropBlock(this, type);
};

функция которая в качестве единственного параметра принимает тип документа, который мы ходим загружать (бросать) в конкретную область.

Функция приняла его и вернула нам, по сути уже новый html код. Который включает в себя абрац с текстом

this.append('<p>' + blockText[type].text + '</p>');

кнопку загрузки, она потом еще сыграет важную роль

this.append('<input type="file" class="upload-file" name="' + type + 'file" id="' + type + 'uploadform" data-type="'+ blockText[type].name +'">');

Добавляем к элементу класс, что бы понимать какой он

this.addClass('drag_n_drop--' + type + 'Path');

и скрываем все инпуты

$('input', this).hide();

Добавим красок css

// MyBundle/Resources/public/css/style.css
.drag_n_drop--imgPath{
    width: 150px;
    height: 100px;
    cursor: pointer;
    border: 2px solid #e0e0e0;
    background: #f9f9f9;
}

В конечном итоге, после всех таких манипуляций, у вас должно получиться что то похожее на это

Если так и есть, то все хорошо. :)

Далее по файлу init.js

Такой код

var imgBlock = $('div', 'div[id$="_name"]'); # выбираем целый див в котором наш инпут
imgBlock.uploadFile('img'); # к выбранному применяем функцию uploadFile

Далее вот такой небольшой кусок кода:

$('input[type="file"]').on("change", function () { # реагируем на то, что в инпуте изменилось
    var $_this = $(this),
        type = $_this.data('type'),
        reader,
        file;
    file = this.files[0]; # ловим файл из инпута типа file

    if (window.FormData) {
        formdata = new FormData(); # берем данные (это новые плюшки в версии js)
    }

    if (window.FileReader) {
        reader = new FileReader(); # читаем файл
        reader.readAsDataURL(file);
    }

    if (formdata) {
        formdata.append("file", file); # присоедениям файл в объект
    }

    if (!$.inArray(file.type, arrayType[type])) { # проверяем что тип файла какой нам надо
        $.ajax({
            url: "/upload-file", # идем по пути
            type: "POST", 
            data: formdata, # отправляем туда наши файлы
            processData: false,
            contentType: false,
            success: function (res) {
                var userData = jQuery.parseJSON(res); # парсим результат
                $_this.parent().find('input[type="text"]').val(userData.filePath); # находим наш скрытый инпут и ставим в него путь к уже закаченному файлу
            }
        });
    } else {
        alert('Wrong type'); # а иначе alert с ошибкой
    }
});

imgBlock.click(function () {
    fileLoadByDefault('imguploadform', 'img', this);
});

#MyFolder/MyBundle/Resourses/config/rounting.yml
my_file_upload:
    pattern:  /upload-file
    defaults: { _controller: MyFolderMyBundle:Default:uploadFile }

// MyFolder/MuBundle/Contraller/Default.php
<?php

namespace MyFolder\MyBundle\Controller;

use Symfony\Component\HttpFoundation\File\File;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\File\UploadedFile;

class DefaultController extends Controller
{
    public function uploadFileAction()
    {

        $filename = $_FILES['file']; # принимает наш файл
        $uploadPath = $this->upload($filename); # запускаем функцию загрузки

        /**
          * Тут думаю ясно. Обычный ответ на запрос
          */
        return null === $uploadPath
            ? new Response(json_encode(array(
                        'status' => 0,
                        'message' => 'Wrong file type'
                    )
                )
            )

            : new Response(json_encode(array(
                        'status' => 1,
                        'message' => $filename, # имя файла
                        'filePath' => $uploadPath # полный путь к нему
                    )
                )
            );
    }


    private function getFoldersForUploadFile($type)
    {
        $fileType = $this->returnExistFileType($type); #метод возвращающюй тип файлов которые можно грузить

        if ($fileType !== null) {
            return array(
                'root_dir' => $this->container->getParameter('upload_' . $fileType . '_root_directory'), # полный путь к папке с картинкой
                'dir' => $this->container->getParameter('upload_' . $fileType . '_directory'), # отосительный путь к папке
            );
        } else {
            return null;
        }
    }

    # метод возвращает ключ(тип) файла который будет закачиваться
    private function returnExistFileType($type)
    {
        $typeArray = array(
            'img' => array(
                'image/png',
                'image/jpg',
                'image/jpeg',
            ),
            'pdf' => array(
                'application/pdf',
                'application/x-pdf',
            )
        );

        foreach ($typeArray as $key => $value) {
            if (in_array($type, $value)) {
                return $key;
            }
        }

        return null;
    }

    # Тут собственно все и происходит. Загрузка, присвоение имени, перемещение в папку
    private function upload($file)
    {
        $filePath = $this->getFoldersForUploadFile($file['type']);

        if (null === $this->getFileInfo($file['name']) || $filePath === null) {

            return null;
        }
        $pathInfo = $this->getFileInfo($file['name']);
        $path = $this->fileUniqueName() . '.' . $pathInfo['extension'];
        $this->uploadFileToFolder($file['tmp_name'], $path, $filePath['root_dir']);

        unset($file);
        return $filePath['dir'] . DIRECTORY_SEPARATOR . $path;
    }

    # возвращает всю информацию о загруженном фале (что бы это не было)
    private function getFileInfo($file)
    {

        return $file !== null ? (array)pathinfo($file) : null;
    }

    # формирует уникальное имя
    private function fileUniqueName()
    {

        return sha1(uniqid(mt_rand(), true));
    }
    
    # перемещает файл в необходимую папку
    private function uploadFileToFolder($tmpFile, $newFileName, $rootFolder)
    {
        $e = new File($tmpFile);
        $e->move($rootFolder, $newFileName);
    }

// app/config/config.yml
parameters:
   upload_img_root_directory: %kernel.root_dir%/../web/upload/img
   upload_img_directory: upload/img