Caricamento di file nell'applicazione ionica tramite l'API Web

Question

Il mio problema è il seguente.

Ho fornito l'API WEB dove devo aggiungere l'immagine delle schede.

Cosa devo fare?

• utente deve in grado di selezionare un'immagine dal telefono
• L'utente può aggiungere il nome della scheda
• Quando l'utente clicca su invia, entrato nome della scheda e l'immagine di bordo deve inviare tramite API Web con metodo PUT. Qui di seguito è WEB API dettagli

dettagli WEB API

Header

• URL: https://example.com
• Content-Type: | Tipo di contenuto |
• Metodo: PUT

dati

• board_id: 321
• board_title: | Titolo |
• board_background: | File |

ho usato cordovaImagePicker plugin per selezionare l'immagine e poi mi si blocca per caricarlo su server.

Posso usare il plugin per il trasferimento di file cordova ma penso che in questo caso non mi sarà d'aiuto in quanto non esiste un luogo specifico in cui archiviare l'immagine. Tutta la gestione dei file effettuata da WEB API, dobbiamo solo pubblicare file con Data.

Answer 1

Dopo aver provato una soluzione molto sono venuto con la risposta qui sotto.

Scheda.html

<ion-view> 
     <ion-nav-bar class="bar"> 
      <ion-nav-title> 
       <h1 class="title"> 
        Create Board 
       </h1> 
      </ion-nav-title> 
     </ion-nav-bar> 
     <form name="boardForm" ng-submit="addBoard(data)"> 
      <ion-content padding="false" scroll="true" has-bouncing="false"> 
       <div id="form"> 
        <div style="text-align: center; padding-top: 2%; padding-bottom: 2%;"> 
         <div id="image-preview"> 
          <label for="image-upload" id="image-label"><img src="{{ImagePrefix}}/task_plus.png" alt=""/></label> 
          <input type="file" name="board_background" id="image-upload" file-model="data.board_background"> 
         </div> 
         <p>Add Cover</p> 
        </div> 
        <ion-list> 
         <ion-item style="background-color: #F8F8F8;"> 
          <label class="control-label" for="board_name">BOARD NAME</label> 
         </ion-item> 
         <ion-item ng-class="{true:'error'}[submitted && boardForm.board_title.$invalid]"> 
          <input type="text" id="board_name" ng-model="data.board_title" 
            placeholder="Add a Name" name="board_title" required> 

          <p ng-show="submitted && boardForm.board_title.$error.required"> 
           Please enter a board name 
          </p> 
         </ion-item> 
        </ion-list> 
       </div> 
      </ion-content> 
      <ion-footer-bar> 
       <button class="button button-block control-button bottomOfPage" 
         ng-click="submitted = true"> 
        CREATE 
       </button> 
      </ion-footer-bar> 
     </form> 
    </ion-view> 

direttiva

.directive('fileModel', ['$parse', function ($parse) { 
      return { 
       restrict: 'A', 
       link: function (scope, element, attrs) { 
        var model = $parse(attrs.fileModel); 
        var modelSetter = model.assign; 

        element.bind('change', function() { 
         scope.$apply(function() { 
          modelSetter(scope, element[0].files[0]); 
         }); 
        }); 
       } 
      }; 
     }]) 

controller

.controller('ManageBoardCtrl', function ($scope, $http, $ionicPopup, $state, BoardService) { 
      $scope.submitted = false; 
      $scope.data = {}; 
      $scope.addBoard = function(formData) { 
       BoardService.CreateBoard(formData).then(function(response) { 
        if (response === "success") { 
         $ionicPopup.alert({ 
          title: "Success", 
          template: "Board created successfully" 
         }); 
        } 
       }, function (response) { 
        $ionicPopup.alert({ 
         title: "Failed", 
         template: "Somethings wrong, Can not create boards at now." 
        }); 
       }); 
      } 
     }) 

Servizio

.service('BoardService', function ($q, $http) { 
      var getUrl = API_URL + "boards"; 

      var createBoard = function (fData) { 
       var formData = new FormData(); 
       formData.append("board_title", fData.board_title); 
       formData.append("board_background", fData.board_background); 

       return $q(function (resolve, reject) { 
        $http({ 
         transformRequest: angular.identity, 
         method: 'POST', 
         url: getUrl, 
         headers: { 'Content-Type': undefined }, 
         data: formData 
        }).success(function (response) { 
         if (response.success === true) { 
          resolve('success'); 
         } else { 
          reject('fail'); 
         } 
        }).error(function() { 
         reject('requesterror'); 
        }); 
       }); 
      }; 

      return { 
       CreateBoard: createBoard 
      }; 
     }) 

Dopo aver distribuito l'applicazione per la selezione di file Android/iPhone, verranno gestite le immagini di navigazione basate sul sistema operativo.

Answer 2

Una cosa semplice che posso suggerire,

Usa ingresso tag [ "file"] per selezionare l'immagine. Otterrai l'oggetto file e un URL temporaneo. con questo URL puoi mostrare l'immagine nel modulo.

Quindi utilizzare formData per aggiungere l'immagine e l'altro campo.

ad es.

var fd = new FormData(); 
fd.append('board_background', $scope.image, $scope.image.name); 
fd.append('board_id', 321); 
fd.append('board_title', 'Dummy title'); 

var xhr = new XMLHttpRequest(); 
xhr.open('PUT', YOUR_URL, true); 

xhr.onload(function(res){ 
    // Write your callback here. 
}); 

// Send the Data. 
xhr.send(fd); 

Spero che ti aiuti e soddisfi le tue esigenze.

Answer 3

Di seguito link viene sicuramente aiutare:

http://ionicmobile.blogspot.in/2015/10/jquery-file-upload.html

apportare le modifiche appropriate se necessario. Qualsiasi aiuto fammi sapere ...

Answer 4

Prima di tutto è necessario selezionare l'immagine dal dispositivo.

vm.getImages = function() { 
      var options = { 
       quality: 70, 
       destinationType: Camera.DestinationType.DATA_URL, 
       sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
       allowEdit: true, 
       correctOrientation:true, 
       encodingType: Camera.EncodingType.JPEG, 
       targetWidth: 300, 
       popoverOptions: CameraPopoverOptions, 
       saveToPhotoAlbum: true 
      }; 

      navigator.camera.getPicture(onSuccess, onFail, options); 

      function onSuccess(imageURI) {     
       vm.image = "data:image/jpeg;base64," + imageURI; 
       vm.imageURI = imageURI; 
      } 

      function onFail(message) {     
       console.log('Failed because: ' + message); 
      } 
     }; 

È possibile modificare il tipo di sorgente per l'input, se necessario.

sourceType: Camera.PictureSourceType.CAMERA, 

In caso di successo si ottiene ImageURI né usarlo direttamente o convertirlo in Base64 come indicato di seguito per il caricamento.

vm.image = "data:image/jpeg;base64," + imageURI; 

Dopo questo è possibile utilizzare il FileTransfer plugin caricare il file e monitorare i progressi allo stesso tempo.

cordovaFileTransfer.upload() 
       .then(function (result) {}, 
        function (err) {}, 
        function (progress) {});