Search code examples
symfonyjquery-file-uploadoneupuploaderbundle

OneupUploaderBundle and jQuery-File-Upload on symfony 2

I've been trying this but I'm confused since I'm new to Symfony Events and stuff.

This is where I've got so far:

  • composer bundle installation
  • AppKernel.php, routing.yml, services.yml, config.yml, UploadListener.php file modifications

And it works, the file I put is actually being uploaded to the folder, and I got the status bar filling... but I need something else:

  1. somehow I need to post (and read) an item id (integer) along with the file (or to be able to set the filename when the file is being copied to the output folder)
  2. if something goes wrong with the upload, how do I send an error message back?
  3. In the example (jQuery-File-Uploader), the code returns the filename of the file that was uploaded, my code doesn't do that, I mean the code is there, but it doesn't work

I'm posting the code I have.

HTML code (here is the piece where I call the jQuery-File-Upload

<tr>
                    <td>{{ clienteCorporativo.nombreComercial|upper }}</td>
                    <td>{% if clienteCorporativo.afiliadosUploads|length == 0 %}Nunca{% else %}{{ (clienteCorporativo.afiliadosUploads|last).fecha|date('d/mmm/y') }}{% endif %}</td>
                    <td>
                        {% if clienteCorporativo.formatoExcelAfiliados == null %}
                            <span class="btn btn-success fileinput-button">
                                <i class="glyphicon glyphicon-upload"></i>&nbsp;&nbsp;&nbsp;
                                <span>Seleccionar Excel</span>
                                <input id="fileupload_{{ clienteCorporativo.id }}" class="fileupload" data-id="{{ clienteCorporativo.id }}" type="file" name="files[]" multiple>
                            </span>
                            {#<span style="color: #8c8c8c"><span class="glyphicon glyphicon-upload"></span>&nbsp; Seleccionar Excel &nbsp;&nbsp;&nbsp;</span>#}
                        {% else %}
                            <input id="fileupload_{{ clienteCorporativo.id }}" class="fileupload" type="file" name="files[]" data-url="{{ oneup_uploader_endpoint('gallery') }}" />
                            {#<a role="button" data-toggle="modal" data-target="#myModal" data-operation="loadOne" data-id="{{ clienteCorporativo.id }}"><span class="glyphicon glyphicon-upload"></span>&nbsp; Seleccionar Excel</a> &nbsp;&nbsp;&nbsp;#}
                        {% endif %}
                        <a role="button" data-toggle="modal" data-target="#myModal" data-operation="defineFormat" data-id="{{ clienteCorporativo.id }}"><span class="glyphicon glyphicon-list-alt"></span>&nbsp; Definir Formato</a> &nbsp;&nbsp;&nbsp;
                        {% if clienteCorporativo.afiliadosUploads|length == 0 %}
                            <span style="color: #8c8c8c"><span class="glyphicon glyphicon-repeat"></span>&nbsp; Revertir Última Carga &nbsp;&nbsp;&nbsp;</span>
                        {% else %}
                            <a role="button" data-toggle="modal" data-target="#myModal" data-operation="undoLast" data-id="{{ clienteCorporativo.id }}"><span class="glyphicon glyphicon-repeat"></span>&nbsp; Revertir Última Carga</a> &nbsp;&nbsp;&nbsp;
                        {% endif %}
                    </td>
                    <td>
                        <div id="progress_{{ clienteCorporativo.id }}" class="progress text-center">
                            <div class="progress-bar progress-bar-success">
                                <span id="files_{{ clienteCorporativo.id }}"></span>
                            </div>
                        </div>
                    </td>
                </tr>

js script (the "each" sentence does nothing)

<script>
    /*jslint unparam: true */
    /*global window, $ */
    var idFile = 0;
    $(function () {
        'use strict';
        // Change this to the location of your server-side upload handler:
        $('.fileupload').fileupload({
            url: '{{ oneup_uploader_endpoint('xlsfile') }}',
            dataType: 'json',
            done: function (e, data) {
                var eventTrigger = $(this)
                idFile = eventTrigger.data('id')
                $.each(data.result.files, function (index, file) {
                    $('#files_'+idFile).html(file.name);
                });
            },
            progressall: function (e, data) {
                var eventTrigger = $(this)
                idFile = eventTrigger.data('id')
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress_'+idFile+' .progress-bar').css(
                        'width',
                        progress + '%'
                );
            },
            formData: [ {"id":idFile} ]
        }).prop('disabled', !$.support.fileInput)
                .parent().addClass($.support.fileInput ? undefined : 'disabled');
        //
    });
</script>

The other files (AppKernel.php, routing.yml, services.yml, config.yml, UploadListener.php) are just like the OneupUploaderBundle documentation says (I've changed things and then rolled back since I didn't got the results I expected). I think I chew more that I could swallow on this one...

Solution

  • Your form fields will be posted with the file upload. Or you can use the form_data: {} option in your $('#myFile').fileUploader() constructor. But it will submit your form fields by default and you can handle those in the usual way. 

    $('#myFile').fileupload({
    dataType: 'json',
    formData: {
        'file_id': 1
    },

    You have to craft your own return response in your UploadListener. Then parse the results on the front-end (Javascript). 

    $response = $event->getResponse();
$response['success'] = true;
$response['files'] = [
    'file' => [
        'name' => $event->getFile()->getPathname()
    ]
];
return $response;