Upload local file to database files collection

[Woody]

I have created a local PDF using jsPDF and I have successfully tested Cordova's FileTransfer.

However, I'd like to upload the file to Appery's database file collection so I can eliminate having another server.

I have read http://devcenter.stage-dev.appery.io/...

and this is what I am trying

code
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

Code: Select all

 function gotFS(fileSystem) { 
     fileSystem.root.getFile("test.pdf", {create: false}, gotFileEntry, fail); 
 } 

 function gotFileEntry(fileEntry) { 
     fileEntry.file(gotFile, fail); 
 } 

 function gotFile(file){ 
     readDataUrl(file); 
     //readAsText(file); 
 } 

 function readDataUrl(file) { 
     var reader = new FileReader(); 
     reader.onloadend = function(evt) { 
         console.log("Read as data URL"); 
         console.log(evt.target.result); 
     }; 
     reader.readAsDataURL(file); 
       call_script(reader); 
 } 

 function readAsText(file) { 
     var reader = new FileReader(); 
     reader.onloadend = function(evt) { 
         //console.log("Read as text"); 
         console.log(evt.target.result); 

     }; 
     reader.readAsText(file); 

 } 

function call_script() {
upload_service.execute(??? what goes here ??? or do I bind in mapping???);

}
function fail(evt) {
console.log(evt.target.error.code);
}

/code

Question:

In the files upload service, what type of data are you expecting? I am trying to use Phonegaps filesystem to return a text or binary string and I am getting an error

code
{
"status":400,
"uri":"https://api.appery.io/rest/1/db/files",
"response":{
"code":"BCXX002",
"description":"Cannot consume content type"
}
}

/code

Thanks!

[Maryna Brodina]

Hello!

We have a project sample showing how to work with FileSystem. Would you be interested to take a look?

[Woody]

Yes please. Send me a link or via email.

Cheers.

[Ihor Didevych]

Could you write from your e-mail to a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a for send?

[Woody]

Thank you for the demo project but the problem I have is NOT with dealing with file system.

It is posting to your file upload to database service using a local file instead of a filelist create using a "input" UI.

All of your javascripts (e.g., UploadHelper) refer to the FileList that is the output of the input element. However, I don't want user interaction / file selection. I simply wish to specify a local file that I want to upload to the file collection.

For example, if you were testing a file upload service what would you put in 'data'?

Can I instantiate whatever it is expecting in javascript if I have a local file? I have tried sending binary and text representations of a local file to the service but it fails.

[Woody]

It would be great if you would support uploading a file as Base64 data like Cloudinary does

http://support.cloudinary.com/entries...

I'm making one extra hop to host my files there because I could not figure out how to get a local file into your file collection without using user file select input.

[Yurii Orishchuk]

Woody,

Here is solution to upload file to Appery.io DB files collection with base64 content.

1. import DB files upload service.
   Details: http://prntscr.com/5f51tq/direct

2. add upload service to the page. And call datasource "uploadService2".
   Details: http://prntscr.com/5f52b3/direct

3. click on "before send" mapping and link your session token to "X-Appery-Session-Token" header.

   Details: http://prntscr.com/5f52oc/direct

4. Add new JS asset and populate it with following JS code:

   precode

   function b64toBlob(b64Data, contentType, sliceSize) {
   contentType = contentType '';
   sliceSize = sliceSize 512;

   var byteCharacters = atob(b64Data);
   var byteArrays = [];

   for (var offset = 0; offset < byteCharacters&#46;length; offset += sliceSize) {
   var slice = byteCharacters&#46;slice(offset, offset + sliceSize);

   Code: Select all

    var byteNumbers = new Array(slice.length); 
    for (var i = 0; i < slice&#46;length; i++) { 
        byteNumbers[i] = slice&#46;charCodeAt(i); 
    } 
   
    var byteArray = new Uint8Array(byteNumbers); 
   
    byteArrays&#46;push(byteArray); 

}

Code: Select all

 var blob = new Blob(byteArrays, {type: contentType}); 
 return blob; 

}

/code/pre

Details: http://prntscr.com/5f530x/direct

1. Add button to the page and add JS "click" event handler with following JS code:

   precode

   &#47;&#47;Here you can set file name&#46;
   var fileName = "myFile&#46;png&quot

   &#47;&#47;Here you can use your base64 content&#46; Note: there is no "data:image/jpeg;base64," part&#46;
   var base64Content = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4&#47;&#47;8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
   var fileBlob = b64toBlob(base64Content, "image/png");

   var data = new FormData();

   data&#46;append(fileName, fileBlob);

   var onSuccess = function(data){
   alert(JSON&#46;stringify(data));
   };

   &#47;&#47;Where "uploadService2" is your updload service datasource name&#46;
   uploadService2&#46;execute({
   'allowDataModification': false,
   'processData': false,
   'body': {data: data},
   'cache': false,
   'success': onSuccess
   });

   /code/pre

   Now on click this button you will upload file and alert with result will appear.
   You can get file url from result and download this file.

   That's all.

   Regards.

[Woody]

Thank you very much -- I will give that a try.

I just spent a few hours rewiring everything to work with Cloudinary but when I have time I will try this approach.

So now if anyone wants to create a PDF on the fly and upload to your database they can!

Cheers.

[M&M]

ho Yurii,

During the conversion to blob, or before is it possible to add some metadata to the file? For example to the image I want to add tag/metadata timestamp and also latitude and longitude. I already have created the service to get the gps coordinates. I just need to embed that into the image so that I need to transfer only the image. On the server side I can read the tags/metadata and get the timestamp, gps coordinates etc.

Thanks,
M&M

[Yurii Orishchuk]

Hi M&M,

Yes you can modify file source like you need.

Unfortunatly we don't have such code example.. But you can learn about this protocol here: http://en.wikipedia.org/wiki/Exchange...

Regards.