(v6) File upload via cordova-file-transfer

Good evening everybody. I’m getting crazy with that…
In a few words I’m trying to take a photo and than upload it somewhere on a server.
I’m using cordova-camera-plugin (to take the shot) and cordova-file-transfer to send it to the server.

This is what I did, following the guide from https://cordova.apache.org/docs/en/6.x/reference/cordova-plugin-file-transfer/ (first example).

I omit the code that put the path to the photo I took, inside the fileToUpload field value.
Let’s say the path (from Android Studio emulated device) is: file:///data/user/0/io.framework7.myapp/cache/1616162951525.jpg

<template>
  ...
  <form id="locationForm">
     <input type="text" name="fileToUpload" id="fileToUpload" />
     <input type="button" value="UPLOAD" id="saveAllData" class="button button-fill" />
  </form>
</template>

<script>
  export default (props, { $, $on, $f7 }) => {
    $on("pageInit", () => {
      $("#saveAllData").on("click", function (e) {
        e.preventDefault();
        var fileURL = document.getElementById('fileToUpload);

        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady(){
        
           var win = function (r) {
              alert("Code = " + r.responseCode);
           } 

           var fail = function (error) {
              alert("An error has occurred: Code = " + error.code);
           }

           var options = new FileUploadOptions();
           options.fileKey = "file";
           options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
           options.mimeType = "image/jpeg";

           var ft = new FileTransfer();
           ft.upload(fileURL, encodeURI("http://<myserver>/upload.php"), win, fail, options);
        }
    });

  });
  return $render;
};

Inspecting the content of my $_FILES[] array into my upload.php script, I see that it’s always empty.
In add, I the error function returns ERROR CODE 1 (file not found)

First of all, what’s that? options.fileKey = “file”;
“file” is the name of the field that contains my url =(in my case should be fileToUpload?)

I also tried another script, inside the sami official guide, but it’s very hard to undestand for me.

Any hint? I know… I’m a noob with that things, so I’m sure I made a mess!

Thanks

Hi @Simone_Conti.

I have not used cordova-plugin-file-transfer but in this case I don’t see the need to use that plugin. To send a photo to the server I recommend that you do it via ajax call.

To take the photos you should use [cordova-plugin-camera] (https://github.com/apache/cordova-plugin-camera), with this plugin you wil get the photo in base64 string. Then, send the photo vía Framework7 AJAX/Request.

I hope this information helps you. Regards, Fabricio.

1 Like

Thanks @fabricio
I used the Framework7.request to do what I need. There are still a couple of things that I have to fix, but I’ll do it soon.

Just a small off topic question: what’s the difference in putting my code inside the template or the inside the routes file? Just a matter of organization?

Your welcome @Simone_Conti

As you say, It’s just a matter of organization.

In my case, in routes.js I only config the routes and do some auth validations. Basically all my logic is in the f7 components or js modules.