RP
Posts: 0
Joined: Thu Aug 22, 2019 9:17 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

Hello,

I have seen this tutorial: https://devcenter2.appery.io/document...
However, it involves a database which I am not interested in using. I have my own database and fileserver with existing files. I like for the user to upload a file using the phone app built using Appery.io and have that file go directly to my restful api or indirectly through Appery.io server code then to my restful api. I do not see the need nor have desire to use the Appery.io database when the file and data will reside on my server.

Is this possible?

Thanks

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

Hello,

What project type do you use in your project JQM or Ionic?

What file format does your API require? Should it be a binary data in the POST request or base64 string?

RP
Posts: 0
Joined: Thu Aug 22, 2019 9:17 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

The project is using Ionic and the API is under my control, and currently it accepts POST request of application/form-data content type. Files accepted are binary.

The POST details are as follows:
There are 2 header key/values: X-API-Token and Content-Type
The Body is form-data type with 3 key value pairs and 1 file type key/value.

The endpoint is https://www.sometestsite.com/api/safe...

I revisited the tutorial and it seems to me if I build my own server code service that accepts the a file and posts to my API endpoint it should just work.

Perhaps I was over thinking this. I will try and report back. I just wanted to make sure there wasn't any limitations or special requirements disallowing my project to interact directly with my server API. I do understand I need to go through appery.io server code service which is fine.

RP
Posts: 0
Joined: Thu Aug 22, 2019 9:17 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

This video seems to be helpful: https://www.youtube.com/watch?v=awL57...

I'm looking into using Appery.io API Express feature.

RP
Posts: 0
Joined: Thu Aug 22, 2019 9:17 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

It appears API Express does not have an option for for form-data type for the request body. Am I missing something to make that type available?

See a screenshot below.
Image

RP
Posts: 0
Joined: Thu Aug 22, 2019 9:17 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

I ended up not using API Express. I built an upload service to send the file to a listener that will be build into an API eventually. The issue I have is the contents that gets sent over to the listener (uses $input = @file_get_contents("php://input"); ) works with text files but cannot support binary files like a photo.

I have this for my server code:

var url = "https://proto2.sampledomain.com/uploa...";

var body = request.body();
var XHRResponse = XHR2.send("POST", url, {
"parameters": {
"userkey": "db86dfs5-4234-45f5-81ee-870e4dcffdq",
"vp": "test_data"
},
"headers": {
"X-API-KEY": "2034d2c8-7h0-449a-9944-7690e4dcffdw",
"sessionid": "kljafd23jlkjl23lkj",
"Content-type": "application/octet-stream"
},
"body": body
});

Apperyio.response.success(XHRResponse.body, "application/json");

And I have this for the service that gets invoked:

if ($scope.files.length === 0) {
alert('No file for upload');
return;
}

//insert code below....below
var requestData = {};
requestData = (function mapping7638($scope){
var requestData = {};
requestData.data = {};
var files_scope = $scope.files;
var formData = new FormData();
formData.append("file",files_scope[0].filepointer);
//requestData.data = files_scope[0].filepointer;
requestData.data = formData;

Code: Select all

     return requestData; 
     /*CLICK TO EDIT MAPPING*/ 
 })($scope); 

// read more about using rest services: https://links.appery.io/ve-snippet-rest
Apperyio.get("upload_service")(requestData).then(
function(success){ // success callback
/CLICK TO EDIT MAPPING/

},
function(error){ // callback to handle request error

},
function(notify){ // notify callback, can fire few times

});

I followed the tutorial that was for sending files to the database and made similar mappings of data. I'm able to launch the app and select a file and upload the file. I see the file hit my listener and it looks like this:

------WebKitFormBoundary3pzFXoh0wzwGWVeA
Content-Disposition: form-data; name="file"; filename="ExamFileLog-2-9-2019-15-24-49.txt"
Content-Type: text/plain

88880418-Cons 101 RP Test -successful and is available to student

