Я использую Symfony2.8 с редактором изображений aviaryeditor. Сцена из того, что у меня есть с одним полем загрузки файла. Я хотел, чтобы пользователь мог загружать изображения и редактировать их (обрезка, изменение размера, эффекты), а затем загружать их на сервер. И на сервере я получаю файл. Сделайте некоторые проверки и проверки и загрузите его в мою локальную файловую систему s3.
Что я сделал до сих пор, так это то, что я разрешаю пользователю загружать изображение от пользователя и отображать загруженное изображение в форме. При нажатии на изображение всплывают редакторы, и после редактирования выдается новый URL (s3 url avairy api).
$builder
->add('media', 'file', array(
'data_class' => null,
'label' => ucfirst('Choose Domicile File'),
'attr' => array('class' => 'form-control')
)
)<div class = "form-group col-xs-5">
<label class="control-label">{{ form_label(domicileForm.media) }}</label>
<div class="text-center">
{{form_widget (domicileForm.media, {'attr': {'class': 'form-control'}})}}
</div>
<img id="blah" src="#" alt="your image"class="img-responsive img-thunmbail"onclick="return launchEditor(this.id, this.src);" />
</div>
и с JS
<script>
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#pncmisdashboard_bundle_dimicile_type_media").change(function(){
readURL(this);
});
});
</script>
<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: '43232',
apiVersion: 3,
theme: 'light', // Check out our new 'light' and 'dark' themes!
tools:'crop,resize,color,sharpness,text',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
$(imageID).attr('src', newURL);
// //copy the url to the hidden form field
// $('#pncmisdashboard_bundle_dimicile_type_media').val(newURL);
$('#pncmisdashboard_bundle_dimicile_type_media').attr('value', newURL);
img.src = newURL;
alert(imageID);
alert(newURL);
alert(imageID);},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
и после того, как API успешно вернет URL нового изображения, я устанавливаю этот URL в поле медиа (тип файла). Но этого не происходит. он сохраняет оригинальное изображение, которое было загружено первым, а не новое.
Задача ещё не решена.
Других решений пока нет …