8 Replies Latest reply on Jun 4, 2017 1:05 PM by kerrishotts

    Unable to Upload images cordova-plugin-file-transfer

    nisanc8822890

      Hello all,

      I have an app built on 3.7.0 but am looking to make updates.

      I am in the process of transitioning to cli-6.3.0 but am unable to get the file upload/ image upload to work.

      It is still functioning correctly in the 3.7.0 build

       

      I am trying to use the bellow to upload the file:

      https://www.npmjs.com/package/cordova-plugin-file-transfer

       

      I verified the image URI is correct and displays the correct image on the page:

       

      document.getElementById('smallImage').src = imageURI;

       

      which accurately displays the image

       

       

      checking the log with the following code:

       

      var win = function (r) {

          console.log("Code = " + r.responseCode);

          console.log("Response = " + r.response);

          console.log("Sent = " + r.bytesSent);

      }

       

      my code is 200, the response is blank, is this correct? I show nothing in the error log in the server

       

       

      I then transitioned here:

       

      https://runkit.com/npm/cordova-plugin-file-transfer

      and received the following message:

       

      Error: Cannot find module 'cordova-plugin-file-transfer'

      Should we have cordova-plugin-file-transfer?

      We should have every package on npm. Sometimes this error is caused by a typo in your require path, but if you think we are actually missing this package, please confirm below and we’ll do our best to fix it as soon as possible!

       

       

      Is this the issue or a possible issue of the lack of a file upload? Is there a work around?

        • 1. Re: Unable to Upload images cordova-plugin-file-transfer
          VectorP Level 4

          but am unable to get the file upload/ image upload to work

          How are you 'unable'? Doesn't the server receive the POST request? Are there no data within the request? Doesn't the server respond as expected?

           

          HTTP Status 200 is OK. If the response is empty while it shouldn't be, something went wrong on the server. What did you put in the response from the server, if anything?

           

          Since forum participants can neither see your code nor your config, it's hard to offer help. You could start by giving information on the contents of your config.xml and the directory structure of your zip file. Also, you should check:

          - is the file transfer plugin listed on the plugins tab of your app's PGB page?

          - did you use the latest version of that plugin?

          • 2. Re: Unable to Upload images cordova-plugin-file-transfer
            nisanc8822890 Level 1

            Thank you for the response.

            the file transfer is showing on PGB plugin page

             

            I think the issue are the parameters (params) are not being passed

            please see below:

             

            App Javascript:

             

                function uploadPhoto(imageURI, id, name, number) {

                   

                    alert("id: "+id+" .... name: "+name+" .... number: "+number);

                   

                    var smallImage = document.getElementById('smallImage');

                      smallImage.style.display = 'block';

                      smallImage.src = imageURI;

                   

                        var options = new FileUploadOptions();

                        options.fileKey="file";

                        options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);

                        options.mimeType="image/jpeg";

                        options.httpMethod = 'POST';

                        options.trustAllHosts = true;

                        var params = {};

                        params.value1 = id;

                        params.value2 = name;

                        params.value3 = number;

                        options.params = params;

                        var ft = new FileTransfer();

                        ft.upload(imageURI, encodeURI("http://www.site.com/uploadimage.php"), win, fail, options);

                    }

             

             

             

             

             

            Server PHP:

             

            $my_vars = $_POST['value1']."_".$_POST['value2']."_".$_POST['value3'].".jpg";

            echo $my_vars;

            if (isset($_FILES["file"]["tmp_name"])){

            $isitmoved = move_uploaded_file($_FILES["file"]["tmp_name"], $thedir);

            echo "its moved " . $isitmoved;

            }

             

             

             

            this echos "__.jpg" as the response

             

            it does not echo the "its moved" line

             

            The code works with 3.7.0 and images are uploaded

            • 3. Re: Unable to Upload images cordova-plugin-file-transfer
              nisanc8822890 Level 1

              here is the config file:

               

              <?xml version="1.0" encoding="UTF-8"?>

               

              <!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->

              <widget xmlns = "http://www.w3.org/ns/widgets"

                      xmlns:gap = "http://phonegap.com/ns/1.0"

                      id = "com.phone.app"

                      version = "3.2.1">

               

                  <name>phone app</name>

               

                  <description>

                      Wecome to the Phone App.

                  </description>

               

                  <author href="http://www.xxxx.com" email="info@xxxx.com">

                      Nisan Catron

                  </author>

              <plugin name="cordova-plugin-camera" spec="~2.3.1" />

              <plugin name="cordova-plugin-network-information" spec="~1.3.1" />

              <plugin name="cordova-plugin-file" spec="~4.3.1" source="npm" />

              <plugin name="cordova-plugin-file-transfer" spec="~1.6.1" source="npm" />

              <plugin name="cordova-plugin-geolocation" spec="~2.4.1" />

              <plugin name="cordova-plugin-inappbrowser" spec="~1.6.1" />

              <plugin name="cordova-plugin-whitelist" />

               

              <plugin name="phonegap-plugin-barcodescanner" spec="6.0.2" source="npm" />

               

               

              <preference name="phonegap-version" value="cli-6.3.0" />

              <preference name="android-build-tool" value="gradle" />

               

                  <preference name="orientation" value="default" />

                  <preference name="target-device" value="universal" />

                  <preference name="fullscreen" value="false" />

                  <preference name="webviewbounce" value="true" />

                  <preference name="prerendered-icon" value="true" />

                  <preference name="stay-in-webview" value="false" />

                  <preference name="ios-statusbarstyle" value="black-opaque" />

                  <preference name="detect-data-types" value="true" />

                  <preference name="exit-on-suspend" value="false" />

                  <preference name="show-splash-screen-spinner" value="true" />

                  <preference name="auto-hide-splash-screen" value="true" />

                  <preference name="android-minSdkVersion" value="7" />

                  <preference name="android-maxSdkVersion" value="25" />

                  <preference name="android-installLocation" value="auto" />

                 

              <preference name="splash-screen-duration" value="100"/>

               

              <gap:platform name="android" />

               

                  <icon src="icon.png" />

              <icon src="images/icon-72-2x.png" gap:platform="android" gap:density="ldpi" />

              <icon src="images/icon-72-2x.png" gap:platform="android" gap:density="mdpi" />

              <icon src="images/icon-72-2x.png" gap:platform="android" gap:density="hdpi" />

              <icon src="images/icon-72-2x.png" gap:platform="android" gap:density="xhdpi" />

               

               

              <allow-navigation href="*" />

              <access origin="*" />

              <allow-intent href="*" />

               

               

               

               

               

              </widget>

              • 4. Re: Unable to Upload images cordova-plugin-file-transfer
                kerrishotts Adobe Community Professional
                • What should be logged when your upload works?
                • What devices (& OS versions) are you testing on?
                • Try setting "chunkedMode" to false in your file transfer options and see if that helps
                • 5. Re: Unable to Upload images cordova-plugin-file-transfer
                  nisanc8822890 Level 1

                  Thank you KerrisHot,

                   

                  previously nothing was logged, I would verify a 200 code and, if so, run a secondary function to verify the image was uploaded to the correct destination, if not it would trigger the upload function again.

                   

                  Android only, first phone is an s7 (I don't have the OS handy) and the second phone is a moto G on 5.1

                   

                  I set chunkedMode to false and it worked. Can you explain why this may be? The documentation is lacking as to what this would indicate. Uploads have been tried on 3g , LTE and high quality wifi

                  • 6. Re: Unable to Upload images cordova-plugin-file-transfer
                    kerrishotts Adobe Community Professional

                    chunkedMode just indicates that the plugin can send smaller pieces of the file, rather than having to load it all at once into memory and then send it to the server. It's possible with the latter (chunkedMode=false) to run out of memory with very large files.

                     

                    It should just work, but for whatever reason (maybe server configuration? I don't know...) it breaks, and setting chunkedMode to false gets around the issue. If all you're doing is sending small files, it's probably sufficient. If you are sending large files, you might want to look further into why you can't send a file using chunks.

                    • 7. Re: Unable to Upload images cordova-plugin-file-transfer
                      mdi30756325

                      Hi,

                      Uploading is fine when you try to http but when https(SSL enabled) not able to find out anything  with $_POST/$_FILES .

                       

                      Would you kindly help when server is ssl enabled.

                      • 8. Re: Unable to Upload images cordova-plugin-file-transfer
                        kerrishotts Adobe Community Professional

                        Don't resurrect old threads. Create a new thread for your particular issue instead.