File / Bild Upload an Server-Backend funktioniert nicht wie gewünscht

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • File / Bild Upload an Server-Backend funktioniert nicht wie gewünscht

      Hallo zusammen,

      zuerst einmal muss ich sagen, dass ich es super finde, dass ein deutschsprachiges Forum ins Leben gerufen wurde.

      Derzeit bin ich an einer iOS App dran. Diese soll später auch für Android erhältlich sein.
      Meine Anforderung ist, dass ein Bildupload auf einen Webserver erfolgt. Das Bild soll zuvor mit dem Smartphone aufgenommen werden. Anschließend soll das Bild in kleiner Form dargstellt werden, über einen separaten Button soll der Upload erfolgen. Zusammen mit dem Bild sollen noch einige Formularfelder mit versendet werden.

      Prinzipiell funktioniert der Bildupload und auch das Senden der Daten über das Formular funktioniert. Die Daten werden in einer Mysql-DB abgelegt.

      Nun zu meinem Problem. Ich bekomme es nicht gebacken, dass das Bild erst aufgenommen, dann in kleiner Form auf einer Seite dargestellt und über einen separaten Button dann upgeladet wird.

      Kurzum folgender Ablauf:
      1. Bild aufnehmen über Button A
      3. Bild anzeigen auf Seite
      4. Bild upload über Button B

      Mein Momentanes Script funktioniert im folgenden so, dass ein Bild aufgenommen wird und anschließend nicht dargestellt sondern sofort auf den Server übertragen wird.

      Mein JavaScript Code sieht momentan so aus:

      Quellcode

      1. var pictureSource;
      2. var destinationType;
      3. document.addEventListener("deviceready", onDeviceReady, false);
      4. function onDeviceReady() {
      5. pictureSource = navigator.camera.PictureSourceType;
      6. destinationType = navigator.camera.DestinationType;
      7. }
      8. function clearCache() {
      9. navigator.camera.cleanup();
      10. }
      11. var retries = 0;
      12. function onCapturePhoto(fileURI) {
      13. var win = function (r) {
      14. clearCache();
      15. retries = 0;
      16. navigator.notification.alert(
      17. '',
      18. onCapturePhoto,
      19. 'Der Upload wurde abgeschlossen',
      20. 'OK');
      21. console.log(r);
      22. }
      23. var fail = function (error) {
      24. navigator.notification.alert(
      25. 'Bitte versuchen Sie es noch einmal.',
      26. onCapturePhoto,
      27. 'Ein unerwarteter Fehler ist aufgetreten',
      28. 'OK');
      29. console.log("upload error source " + error.source);
      30. console.log("upload error target " + error.target);
      31. if (retries == 0) {
      32. retries ++
      33. setTimeout(function() {
      34. onCapturePhoto(fileURI)
      35. }, 1000)
      36. } else {
      37. retries = 0;
      38. clearCache();
      39. alert('Ein Fehler ist aufgetreten!');
      40. }
      41. }
      42. var options = new FileUploadOptions();
      43. options.fileKey = "file";
      44. options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
      45. options.mimeType = "image/jpeg";
      46. options.chunkedMode = false;
      47. var params = new Object();
      48. params.fileKey = "file";
      49. options.params = {}; // eigene params
      50. var ft = new FileTransfer();
      51. ft.upload(fileURI, encodeURI("http://XXXXXXX/app/upload.php"), win, fail, options);
      52. }
      53. function capturePhoto() {
      54. navigator.camera.getPicture(onCapturePhoto, onFail, {
      55. quality: 50,
      56. destinationType: destinationType.FILE_URI
      57. });
      58. }
      59. function getPhoto(source) {
      60. navigator.camera.getPicture(onPhotoURISuccess, onFail, {
      61. quality: 50,
      62. destinationType: destinationType.FILE_URI,
      63. sourceType: source });
      64. }
      65. function onFail(message) {
      66. alert('Failed because: ' + message);
      67. }
      Alles anzeigen


      Quellcode

      1. <div id="camera">
      2. <button class="camera-control" onclick="capturePhoto();">Foto aufnehmen</button>
      3. <button class="camera-control" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Aus Album wählen</button><br>
      4. <div style="text-align:center;margin:20px;">
      5. <img id="cameraPic" src="" style="width:auto;height:120px;"></img>
      6. </div>
      7. <button class="camera-control" onclick="photoUpload(imageData);">UPLOAD</button>
      8. </div>


      Ich habe schon versucht den Bildupload in eine eigne Funktion zu schreiben und dann über das onclick(); Event im Button zu aktivieren, funktioniert aber nicht:

      Quellcode

      1. function photoUpload(imageData) {
      2. var options = new FileUploadOptions();
      3. options.fileKey = "file";
      4. options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
      5. options.mimeType = "image/jpeg";
      6. options.chunkedMode = false;
      7. var params = new Object();
      8. params.fileKey = "file";
      9. options.params = {};
      10. var ft = new FileTransfer();
      11. ft.upload(fileURI, encodeURI("http://XXXXXX/app/upload.php"), win, fail, options);
      12. }
      Alles anzeigen


      Wo ist der Fehler?
    • Hey Hossi,
      leider find ich es nicht. Ist wohl doch auf dem Arbeitsrechner. Ich poste es dir morgen früh.

      Das Script nimmt ein Foto auf, oder alternativ kannst du eines aus der Galerie auswählen. Anschließend wird ein Thumbnail des aufgenommenen/gewählten Bildes angezeigt.
      Zu guter letzt kann der User dann über das betätigen eines Buttons den Upload auslösen. Als kleines Extra besteht außerdem die Möglichkeit in einer progressbar den Fortschritt des Uploads anzuzeigen.

      Hoffe das hilft dir dann :)
    • So hossi hatte noch geschrieben, dass er auf Stackoverflow noch zwei Antworten erhalten hatte. Vincent hat noch Code gepostet...ich versuche mal, die Einträge nachträglich über die DB einzufügen

      @Vincent Fuhler

      HTML-Quellcode

      1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      2. <html>
      3. <head>
      4. <title>File Transfer Example</title>
      5. <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
      6. <script type="text/javascript" charset="utf-8">
      7. // Wait for device API libraries to load
      8. //
      9. document.addEventListener("deviceready", onDeviceReady, false);
      10. // device APIs are available
      11. //
      12. function onDeviceReady() {
      13. // Retrieve image file location from specified source
      14. navigator.camera.getPicture(
      15. uploadPhoto,
      16. function(message) { alert('get picture failed'); },
      17. {
      18. quality : 50,
      19. destinationType : navigator.camera.DestinationType.FILE_URI,
      20. sourceType : navigator.camera.PictureSourceType.PHOTOLIBRARY
      21. }
      22. );
      23. }
      24. function uploadPhoto(imageURI) {
      25. var options = new FileUploadOptions();
      26. options.fileKey="file";
      27. options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
      28. options.mimeType="image/jpeg";
      29. var params = {};
      30. params.value1 = "test";
      31. params.value2 = "param";
      32. options.params = params;
      33. var ft = new FileTransfer();
      34. ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);
      35. }
      36. function win(r) {
      37. console.log("Code = " + r.responseCode);
      38. console.log("Response = " + r.response);
      39. console.log("Sent = " + r.bytesSent);
      40. }
      41. function fail(error) {
      42. alert("An error has occurred: Code = " + error.code);
      43. console.log("upload error source " + error.source);
      44. console.log("upload error target " + error.target);
      45. }
      46. </script>
      47. </head>
      48. <body>
      49. <h1>Example</h1>
      50. <p>Upload File</p>
      51. </body>
      52. </html>
      Alles anzeigen


      hier das script nimmt ein foto auf zeigt die vorschau an und senden es via ftp ... wenn du daten mitschicken willst häng sie an die url an und lese sie mit der php
      datei aus ($_REQUEST)..... viel spaß


      Und ich schrieb:
      Die upload_photo ausklammern, so dass Du sie auf einen Button legen kannst und mit

      Quellcode

      1. smallImage.src = imageURI;


      und

      Quellcode

      1. <img style="display :none;width:60px;height:60px;" id="smallImage" src="" />


      Das verkleinerte Bild darstellen :)


      @hossi
      Danke so weit mal euch beiden.
      Leider werde ich es wohl erst morgen Abend versuchen können.
      Auf Stockoverflow habe ich auch noch zwei gute Hinweise bekommen, die ich versuchen werde:
      stackoverflow.com/questions/27…king-after-taking-picutre

      Bis bald.

    • Danke euch.
      Naja, heute bekomm ich das wohl nicht mehr hin. Ist schon zu spät ;)
      Das Script hier funktioniert zwar, allerdings lädt er das Bildauswahl-Menü sofort nach dem Laden (klar, steht ja in der onDeviceReady-Funktion drin), zum anderen lädt er das Bild sofort hoch.

      Das muss ich mir morgen nochmal in Ruhe ansehen.
    • Wahrscheinlich weißt Du es bereits, aber für alle Mitleser noch mal: Die Funktion muss gesplitted werden und aus dem onDeviceReady ausgeklammert werden. onDeviceReady heißt (wie der Name schon vermuten lässt) das etwas ausgeführt wird, sobald das Device Ready/Bereit ist. Die Funktionen werden getrennt und dann einfach über ein onclick="function()" aufgerufen.

      Selbiges demnach mit der uploadPhoto Funktion. Diese steht derzeit noch als Direktaufruf in der Bildaufnahme-Funktion

      Quellcode

      1. function onDeviceReady() {
      2. // Retrieve image file location from specified source
      3. navigator.camera.getPicture(
      4. uploadPhoto,


      Wird auch ausgelagert und separat durch ein onclick aufgerufen :)
    • Hier bin ich wieder.
      Leider komme ich mit eurem Code nicht so ganz klar. Auch wenn ich die Funktionen einzeln auslege funktioniert weder ein Button zum Aufnehmen / Auswählen, noch der Upload.

      Dahingehend habe ich meinen eigenen nochmals angepasst.

      Nach der Aufnahme wird nun das Bild dargstellt. Aber leider ist das Auswählen aus der Library nicht möglich und der Upload Button ist ohne Funktion.

      Ideen?

      Quellcode

      1. var pictureSource;
      2. var destinationType;
      3. document.addEventListener("deviceready", onDeviceReady, false);
      4. function onDeviceReady() {
      5. pictureSource = navigator.camera.PictureSourceType;
      6. destinationType = navigator.camera.DestinationType;
      7. }
      8. function clearCache() {
      9. navigator.camera.cleanup();
      10. }
      11. var retries = 0;
      12. function onCapturePhoto(fileURI) {
      13. $("#cameraPic").attr("src", fileURI);
      14. var win = function (r) {
      15. clearCache();
      16. retries = 0;
      17. navigator.notification.alert(
      18. '',
      19. onCapturePhoto,
      20. 'Der Upload wurde abgeschlossen',
      21. 'OK');
      22. console.log(r);
      23. }
      24. var fail = function (error) {
      25. navigator.notification.alert(
      26. 'Bitte versuchen Sie es noch einmal.',
      27. onCapturePhoto,
      28. 'Ein unerwarteter Fehler ist aufgetreten',
      29. 'OK');
      30. console.log("upload error source " + error.source);
      31. console.log("upload error target " + error.target);
      32. if (retries == 0) {
      33. retries ++
      34. setTimeout(function() {
      35. onCapturePhoto(fileURI)
      36. }, 1000)
      37. } else {
      38. retries = 0;
      39. clearCache();
      40. alert('Fehler!');
      41. }
      42. }
      43. function photoUpload() {
      44. var fileURI = $("#cameraPic").attr("src");
      45. var options = new FileUploadOptions();
      46. options.fileKey = "file";
      47. options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
      48. options.mimeType = "image/jpeg";
      49. options.chunkedMode = false;
      50. var params = new Object();
      51. params.fileKey = "file";
      52. options.params = {}; // eig = params, if we need to send parameters to the server request
      53. var ft = new FileTransfer();
      54. ft.upload(fileURI, encodeURI("http://shserver.de/app/upload.php"), win, fail, options);
      55. }
      56. }
      57. function capturePhoto() {
      58. navigator.camera.getPicture(onCapturePhoto, onFail, {
      59. quality: 50,
      60. destinationType: destinationType.FILE_URI
      61. });
      62. }
      63. function getPhoto(source) {
      64. navigator.camera.getPicture(onPhotoURISuccess, onFail, {
      65. quality: 50,
      66. destinationType: destinationType.FILE_URI,
      67. sourceType: source });
      68. }
      69. function onFail(message) {
      70. alert('Failed because: ' + message);
      71. }
      Alles anzeigen




      Quellcode

      1. <div id="camera">
      2. <button class="camera-control" onclick="capturePhoto();">Foto aufnehmen</button>
      3. <button class="camera-control" onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
      4. <div style="text-align:center;margin:20px;">
      5. <img id="cameraPic" src= "" style="width:120px;height:120px;" ></img>
      6. </div>
      7. <button class="camera-control" onclick="photoUpload();">UPLOAD</button>
      8. </div>
      1. [lexicon]Terminal[/lexicon] öffnen cd ~/desktop
      2. cordova create cameraTest com.hossi.de cameraTest
      3. cd cameraTest
      4. cordova platform add ios / cordova platform add android
      5. cordova plugin add org.apache.cordova.camera / org.apache.cordova.file-transfer
      6. cordova build
      Code für die index.[lexicon]html[/lexicon]:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <meta charset="utf-8" />
      5. <meta name="format-detection" content="telephone=no" />
      6. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
      7. <link rel="stylesheet" type="text/css" href="css/index.css" />
      8. <script type="text/javascript" src="js/index.js"></script>
      9. <script type="text/javascript" src="cordova.js"></script>
      10. <script type="text/javascript" charset="utf-8">
      11. var pictureSource; // picture source
      12. var destinationType; // sets the format of returned value
      13. // Wait for device API libraries to load
      14. //
      15. document.addEventListener("deviceready",onDeviceReady,false);
      16. // device APIs are available
      17. //
      18. function onDeviceReady() {
      19. pictureSource=navigator.camera.PictureSourceType;
      20. destinationType=navigator.camera.DestinationType;
      21. }
      22. // Called when a photo is successfully retrieved
      23. //
      24. function onPhotoDataSuccess(imageData) {
      25. // Uncomment to view the base64-encoded image data
      26. // console.log(imageData);
      27. // Get image handle
      28. //
      29. var smallImage = document.getElementById('smallImage');
      30. // Unhide image elements
      31. //
      32. smallImage.style.display = 'block';
      33. // Show the captured photo
      34. // The in-line CSS rules are used to resize the image
      35. //
      36. smallImage.src = "data:image/jpeg;base64," + imageData;
      37. }
      38. // Called when a photo is successfully retrieved
      39. //
      40. function onPhotoURISuccess(imageURI) {
      41. // Uncomment to view the image file URI
      42. // console.log(imageURI);
      43. // Get image handle
      44. //
      45. var largeImage = document.getElementById('largeImage');
      46. // Unhide image elements
      47. //
      48. largeImage.style.display = 'block';
      49. // Show the captured photo
      50. // The in-line CSS rules are used to resize the image
      51. //
      52. largeImage.src = imageURI;
      53. }
      54. // A button will call this function
      55. //
      56. function capturePhoto() {
      57. // Take picture using device camera and retrieve image as base64-encoded string
      58. navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
      59. destinationType: destinationType.DATA_URL });
      60. }
      61. // A button will call this function
      62. //
      63. function capturePhotoEdit() {
      64. // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      65. navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
      66. destinationType: destinationType.DATA_URL });
      67. }
      68. // A button will call this function
      69. //
      70. function getPhoto(source) {
      71. // Retrieve image file location from specified source
      72. navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
      73. destinationType: destinationType.FILE_URI,
      74. sourceType: source });
      75. }
      76. // Called if something bad happens.
      77. //
      78. function onFail(message) {
      79. alert('Failed because: ' + message);
      80. }
      81. </script>
      82. <script>
      83. function uploadPhoto() {
      84. var options = new FileUploadOptions();
      85. options.fileKey="file";
      86. options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
      87. options.mimeType="image/jpeg";
      88. var params = {};
      89. params.value1 = "test";
      90. params.value2 = "param";
      91. options.params = params;
      92. var ft = new FileTransfer();
      93. ft.upload(imageURI, encodeURI("https://www.deine-domain.de/services/upload.php"), win, fail, options);
      94. function win(r) {
      95. console.log("Code = " + r.responseCode);
      96. console.log("Response = " + r.response);
      97. console.log("Sent = " + r.bytesSent);
      98. }
      99. function fail(error) {
      100. alert("An error has occurred: Code = " + error.code);
      101. console.log("upload error source " + error.source);
      102. console.log("upload error target " + error.target);
      103. }
      104. </script>
      105. </head>
      106. <body>
      107. <button onclick="capturePhoto();">Capture Photo</button> <br>
      108. <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
      109. <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
      110. <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
      111. <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
      112. <img style="display:none;" id="largeImage" src="" />
      113. </body>
      114. </html>
      Alles anzeigen


      code für index.css

      Quellcode

      1. *{
      2. margin:0;
      3. padding:0;
      4. border:0;
      5. }
      6. body{
      7. background-color: grey;
      8. }
      9. button{
      10. width: 250px;
      11. height: 70px;
      12. margin: 0 auto;
      13. background-color: black;
      14. border-radius: 15px;
      15. color: white;
      16. margin-top: 10px;
      17. font-size: 18pt;
      18. }
      Alles anzeigen


      So hab ich das gerade getestet, das funktioniert. Meld dich mal, ob es mit dem Script geht. :) Schönes Wochenende
    • Die Plugins sind eingebunden, auch in der config.xml aktiviert.
      Das iOS Projekt ist auch vorhanden, sonst könnte ich es in xcode nicht öffnen ;)
      Und ja, nach jeder Änderung muss ich das mein Projekt sowieso neu builden :)

      Stefans-iMac:carwrapsapp root# [lexicon]cordova[/lexicon] [lexicon]plugin[/lexicon] list
      org.apache.[lexicon]cordova[/lexicon].camera 0.3.3 "Camera"
      org.apache.[lexicon]cordova[/lexicon].contacts 0.2.14 "Contacts"
      org.apache.[lexicon]cordova[/lexicon].device 0.2.12 "Device"
      org.apache.[lexicon]cordova[/lexicon].device-motion 0.2.10 "Device Motion"
      org.apache.[lexicon]cordova[/lexicon].device-orientation 0.3.9 "Device Orientation"
      org.apache.[lexicon]cordova[/lexicon].dialogs 0.2.10 "Notification"
      org.apache.[lexicon]cordova[/lexicon].file 1.3.1 "File"
      org.apache.[lexicon]cordova[/lexicon].file-transfer 0.4.7 "File Transfer"
      org.apache.[lexicon]cordova[/lexicon].geolocation 0.3.10 "Geolocation"
      org.apache.[lexicon]cordova[/lexicon].globalization 0.3.2 "Globalization"
      org.apache.[lexicon]cordova[/lexicon].inappbrowser 0.5.3 "InAppBrowser"
      org.apache.[lexicon]cordova[/lexicon].media 0.2.14 "Media"
      org.apache.[lexicon]cordova[/lexicon].media-capture 0.3.4 "Capture"
      org.apache.[lexicon]cordova[/lexicon].statusbar 0.1.8 "StatusBar"
      org.apache.[lexicon]cordova[/lexicon].vibration 0.3.11 "Vibration"
    • Testweise habe ich das neue Projekt erstellt.

      Tammo schrieb:

      1. [lexicon]Terminal[/lexicon] öffnen cd ~/desktop
      2. cordova create cameraTest com.hossi.de cameraTest
      3. cd cameraTest
      4. cordova platform add ios / cordova platform add android
      5. cordova plugin add org.apache.cordova.camera / org.apache.cordova.file-transfer
      6. cordova build


      Ergänzend hierzu noch in die config.xml folgendes eintragen:
      <feature name="Camera">
      <param name="ios-package" value="CDVCamera" value="true" />
      </feature>

      <feature name="File">
      <param name="ios-package" value="CDVFile" value="true" />
      </feature>

      und in das [lexicon]HTML[/lexicon] noch einen
      <button onclick="uploadPhoto();">upload</button>
      einbinden.

      Funktioniert aber auch nicht. Ich versteh die Welt nicht mehr :/
    • Zeig mir doch bitte mal in der [lexicon]Cordova[/lexicon] Doku wo steht, dass die Config.xml automatisch ergänzt wird ;)

      Weshalb wäre es dann ein Config File, wenn [lexicon]Cordova[/lexicon] die Configuration übernimmt?

      Im übrigen habe ich das Uploadproblem gelöst. Code wird nachgereicht.