У меня есть кнопка «Редактировать» рядом с каждой загруженной миниатюрой на моей странице, которая вызывает модальное окно «Вольер» при нажатии. Что я хотел бы сделать, так это заменить исходный файл на FP, когда я сохраняю результат редактирования в Aviary. filepicker.saveAs не кажется правильным решением, потому что я не хочу сохранять в новый файл, я просто хочу заменить файл на FP. Документация «Сохранение обратно», похоже, не применяется, потому что в ней говорится о POST полного файла на исходный URL-адрес. В идеале я хотел бы, чтобы функция брала исходный URL-адрес и новый URL-адрес Aviary и заменяла содержимое на исходный URL-адрес.
Возможно ли это на данный момент? Спасибо!!!
Я вставил свой код здесь:
<script src='http://feather.aviary.com/js/feather.js'></script>
<script src="https://api.filepicker.io/v0/filepicker.js"></script>
<script type="text/javascript">
$(document).on('click', '.delete-image', function(e) {
var image = $(this).closest('tr').attr('data-image');
$('.modal-footer .btn-danger').remove();
$('.modal-footer').append("<button class='delete-confirmed btn btn-danger' data-image='"+image+"'>Delete</button>");
$('#myModal').modal('show');
return false;
});
$(document).on('click', '.delete-confirmed', function(e) {
e.preventDefault();
var image = $(this).attr('data-image');
var row = $("tr[data-image="+image+"]");
$('#myModal').modal('hide');
$.ajax({
url: row.attr('data-link'),
dataType: 'json',
type: 'DELETE',
success: function(data) {
if (data.success) {
row.hide();
filepicker.revokeFile(row.attr('data-fplink'), function(success, message) {
console.log(message);
});
}
}
});
return false;
});
//Setup Aviary
var featherEditor = new Aviary.Feather({
//Get an api key for Aviary at http://www.aviary.com/web-key
apiKey: '<%= AVIARY_KEY %>',
apiVersion: 2,
appendTo: ''
});
//When the user clicks the button, import a file using Filepicker.io
$(document).on('click', '.edit-image', function(e) {
var image = $(this).closest('tr').attr('data-image');
var url = $(this).closest('tr').attr('data-fplink');
$('#aviary').append("<img id='img-"+image+"'src='"+url+"'>");
//Launching the Aviary Editor
featherEditor.launch({
image: 'img-'+image,
url: url,
onSave: function(imageID, newURL) {
//Export the photo to the cloud using Filepicker.io!
//filepicker.saveAs(newURL, 'image/png');
console.log('savin it!');
}
});
});
filepicker.setKey('<%= FILEPICKER_KEY %>');
var conversions = { 'original': {},
'thumb': {
'w': 32,
'format': 'jpg'
},
};
$(document).on("click", "#upload-button", function() {
filepicker.getFile(['image/*'], { 'multiple': true,
'services': [filepicker.SERVICES.COMPUTER, filepicker.SERVICES.URL, filepicker.SERVICES.FLICKR, filepicker.SERVICES.DROPBOX, filepicker.SERVICES.IMAGE_SEARCH],
'maxsize': 10000*1024,
'conversions': conversions
},
function(images){
$.each(images, function(i, image) {
$.ajax({
url: "<%= product_images_path(@product.id) %>",
type: 'POST',
data: {image: JSON.stringify(image)},
dataType: 'json',
success: function(data) {
if (data.success) {
$('.files').append('<tr><td><img src="'+image.data.conversions.thumb.url+'"</td></tr>')
}
}
});
});
});
});