Rikijs Rikijs - 1 month ago 24
PHP Question

Symfony 3.1 and OneUpUploaderBundle + FineUploader = UploadListener is not called

INTRODUCTION



I am developing on
Windows 10 Pro
with
XAMPP
[1] which includes
PHP v7.0.8
.



I am using Symfony v3.1.2, OneupUploaderBundle and FineUploader in order to upload files to server.

While setting things up I followed documentation of
OneUpUploaderBundle
[2] and
FineUploader
[3], [4].



PROBLEM



File upload works fine and files are uploaded to
oneup_uploader_endpoint('gallery')
.

However listener is not called and is displayed in Symfony Profiler Events section
Not Called Listeners


CODE



relevant part of
services.yml


app.upload_listener:
class: AppBundle\EventListener\UploadListener
tags:
- { name: kernel.event_listener, event: oneup_uploader.post_persist.default_uploader, method: onUpload }


my upload listener

<?php

namespace AppBundle\EventListener;

use Oneup\UploaderBundle\Event\PostPersistEvent;

class UploadListener
{
public function onUpload(PostPersistEvent $event)
{
$request = $event->getRequest();
$original_filename = $request->files->get('fineuploader')->getClientOriginalName();
echo $original_filename;
}
}


upload.html.twig

{% extends 'base.html.twig' %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" type="text/css" href="{{ asset('js/fineuploader/fine-uploader-new.css') }}" />
{% endblock %}

{% block content %}
<div class="row clearfix">
Go to: <a href="{{ path('product_list') }}">Product list</a>
</div>
<br><br>
<div id="uploader"></div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script type="text/javascript" src="{{ asset('js/fineuploader/fine-uploader.js') }}"></script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</div>
<span class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>

<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>

<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>

<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
<script type="text/javascript">
$(document).ready(function()
{
var uploader = new qq.FineUploader({
debug: true,
element: document.getElementById('uploader'),
request:
{
endpoint: "{{ oneup_uploader_endpoint('gallery') }}"
},
validation:
{
allowedExtensions: ['jpg', 'gif']
}
});
});
</script>
{% endblock %}


UPDATE




  1. Added a note about development environment.



CONCLUSION



Please advise.

Thank You for your time and knowledge.

Answer

The problem in question was caused by misconfiguration of event listeners in services.yml. Here is working configuration.

my services.yml

services:
    app.upload_listener:
        class: AppBundle\EventListener\UploadListener
        arguments: ["@doctrine.orm.entity_manager"]
        tags:
            - { name: kernel.event_listener, event: oneup_uploader.post_persist.gallery, method: onPostUpload }
            - { name: kernel.event_listener, event: oneup_uploader.post_persist.gallery, method: onUpload }

    app.upload_unique_namer:
        class: AppBundle\Uploader\Naming\UploadUniqueNamer
        arguments: ["@session"]
Comments