Я использую Dropzone в качестве библиотеки JS для управления функцией перетаскивания, но она не работает.
Моя форма от Symfony:
{% extends 'base.html.twig' %}
{% block body%}
{{form_start (form, {'attr': {'id': 'editform', 'class': 'dropzone'}, 'action': path ('objects_edit', {'id': id, 'import': import}), 'method': 'POST'})}}
<p>Bezeichnung:</p>
<p>{{ form_widget(form.designation) }}</p>
<p>Beschreibung:</p>
<p>{{ form_widget(form.description) }}</p>
<p>Straße / Hausnummer:</p>
<p>{{ form_widget(form.street) }} {{ form_widget(form.streetnumber) }}</p>
<p>PLZ / Ort:</p>
<p>{{ form_widget(form.plz) }} {{ form_widget(form.place) }}</p>
<p>Land:</p>
<p>{{ form_widget(form.country) }}</p>
<p><button type="button" id="validator" class="btn" style="width: 100%;" onclick="parseDataToAPI();">Validieren</button><br></p>
<p>X: {{ form_widget(form.coordL) }} Y: {{ form_widget(form.coordB) }}</p>
<p>Kategorie:</p>
<p>{{ form_widget(form.category) }}</p>
<p>{{ form_widget(form.logo) }}</p>
<p>{{ form_widget(form.images) }}</p>
<p>
<div class="form-group">
<label class="col-sm-2 control-label required" for="">Images</label>
<div class="col-sm-12">
<div class="dropzone" style="width:100%; height:200px; background-color: white;"></div>
</div>
</div>
</p>
{% if import == 1 %}
<button style="width: 100%;" onclick="updateObject({{ id }}, '1');" class="btn" id="buttonupdate" disabled>{{ button_label|default('Speichern') }}</button>
{% else %}
<button style="width: 100%;" onclick="updateObject({{ id }}, '0');" class="btn" id="buttonupdate" disabled>Update</button>
{% endif %}
{{ form_end(form) }}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
// init,configure dropzone
Dropzone.autoDiscover = false;
var dropzone_default = new Dropzone(".dropzone", {
paramName: "images",
url: '{{ path('objects_edit', { 'id' : id, 'import' : 0 }) }}' ,
maxFiles: 1,
dictMaxFilesExceeded: 'Only 1 Image can be uploaded',
acceptedFiles: 'image/*',
maxFilesize: 3, // in Mb
addRemoveLinks: true,
init: function () {
this.on("maxfilesexceeded", function(file) {
this.removeFile(file);
});
this.on("sending", function(file, xhr, formData) {
// send additional data with the file as POST data if needed.
// formData.append("key", "value");
});
this.on("success", function(file, response) {
if (response.uploaded)
alert('File Uploaded: ' + response.fileName);
});
}
});
</script>
{% endblock javascripts %}
Вот так это выглядит, но я не могу выбросить туда файлы. Если я добавлю туда файлы, браузер (в моем примере Chrome) откроет файл, и я смогу его прочитать.
Поздравления
Daniel