I have an Edit button next to each uploaded thumbnail on my page that summons the Aviary modal upon click. What I'd like to do is replace the original file on FP when I save the outcome of editing in Aviary.
filepicker.saveAs doesn't seem like the right solution because I don't want to save to a new file, I just want to replace the file on FP.
The "Saving Back" documentation doesn't seem to apply because it says to POST a full file to the original URL. Ideally I'd like to just have a function take the original url and the new Aviary URL and replace the contents at the original URL.
Is this possible at the moment? Thanks!!!
I've pasted my code here:
<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>')
}
}
});
});
});
});
You actually can POST a url to the filepicker url as well, for example
curl -X POST -d "url=https://www.filepicker.io/static/img/watermark.png"
https://www.filepicker.io/api/file/gNw4qZUbRaKIhpy-f-b9
or in javascript
$.post(fpurl, {url: aviary_url}, function(response){console.log(response);});
Related
I am using file uploader to upload the document using cmis connection.
I have created a destination in neo trial account.
Also i am making an ajax call to upload the rest of data to the document as a service.
view.xml
FileUploader id="fileUploader" name="myFileUpload" uploadUrl="/cmis/4f1abc71a1788bc6c05f54a5/root" width="400px" tooltip="Upload your file to the local server" uploadComplete="handleUploadComplete" change='onChangeDoc'/>
controller.js
var BASE64_MARKER = 'data:' + file.type + ';base64,';
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(evt) {
var base64Index = evt.target.result.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = evt.target.result.substring(base64Index);
var data = {
'propertyId[0]': 'cmis:objectTypeId',
'propertyValue[0]': 'cmis:document',
'propertyId[1]': 'cmis:name',
'propertyValue[1]': file.name,
'cmisaction': 'createDocument',
'documentInputStream': base64
};
var formData = new FormData();
jQuery.each(data, function(key, value) {
formData.append(key, value);
});
$.ajax({
type: 'POST',
url: '/cmis/4f1abc71a1788bc6c05f54a5/root',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response) {
sap.m.MessageToast.show("File Uploaded Successfully");
},
error: function(error) {
sap.m.MessageToast.show("File Uploaded Unsuccessfully");
}
});
};
})(file);
reader.readAsDataURL(file);
The document is uploaded but the content is not being uploaded.
Error:
{ exception: "constraint", message: "No content available: objectid =
px7goMt94zMxekyiUqQQBPWQd63-TYivo90adO1Eyxk repositoryid =
4f1abc71a1788bc6c05f54a5" }
Can anyone please help me here?
Finally I have found a solution to this problem.
In the view.xml add following lines.
<FileUploader id="fileUploader" name="myFileUpload" uploadUrl="/cmis/root"
width="400px" tooltip="Upload your file to the local server" uploadComplete="handleUploadComplete" change='onChangeDoc'/>
the upload url will be url to the neo destination. In the neo.app.json add the following lines.
{
"path": "/cmis",
"target": {
"type": "destination",
"name": "documentservice"
},
"description": "documentservice"
}
In the controller.js add the following lines of code.
if (!oFileUploader.getValue()) {
sap.m.MessageToast.show("Choose a file first");
return;
}
var data = {
'propertyId[0]': 'cmis:objectTypeId',
'propertyValue[0]': 'cmis:document',
'propertyId[1]': 'cmis:name',
'propertyValue[1]': file.name,
'cmisaction': 'createDocument'
};
var formData = new FormData();
formData.append('datafile', new Blob([file]));
jQuery.each(data, function(key, value) {
formData.append(key, value);
});
$.ajax('/cmis/root', {
type: 'POST',
data: formData,
cache: false,
processData: false,
contentType: false,
success: function(response) {
sap.m.MessageToast.show("File Uploaded Successfully");
}.bind(this),
error: function(error) {
sap.m.MessageBox.error("File Uploaded Unsuccessfully. Save is not possible. " + error.responseJSON.message);
}
});
In the neo cloud, maintain the url for following configuration in destination tab.
https://testdaasi328160trial.hanatrial.ondemand.com/TestDaaS/cmis/json/repo-id
repo-id will be your repository key.
this will solve the problem. U will be able to upload and the document.
Regards, Pavan.
Currently I am capturing the image of the camera, this Base64 format,and I'm sending through ajax.
xhr({
uri: 'http://localhost:1337/file/upload',
method: 'post',
body:'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA...'
}
0 file(s) uploaded successfully!
Here is a nice link that will guide you to do send an image from an Ajax Client to an ajax server.
http://www.nickdesteffen.com/blog/file-uploading-over-ajax-using-html5
You can read this sails documentation to receive files on a sails server :
http://sailsjs.org/documentation/reference/request-req/req-file
You can do as the following example :
Client side ( ajax ):
var files = [];
$("input[type=file]").change(function(event) {
$.each(event.target.files, function(index, file) {
var reader = new FileReader();
reader.onload = function(event) {
object = {};
object.filename = file.name;
object.data = event.target.result;
files.push(object);
};
reader.readAsDataURL(file);
});
});
$("form").submit(function(form) {
$.each(files, function(index, file) {
$.ajax({url: "/ajax-upload",
type: 'POST',
data: {filename: file.filename, data: file.data}, // file.data is your base 64
success: function(data, status, xhr) {}
});
});
files = [];
form.preventDefault();
});
Server side ( sails ) :
[let's say you have a model Picture that take an ID and a URL]
[here is a sample of Picture controller, just to give you an idea]
module.exports = {
uploadPicture: function(req, res) {
req.file('picture').upload({
// don't allow the total upload size to exceed ~10MB
maxBytes: 10000000
},
function onDone(err, uploadedFiles) {
if (err) {
return res.negotiate(err);
}
// If no files were uploaded, respond with an error.
if (uploadedFiles.length === 0){
return res.badRequest('No file was uploaded');
}
// Save the "fd" and the url where the avatar for a user can be accessed
Picture
.update(777, { // give real ID
// Generate a unique URL where the avatar can be downloaded.
pictureURL: require('util').format('%s/user/pictures/%s', sails.getBaseUrl(), 777), // GIVE REAL ID
// Grab the first file and use it's `fd` (file descriptor)
pictureFD: uploadedFiles[0].fd
})
.exec(function (err){
if (err) return res.negotiate(err);
return res.ok();
});
});
}
};
Hope this will help in your research.
I also recommand you to use Postman to test your API first, then code your client.
Last year i build a form for one of our costumers, when visitors submitted the form they
got a message on the same page. But now he asks me if it is possible to
make a succes page if the form is filled in correctly.
I can't make it work. It's a bit out of my league.
So i hope anyone of you can help me out!
$(document).ready(function() {
$("#ajax-contact-form").submit(function() {
$('#load').append('<center><img src="ajax-loader.gif" alt="Currently Loading" id="loading" /></center>');
var fem = $(this).serialize(),
note = $('#note');
$.ajax({
type: "POST",
url: "contact/contact2.php",
data: fem,
success: function(msg) {
if ( note.height() ) {
note.slideUp(500, function() { $(this).hide(); });
}
else note.hide();
$('#loading').fadeOut(300, function() {
$(this).remove();
// Message Sent? Show the 'Thank You' message and hide the form
result = (msg === 'OK') ? '<div class="success">Uw bericht is verzonden, we nemen z.s.m. contact met u op!</div>' : msg;
var i = setInterval(function() {
if ( !note.is(':visible') ) {
note.html(result).slideDown(500);
clearInterval(i);
}
}, 40);
}); // end loading image fadeOut
}
});
return false;
});
<form id="ajax-contact-form" target="_blank" method="post" action="javascript:alert('success!');" >
Instead of displaying the "success" message, redirect to a new page:
window.location = successPageUrl;
Just redirect to success page after ajax success.
Currently implementing Filepicker in my project.
When using the pickAndStore function with the javascript lib, the file appears twice in my console but only once in S3.
Any idea?
Here is my code :
filepicker.setKey('XXX');
filepicker.pickAndStore({
multiple: true,
services: ['DROPBOX', 'FACEBOOK', 'INSTAGRAM', 'FLICKR', 'GOOGLE_DRIVE', 'BOX', 'PICASA']
}, {}, function(fpfiles) {
var i, photos;
photos = new Array();
i = 0;
while (i < fpfiles.length) {
photos[i] = new Object();
photos[i].url = fpfiles[i].url;
i++;
}
return $.ajax({
url: "/some/url",
type: "POST",
contentType: "application/json",
data: JSON.stringify({
photos: photos
})
}).always(function() {
return location.reload();
});
});
This has been resolved and is no longer the case. Only one file link will be created and show up in your developer console. Thank you for the suggestion!
I have been working with the FullCalendar and came across some problems in Firefox. I have selectable on and the start date comes over in IETF format. For some reason, IE8 is able to post this (and autoconvert it to a timestamp), but Firefox won't.
It leaves it in IETF format, and PHP's date() function doesn't work with it. I used the fullCalendar.formatDate() function as a work-around, but this doesn't seem like the best solution to me.
Is there another way to make this work?
<script type='text/javascript'>
$(document).ready(function () {
var date = new Date();
var calendar = $("#calendar").fullCalendar({
theme: true,
title: "Employee Calendar",
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonIcons: {prev: 'circle-triangle-w', next: 'circle-triangle-e'},
editable: true,
droppable: true,
events: '<?php echo matry::base_to('utilities/calendar_events');?>',
eventClick: function (event) {
$.ajax({
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
type: 'POST',
data: {id: event.id, job: 'getEvent'},
success: function(data){
$("#event_box").fadeIn(500);
$("#event_info").html(data);
}
});
},
selectable: true,
selectHelper: true,
select: function (start, end, allDay){
var title = prompt('Event Title');
start = $.fullCalendar.formatDate(start, 'yyyy-MM-dd HH:mm:ss');
end = $.fullCalendar.formatDate(end, 'yyyy-MM-dd HH:mm:ss');
if (title)
{
$.ajax({
type: 'POST',
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
data: {title: title, start: start, end: end, allDay: allDay, job: 'createEvent'},
success: function(data) {
calendar.fullCalendar('refetchEvents' );
$("#alerts").html(data);
}//close success function
})//close ajax
}
else
calendar.fullCalendar('unselect');
}//close select function
}); //close fullcalendar function
$("#calendar_controls").accordion({
collapsible: true,
clearStyle:true,
active: false,
autoHeight: true
});//close calendar controls
$(document).on('submit', '#event_form', function (event){
event.preventDefault();
$.ajax({
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
type: 'POST',
data: $('#event_form').serialize(),
success: function(data){
$("#event_box").fadeOut('2000');
$("#alerts").html(data).focus();
}
})
});//close on function
$(document).on('click', '#delete', function() {
var con = confirm('Do you want to delete this Event?');
if (con)
{
var id = $("#event_form input[name= 'id']").val();
$.ajax({
url: '<?php echo matry::base_to('utilities/calendar_tools');?>',
data: {id: id, job: 'deleteEvent'},
type: 'POST',
success: function(data){
$("#alerts").html(data).focus()
calendar.fullCalendar('refetchEvents');
$("#event_box").fadeOut(1000);
;}
});
}
})
}); //close document.ready function
</script>
IETF date format doesn't get passed correctly by firefox, but the date can be altered with the $.fullCalendar.formatDate() function that appears to work well. IF this is added wherever dates are passed, the format can be changed.