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!
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.
I am trying to create a document in the SAP Document Center of HCP using Javascript and I can not. SAP Document Center uses the CMIS protocol for communication with other applications. I have been able to connect from my SAPUI5 application with the SAP Document Center. I have also managed to create a folder as follows:
createFolder: function(repositoryId, parentFolderId, folderName) {
var data = {
objectId: parentFolderId,
cmisaction: "createFolder",
"propertyId[0]": "cmis:name",
"propertyValue[0]": folderName,
"propertyId[1]": "cmis:objectTypeId",
"propertyValue[1]": "cmis:folder"
};
$.ajax("/destination/document/mcm/json/" + repositoryId + "/root", {
type: "POST",
data: data
}).done(function() {
MessageBox.show("Folder with name " + folderName + " successfully created.");
}).fail(function(jqXHR) {
MessageBox.show("Creation of folder with name " + folderName + " failed. XHR response message: " + jqXHR.responseJSON.message);
});
},
However, I find it impossible to create a document. I can not find an internet sample for the CMIS "createDocument" method. There are many examples for Java but nothing to do with Javascript. I do not know what the structure of the data to send. The code is as follows:
createDocument: function(repositoryId, parentFolderId, documentName, content) {
/**
* 'content' contains the whole document converted to a base64 string like this:
* "data:application/pdf;base64,JVBERi0xLjUNJeLjz9MNCjIxNCAwIG9iag08P..."
*/
var data = {
objectId: parentFolderId,
cmisaction: "createDocument",
contentStream: content,
"propertyId[0]": "cmis:name",
"propertyValue[0]": documentName,
"propertyId[1]": "cmis:objectTypeId",
"propertyValue[1]": "cmis:document"
};
$.ajax("/destination/document/mcm/json/" + repositoryId + "/root", {
type: "POST",
data: data
}).done(function() {
MessageBox.show("Document with name " + documentName + " successfully created.");
}).fail(function(jqXHR) {
MessageBox.show("Creation of document with name " + documentName + " failed. XHR response message: " + jqXHR.responseJSON.message);
});
},
With this I create a file record within the SAP Document Center but it does not take the data. An unformatted file is created, when it should have the format sent (PDF, txt, Excel, Doc, ...).
Does anyone know how to do it?
Regards.
Links of interest:
CMIS Standard
http://docs.oasis-open.org/cmis/CMIS/v1.1/os/CMIS-v1.1-os.html#x1-1710002
Usage examples for Java (not Javascript)
http://chemistry.apache.org/java/developing/guide.html
I have been through a similar problem. My solution is to change it from base64 to a FormData approach, so I got the file input value instead of the content base64 string. It worked fine.
this.createObject = function (fileInput, objectName,folderId, cbOk, cbError) {
if (!folderId) {
folderId = _this.metadata.rootFolderId;
}
var documentData = {
'propertyId[1]': 'cmis:objectTypeId',
'propertyValue[1]': 'cmis:document',
'propertyId[0]': 'cmis:name',
'propertyValue[0]': objectName,
'objectId': folderId,
'cmisaction': 'createDocument',
'content' : fileInput
};
var formData = new FormData();
jQuery.each(documentData, function(key, value){
formData.append(key, value);
});
$.ajax({
url: _this.metadata.actionsUrl,
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
cbOk(data);
},
error: function(err){
cbError(err);
}
});
};
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. You will be able to upload and the document.
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.
I have resource that has following fields:
description, picture
Is it possible to send that resource to URL as multipart/form, and if so, how?
I've tried putting:
app.factory('resource_name', ['$resource', function($resource) {
return $resource('<url> ',
{
<params_for_url>
},
save: {
method: "POST",
headers: {
"Content-Type": "multipart/form-data;"
}
},
but this doesn't get to the server as form-data. It goes like JSON with header just set:
{
description: "gtrdgf",
picture: {
lastModifiedDate:2013-11-26T20:42:13.000Z,
name: "suggested_pokes.png"
size: 32995
type: "image/png"
webkitRelativePath: ""
}
Did anyone met this requirement before? If this is possible at all...
Thanks!
I found solution for this one. You have to use FormData to submit it. You can use it as interceptor. I used it like this (this is my save method of ngResource)
save: {
method: 'POST',
transformRequest: formDataObject,
headers: {'Content-Type':undefined, enctype:'multipart/form-data'}
},
and here is transformer:
function formDataObject (data) {
var fd = new FormData();
angular.forEach(data, function(value, key) {
fd.append(key, value);
});
return fd;
}
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);});