symfony 4.3 and Dropzone rename and show/delete existing files - php

Question

I'm trying to implement an image upload for my application.
My issues:
- I tried all I could find online, but I am not able to rename the file before uploading. The file name on the server is always a hash or so.
- I think that the thumbnail creation is not working, because I have to add a css to have the image in 120px width.
- When removing one file it is not deleted.
Can anyone please explain how to realise that?
here my sources:
the template:
edit.html.twig
{% extends 'layout.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('includes/dropzone/min/basic.min.css') }}"/>
{% endblock %}
{% block tron %}
<h2>{{component}} edit - {{ entity.monitorId|default(entity.id) }}</h2>
{% endblock %}
{% block body %}
<div class="row">
<div class="col-sm-8">
{{ form_start(form, {'attr': {'id': 'infomonitore_form' } }) }}
{{ form_errors(form) }}
{{ form_row(form.detail) }}
{{ form_row(form.notizen) }}
<div class="form-group row">
<label class="col-form-label col-sm-2">
Files to add:
</label>
<div class="col-sm-10">
<div action="{{ oneup_uploader_endpoint('gallery', {id: entity.id}) }}" class="dropzone js-reference-dropzone" style="min-height: 100px">
</div>
</div>
</div>
<button type="submit" id="buttonSubmit" class="btn btn-primary">Update</button>
Show
{{ form_end(form) }}
</div>
<div class="col-sm-4">
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script type="text/javascript" src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('includes/dropzone/dropzone.js') }}"></script>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function () {
var dropzone = new Dropzone('.js-reference-dropzone', {
autoProcessQueue: false,
dictMaxFilesExceeded: 'Only 5 Image can be uploaded',
acceptedFiles: 'image/*',
maxFilesize: 10, // in Mb
addRemoveLinks: true,
maxFiles: 5,
resizeWidth: 1920,
paramName: 'file',
renameFile: function (file) {
let newName = $('#InfomonitoreFormType_monitorId').val() + '-' + new Date().getTime() + '.' + file.name.split('.').pop();
file.name = newName;
return file.renameFilename = newName;
},
params: {
infomonitor: $('#InfomonitoreFormType_monitorId').val()
},
init: function () {
console.log(this.files);
{% for image in entity.images %}
var mockFile = {name: "{{ image.imageFile }}", size: 12345, dataURL: "{{ asset('locations/')~image.imageFile }}",accepted: true};
this.files.push(mockFile);
this.emit("addedfile", mockFile);
//this.createThumbnailFromUrl(mockFile, mockFile.dataURL);
this.emit("thumbnail", mockFile, mockFile.dataURL)
this.emit("complete", mockFile);
{% endfor %}
this.on("success", function (file, response) {
console.log("Success wurde aufgerufen");
//e.preventDefault();
$('#infomonitore_form').submit();
});
this.on("error", function (tmp) {
console.log('error');
console.log(tmp);
});
}
});
$('#buttonSubmit').click(function(e){
if(dropzone.getQueuedFiles().length > 0) {
e.preventDefault();
dropzone.processQueue();
}
});
});
</script>
{% endblock %}
and here my uploadListener (oneupUploader used):
class UploadListener
{
/* #var EntityManager $manager*/
private $manager;
/* #var InfomonitoreRepository $infomonitor */
private $infomonitor;
/**
* UploadListener constructor.
* #param EntityManager $manager
* #param InfomonitoreRepository $infomonitor
*/
public function __construct(EntityManager $manager, InfomonitoreRepository $infomonitor)
{
$this->manager = $manager;
$this->infomonitor = $infomonitor;
}
public function onUpload(PostPersistEvent $event)
{
$request = $event->getRequest();
/* #var Infomonitore $monitorId */
$monitorId = $this->infomonitor->find($request->get('infomonitor'));
/* #var File $file */
$file = $event->getFile();
$fileName = $monitorId->getMonitorId().'-'.time().'.'.$file->guessExtension();
$image = new Image();
$image->setImageFile(basename($file));
$image->setImageName($fileName);
$image->setInfomonitor($monitorId);
try {
$this->manager->persist($image);
$this->manager->flush();
} catch (ORMException $e) {
print_r($e);
}
// if everything went fine
$response = $event->getResponse();
$response['success'] = true;
return $response;
}
}
Thanks in advance.

Answer 1

you should use a custom namer in oneupuploaderbundle mapping configuration