------WebKitFormBoundary3pzFXoh0wzwGWVeA--

However, when i try to write out a binary file the file is corrupted.

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

You can upload your data also with the Server Code: https://docs.appery.io/reference#serv...
Here you can control headers, request parameters whatever you need

RP
Posts: 0
Joined: Thu Aug 22, 2019 9:17 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

Not sure if this helps, I see this in the the trace log of the upload service I created as the request body being posted now:

13.9.2019, 11:52:46 PM: {"filename":"ExamFileLog-2-9-2019-15-24-49.txt","isUploaded":false,"filepointer":{}}

RP
Posts: 0
Joined: Thu Aug 22, 2019 9:17 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

Thank you. That helped. I believe I'm very close to getting this to work. The only issue I'm stuck on is the transmission of binary data like a pdf gets corrupted at the endpoint. I've attached a screenshot as an example of the the small differences.

I followed this: https://getsatisfaction.com/apperyio/... as well and set the isRawRequest to true, but still no luck with the data corruption.

The biggest unknown to me is how appery.io handles the reading and transmission of the the file. In fact at this point I rather encode the file to base64 then transmit to be on the safe side.

Here is my service invocation:

var requestData = {};
requestData = (function mapping5919($scope){
var requestData = {};
requestData.data = {};
var files_scope = $scope.files;
requestData.data = files_scope[0].filepointer;

Code: Select all

     return requestData; 
     /*CLICK TO EDIT MAPPING*/ 
 })($scope); 

// read more about using rest services: https://links.appery.io/ve-snippet-rest
Apperyio.get("upload_service")(requestData).then(
function(success){ // success callback
/CLICK TO EDIT MAPPING/

},
function(error){ // callback to handle request error

},
function(notify){ // notify callback, can fire few times

});

It is very straight forward and its set to pick the first file as only one file is being uploaded by the user at a time.

The service it calls now looks like this:

var url = "https://proto2.sometestsite.com/uploa...";
var XHRResponse = XHR2.send("POST", url, {
"headers": {
"Content-Type": "application/octet-stream"
},
"body": request.body(),
"isRawRequest": true
});

Apperyio.response.success(XHRResponse.body, "application/json");

Any suggestions on what I can do to eliminate the file transfer corruption? I have complete access to the endpoint which is currently reading in raw stream as $input = @file_get_contents("php://input");

What I had wished the server code post would do was to post using $_FILES which is easier to manage, but I'm ok with any method as long as the data gets transmitted bit for bit.

Best,
RP Image

RP
Posts: 0
Joined: Thu Aug 22, 2019 9:17 pm

With Appery.io can I directly upload a file from the phone app to my REST API on my server?

Perhaps this is not elegant, but it works for prototyping purposes. I'm sure there are some limitations but for my use this seems to be working so far.

I decided not to take the binary approach in sending data across. Things got greatly simplified dealing with base64 encoded messages in json objects.

In my invocation service above i had the request data point directly to the file. Now i made the following changes. I used FileReader to get a binaryString and base64 encoded it,

var reader = new FileReader();
reader.onload = function() {
var arrayBuffer = this.result,
array = new Uint8Array(arrayBuffer),
binaryString = String.fromCharCode.apply(null, array);
$scope.temp_file = btoa(binaryString);
};

then I read the file that has been base64 encdoed and built a json object to send over the wire.

reader.readAsArrayBuffer(files_scope[0].filepointer);
let payload = '{"ukey" : "cfs42e9a-1630-4d42-8b95-fc9kih42a7a4a", "file" : "'+$scope.temp_file+'"}';
let data = JSON.stringify(payload);
requestData.data = data;

Everything above gets it to my server code on appery.io to which from there I can send it off anywhere, in my case to another server.

Problem solve!

However, if anyone has a sample script for server code to send files to a php listener via $_FILES I like to know. The farthest I got was to create a FormData object to pass, but something was malformed for me and never got the data properly for mated in the posting to the server.

Return to “Issues”