The idea of what I'm currently doing is that you can take a photo or select one from the gallery and upload it to a server. I was having trouble with using the cordova FileTransfer to send and upload the image. It was either not sending at all or $_FILES["file"] would be empty.
I have separate buttons to bring up the camera and gallery:
<button id="takePicture" name="takePicture" ng-click="openCamera();">Take Photo</button>
<button id="getPicture" name="getPicture" ng-click="openGallery();">Choose From Gallery</button>
Solution:
$scope.openCamera = function()
{
navigator.camera.getPicture(onSuccess, onError,
{ quality : 100,
destinationType : Camera.DestinationType.FILE_URI
});
function onSuccess(imageURI)
{
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf("/")+1);
options.mimeType = "image/jpeg";
options.httpMethod = "POST";
options.chunkedMode = false;
options.params = { filePath : imageURI.split("?")[0] };
var fileTransfer = new FileTransfer;
fileTransfer.upload(imageURI, encodeURI("upload.php"), uploadComplete, uploadError, options);
function uploadComplete(result)
{
console.log("Code = " + result.responseCode);
console.log("Response = " + result.response);
console.log("Sent = " + result.bytesSent);
}
function uploadError(error)
{
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
}
function onError(message)
{
alert("fail");
alert('Failed because: ' + message);
}
}
The data sent will then be received on the upload.php file. You should be able to check if the data has been sent by inspecting the files var_dump($_FILES);
As Sletheren mentioned it can also be done using $cordovaFileTransfer.upload();
This is how it works on my side:
First thing: The destinationType should be Camera.DestinationType.FILE_URI,
Second: Set the filename to: filename = imageURI.split('?')[0];
Third: the fileTransfer takes these arguments (it works on my side) :
$cordovaFileTransfer.upload(url, filename, options)
Related
In my cordova app, a user can record an audio file (via media plugin) which is then stored in the local file (cordova.file.dataDirectory) - this works like a charm.
I now want to select this file and upload it via xhr but the file element is empty on the server side.
This is how my code looks like:
window.resolveLocalFileSystemURL(
cordova.file.dataDirectory + "" + voiceMediaFilename,
function(fileEntry) {
console.log("resolveLocalFileSystemURL done for " + voiceMediaFilename);
fileEntry.file(
function(file){
console.log("getFile done for " + voiceMediaFilename);
console.log("file done, starting fd ...");
var fd = new FormData();
fd.append("sender", uuid);
fd.append("receiver", receiver);
fd.append("timestamp", timestamp);
fd.append("random", random);
fd.append("media", file);
console.log(file);
console.log("Filesize of audio: " + file.size);
uploadMedia(fd, user, timestamp, messageTypeOwn, uuid, receiver, msgId);
voiceMediaFilename = "";
},
function(err){
alert("Error getting file");
}
);
},
function(err){
alert("Error in resolveLocalFileSystemURL " + JSON.stringify(err));
}
);
The uploadMedia() function itself performs the xhr request - the function works because I am using it also in other cases (e.g. user selects a file via input type file).
I assume I am missing something in order to really select the file object but I do not really know what.
Thanks
Finally figured it out - maybe it helps someone else.
It is required to read the file as an ArrayBuffer (blob) in order to be able to add this Blob to the FormData object.
This is how my final code looks like:
window.resolveLocalFileSystemURL(
cordova.file.dataDirectory + voiceMediaFilename,
function(fileEntry) {
fileEntry.file(function(file){
console.log("getFile done for " + voiceMediaFilename);
var reader = new FileReader();
reader.onloadend = function() {
console.log("reader done, starting fd ...");
var blob = new Blob([new Uint8Array(this.result)], { type: file.type });
var fd = new FormData();
fd.append("sender", uuid);
fd.append("receiver", receiver);
fd.append("timestamp", timestamp);
fd.append("random", random);
fd.append("type", messageTypeOwn);
fd.append("duration", audioDuration);
fd.append("media", blob, voiceMediaFilename);
uploadMedia(fd, user, timestamp, messageTypeOwn, uuid, receiver, msgId);
voiceMediaFilename = "";
};
reader.readAsArrayBuffer(file);
},
function(err){
alert("Error getting file");
});
},
function(err){
alert("Error in resolveLocalFileSystemURL " + JSON.stringify(err));
});
In my serverless app, I want to create pdf which is generated dynamically and then upload that created pdf into aws s3. My problem is, when a url is returned to client-side code from server, uploaded url doesn't working. My code is given below:
Client-side javascript code (angular.js)
$scope.downloadAsPDF = function() {
// first I have to sent all html data into server
var html = angular.element('html').html(); // get all page data
var service = API.getService();
service.downloadPdf({}, { html : html }, // api call with html data
function(res) {
console.log("res : ", res);
window.open(res.url); // open uploaded pdf file
// err: The server replies that you don't have permissions to download this file
// HTTP/1.1 403 Forbidden
}, function(err) {
console.log("err : ", err);
});
};
Serverless Code
var fs = require('fs');
var pdf = require('html-pdf');
var AWS = require("aws-sdk");
var s3 = new AWS.S3();
module.exports.handler = function(event, context) {
if (event.html) { // client html data
AWS.config.update({
accessKeyId: 'xxxxxxxxxxxxxxxxx',
secretAccessKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
region: 'xxxxxxxxxxxxxxxxxxxx'
});
var awsInfo = {
bucket: 'xxxxx-xxxxxx'
};
var baseUrl = 'https://s3-my-region.amazonaws.com/s3-upload-directory';
var folderRoot = 'development/pdf';
// unique file name
var output_filename = Math.random().toString(36).slice(2) + '.pdf';
// file created directory
var output = '/tmp/' + output_filename;
pdf.create(event.html, options).toStream(function(err, stream) {
if( err ) {
console.log('pdf err : ', err);
} else {
writeStream =fs.createWriteStream(output);
s3.putObject({
Bucket : awsInfo.bucket,
Key : folderRoot + '/' + output_filename,
Body : fs.createReadStream(output),
ContentType : "application/pdf"
},
function(error, data) {
if (error != null) {
console.log("error: " + error);
} else {
// upload data: { ETag: '"d41d8cd98f00b204e9800998ecf8427e"' }
console.log('upload data : ', data);
return cb(null, {
// return actual aws link, but no file
// ex: 'https://s3-my-region.amazonaws.com/s3-upload-directory/output_filename.pdf
url: baseUrl + '/' + output_filename
});
}
});
}
}
};
I've solve my problem. I was trying to upload pdf before I generate pdf. I have solve this problem using the following code:
pdf.create(event.html, options).toStream(function(err, stream) {
if (err) {
console.log('pdf err : ', err);
} else {
var stream = stream.pipe(fs.createWriteStream(output));
stream.on('finish', function () {
s3.putObject({
Bucket : awsInfo.bucket,
Key : folderRoot + '/' + output_filename,
Body : fs.createReadStream(output),
ContentType : "application/pdf"
},
function(error, data) {
if (error != null) {
console.log("error: " + error);
return cb(null, {
err: error
});
} else {
var url = baseUrl + '/' + output_filename
return cb(null, {
url: url
});
}
});
});
}
});
I have done similar kind of thing before. I want a few clarifications from you and then I will be able to help you better.
1) In your code (server side), you have mentioned in the callback function that actual aws link is getting returned.
Are you sure that your file is getting uploaded to Amazon s3. I mean did you check your bucket for the file or not?
2) Have you set any custom bucket policy on Amazon s3. Bucket policy play an important role in what can be downloaded from S3.
3) Did you check the logs to see exactly which part of code is causing the error?
Please provide me this information and I think the I should be able to help you.
if we don't want to upload at s3 just return generated file from aws-lambda.
We are working on an iOS project in Ionic. We want the cordova screenshot plugin to fire on ionicview enter (when first entering the app), and then use cordova file transfer to send the screenshot.
The below code does not work when first time entering the view. When we leave the view and come back however, it does send a screenshot.
However, the first logAction DOES fire on the first time entering this view while the second logAction does not. When entering this view for the second time, both logActions are fired.
This is the part of the code i am referring to:
$scope.$on('$ionicView.enter', function () {
$scope.logAction({
"Message": "Login screen succesfully entered",
"Succeeded": true,
"transaction": 1,
"Category": "Info",
"Device": 0,
})
$cordovaScreenshot.capture().then(function(filepath){
$scope.logAction({
"Message": filepath,
"Succeeded": true,
"transaction": 1,
"Category": "Info",
"Device": 0,
})
$cordovaScreenshot.send(filepath);
});
});
This is the cordovaScreenshot file
angular.module('testScreenshots.services', [])
.service('$cordovaScreenshot', ['$q',function ($q) {
return {
fileURL: "",
capture: function (filename, extension, quality) {
var randomNumber = Math.random();
console.log("" + randomNumber);
filename = "testPicture" + randomNumber.toString();
extension = extension || 'jpg';
quality = quality || '100';
var defer = $q.defer();
navigator.screenshot.save(function (error, res){
if (error) {
console.error(error);
defer.reject(error);
} else {
console.log('screenshot saved in: ', res.filePath);
this.fileURL = "file://" + res.filePath;
defer.resolve(res.filePath);
console.log("inside the save function: "+this.fileURL);
}
}, extension, quality, filename);
return defer.promise;
},
send: function(filepath){
var win = function (r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
var fail = function (error) {
alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = filepath.substr(filepath.lastIndexOf('/') + 1);
options.mimeType = "multipart/form-data";
options.chunkedMode = false;
options.headers = {
Connection: "close"
};
var ft = new FileTransfer();
ft.upload(filepath, encodeURI("http://192.168.6.165:8080//api/uploadpicture"), win, fail, options);
}
};
}])
The iOS simulator we use on the Mac had this issue. After trying to run it on a device the issue no longer affected us.
This issue thus seems to relate to using the iOS simulator.
The application I'm working uses an API developed by another team. I'm working on Titanium 2.1.2 and I'm trying to upload a photo using said API. I'm using Appcelerator's HTTPClient to make the request. Here's my code:
var url = 'http://api.veramiko.com/albums/' + album.veramiko_id + '/photos';
var photo = imageView.toBlob();
var args = { //parameters sent to post photo
file : photo,
description : descriptionText
};
var client = Ti.Network.createHTTPClient({
onload : function(e){
Ti.API.info(this.responseText); //Print the result
},
onerror : function(e){
Ti.API.error(this.responseText); //Print the result
},
timeout : 60000
});
client.open('POST', url);
client.setRequestHeader('Authorization', 'Bearer ' + token);
client.setRequestHeader('Content-type', "multipart/form-data");
client.send(args);
Token is a variable we use to authorize any requests made to the server. I thought that by only converting the image from the ImageView into Blob would be enough to send the photo, but the photo isn't uploaded. The post is created with the description but the photo isn't sent properly.
Do I need to add something else? Is it right to send the photo as a Blob?
EDIT: I read this link and I tried the following with no result:
var url = 'http://api.veramiko.com/albums/' + album.veramiko_id + '/photos';
var boundary = '-_1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var photo = imageView.toBlob();
var args = {
file : photo,
description : descriptionText.value
};
var contentDisposition = "--" + boundary + "\r\n";
contentDisposition += "Content-Disposition: form-data; name=\"file\";";
contentDisposition += "filename=\"" + imageView.image + "\"\r\n\";";
contentDisposition += "Content-Type: application/octet-stream\r\n\r\n";
var fullContent = contentDisposition + photo + "\r\n--" + boundary + "--";
alert(JSON.stringify(args));
var token = JSON.parse(Ti.App.Properties.getString('loggedUser', 'No existe')).networks[0].token;
var client = Ti.Network.createHTTPClient({
onload : function(e){
Ti.API.info(this.responseText); //Print the result
},
onerror : function(e){
Ti.API.error(this.responseText); //Print the result
},
timeout : 60000
});
client.open('POST', url);
client.setRequestHeader('Authorization', 'Bearer ' + token);
client.setRequestHeader('Content-Type', "multipart/form-data; boundary=\"" + boundary + "\"");
client.setRequestHeader('Connection', 'close');
client.send(fullContent);
I tried to wrap the file with a Content-Disposition and Content-Type header with no result.
I finally found a way to solve this. Please refer to the following link.
This is how my code looked in the end:
// I put the contents of my image into a variable
var f = imageHolder.toImage();
// I create a random name for the image
var tmpName = (new Date()).getTime().toString() + '.png';
// I create a folder where I will store the photo temporally
var g = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'picturesToUpload');
if (!g.exists()) {
// If the directory doesn't exist, make it
g.createDirectory();
};
var photo = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'picturesToUpload', tmpName);
// write the contents of the image into the file
photo.write(f);
// I create my url with the albumId where I'll upload the picture
var url = 'http://api.veramiko.com/albums/' + albumId + '/photos';
var args = {
file : photo.read(), // I read the contents of the file
description : ''
}
var token = JSON.parse(Ti.App.Properties.getString('loggedUser', 'No existe')).networks[0].token;
var client = Ti.Network.createHTTPClient({
onload : function(e){
Ti.API.info('Info received from the uploading: ' + this.responseText);
},
onerror : function(e){
Ti.API.debug('Error: ' + this.responseText);
},
timeout : 60000
});
client.open('POST', url);
// these headers are important
client.setRequestHeader('enctype', 'multipart/form-data');
client.setRequestHeader('Content-Type', 'image/png');
client.setRequestHeader('Authorization', 'Bearer ' + token);
client.send(args);
Hope this info helps more people.
First of all you Clear what is you API Parameter. and where you want to use TOKEN.
var imageView = Ti.UI.createImageView({
backgroundImage : "image.png",
});
var url = 'http://api.veramiko.com/albums/' + album.veramiko_id + '/photos';
var args = { //parameters sent to post photo
file : imageView.backgroundImage,
description : descriptionText,
token : "Token",
};
var client = Ti.Network.createHTTPClient({
onload : function(e){
Ti.API.info(this.responseText); //Print the result
},
onerror : function(e){
Ti.API.error(this.responseText); //Print the result
},
timeout : 60000
});
client.open('POST', url);
client.setRequestHeader("Content-type","multipart/form-data");
client.setRequestHeader("Content-length", args.length);
client.send(args);
Try This, I thought this is working for you...
I found this tutorial, that covers on how to build an uploader.
Titanium Mobile: Build an Image Uploader
You case use this code to upload a file in form-data :
var baseurlAPI = "YOUR API BASEURL HERE";
var file = Ti.Filesystem.getFile(pathToFile);
if(file.exists()){
var xhr = Ti.Network.createHTTPClient({
onload: function(e) {
Ti.API.log('success '+this.responseText);
},
onerror: function(e) {
Ti.API.error(this.responseText);
},
timeout : -1
});
xhr.open('POST', baseurlAPI);
xhr.send({
file: file
});
}else{
console.log('didnt exist ' + file.nativePath);
}
I'm currently starting work for my bachelor thesis and recently started 'digging' into the use of node.js and webSocket. My webSocket server runs without problems when accessed in Firefox 15.0 and Chrome 21.0.1180.89 m. In Opera 12.02, there seems to be a problem with the client-server handshake. This is what Opera's error console says:
[31.08.2012 01:03:51] WebSockets - http://10.0.0.2/
Connection
WebSocket handshake failure, invalid response code '400'.
Funny thgough: I can't find this error anywhere in the Dragonfly console's network log. All the fields that are requested when accessing the website (index.html, client.js etc.) are found and served as they should be (HTTP Status code 200 OK). Also, the only status codes that my server returns are 200, 404 and 500, so this looks like it's coming from within webSocket itself.
And yes, webSocket IS enabled in Opera...I have no idea what the problem could be
Any help would be really appreciated :)
EDIT:
This is my code so far so you can see which headers my server sends and how I create webSocket connections with my client.js:
server.js:
// load required modules:
var http = require("http");
var WebSocketServer = require("websocket").server;
path = require("path");
url = require("url");
filesys = require("fs");
// declare listening port vars:
var httpListeningPort = 80;
var webSocketListeningPort = 80;
// create HTTP-server:
var httpSrv = http.createServer(function(request, response) {
console.log((new Date()) + ":\tReceived request for " + request.url);
// response.writeHead(200);
// response.end();
var myPath = url.parse(request.url).pathname;
var fullPath = path.join(process.cwd(), myPath);
if(myPath === "/") {
fullPath += "index.html";
console.log("Full path:\t" + fullPath);
filesys.readFile(fullPath, "binary", function(err, file) {
if(err) {
response.writeHeader(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
}
else {
response.writeHeader(200);
response.write(file, "binary");
response.end();
}
});
}
else {
path.exists(fullPath, function(exists) {
if(!exists) {
response.writeHeader(404, {"Content-Type": "text/plain"});
response.write("404 Not Found\n");
response.end();
}
else {
filesys.readFile(fullPath, "binary", function(err, file) {
if(err) {
response.writeHeader(500, {"Content-Type": "text/plain"});
response.write(err + "\n");
response.end();
}
else {
response.writeHeader(200);
response.write(file, "binary");
response.end();
}
});
}
});
}
});
httpSrv.listen(httpListeningPort, function() {
console.log((new Date()) + ":\tServer is now listening on port " + httpListeningPort);
});
// create webSocket server and tie it to the http server:
wsServer = new WebSocketServer({
httpServer: httpSrv
});
function originChecker(origin) {
if(origin) {
console.log("Origin " + origin + " is allowed");
return true;
} else {
console.log("origin is NOT allowed.");
return false;
}
}
// how to handle requests:
wsServer.on("request", function(request) {
// check whether origin is allowed or not:
if(originChecker(request.origin) === false) {
request.reject();
console.log((new Date()) + ":\tConnection request from origin " + request.origin + " rejected.");
return;
}
// accept the connecteion request -> open the connection:
var connection = request.accept(null, request.origin);
console.log((new Date()) + ":\tConnection request from " + request.origin + " accepted.");
// handle incoming messages from the clients:
connection.on("message", function(message) {
if(message.type === "utf8") {
console.log((new Date()) + ":\tReceived message from " + request.origin + ":\nType: " + message.type + "\nLength: " + message.utf8Data.length + "\nMessage: " + message.utf8Data);
// echo "Message received":
connection.sendUTF(JSON.stringify( { type: "message", data: "Message received !" } ));
} else {
// send error message back to client:
console.log((new Date()) + ":\tReceived message from " + request.origin + ":\nERROR:\tMessage is NOT UTF-8! it's " + message.type);
connection.sendUTF(JSON.stringify( { type: "message", data: "ONLY UTF-8 accepted !" } ));
}
});
// what to do when connection is closed:
connection.on("close", function() {
console.log((new Date()) + ":\tClient #" + connection.remoteAddress + " disconnected.");
});
});
client.js:
function client() {
if("WebSocket" in window) {
alert("WebSocket is supported by your browser!");
// try to connect to the webSocket server:
var connection = null;
connection = new WebSocket("ws://10.0.0.2:80");
// things to do once the connection is opened:
connection.onopen = function() {
alert("INFO:\tConnection to server is OPEN");
document.getElementById("msgInput").focus();
document.getElementById("msgInput").disabled = false;
document.getElementById("msgInput").value = "";
document.getElementById("msgInput").onkeyup = function(key) {
switch(key.keyCode) {
case 13: if(document.getElementById("msgInput").value === "") {
break;
}
var messageText = document.getElementById("msgInput").value;
document.getElementById("msgInput").disabled = true;
document.getElementById("msgInput").value = "";
document.getElementById("statusHeader").innerHTML = "Sending...";
connection.send(messageText);
break;
default: document.getElementById("statusHeader").innerHTML = "Press ENTER to send!";
}
};
};
connection.onerror = function(error) {
document.body.style.backgroundColor = "#220000";
document.body.style.color = "#aa0000";
document.getElementById("statusHeader").innerHTML = "ERROR connecting to server -> OFFLINE";
return;
};
connection.onmessage = function(message) {
try {
var json = JSON.parse(message.data);
} catch (error) {
alert("ERROR parsing message:\t" + error);
return;
}
document.getElementById("statusHeader").innerHTML = json.data;
document.getElementById("msgInput").disabled = false;
};
connection.onclose = function() {
setTimeout(function() {
document.body.style.backgroundColor = "#808080";
document.body.style.color = "#ffffff";
document.getElementById("statusHeader").innerHTML = "OFFLINE";
document.getElementById("msgInput").disabled = true;
document.getElementById("msgInput").value = "OFFLINE";
}, 5000);
return;
};
} else {
alert("WebSocket is NOT supported by your browser! Exiting now.");
return;
}
};
According to a recent question Opera 12 supports an older, incompatible version of websockets. This version (Hixie-76) uses a different set of headers in its handshake. Your server presumably doesn't understand these which explains its 400 error response.
If you can afford to wait for Opera to catch up, the easiest 'solution' is to use other browsers for your testing for now. The hixie protocol drafts are deprecated so Opera is bound to upgrade to RFC 6455 eventually.