AngularJS Caricare un file e inviarlo a un DB

Question

Ho cercato di ottenere ngFileUpload funzionante in modo che possa caricare immagini e averli inviati a un DB-nel mio caso un mongoLab DB che accetta oggetti JSON che possono essere POST con una sintassi come questa:

$http.post('myMongoName/myDb/myCollection/myTable', {'key': 'value'}) 

Abbastanza semplice. Tuttavia, sono confuso su come inviare le immagini caricate usando ngFileUpload nel DB. Sto utilizzando la sintassi familiare introdotto sulla pagina di documentazione di ngFileUpload:

$scope.upload = function (files) { 
     if (files && files.length) { 
      for (var i = 0; i < files.length; i++) { 
       var file = files[i]; 
       console.log(file); 
      Upload.upload({ 
       url: myMongoLabURL, 
       fields: {'sup': 'sup'}, 
       file: file 
       }) 
      }).success(function (data, status, headers, config) { 
        console.log('file ' + config.file.name + 'uploaded. Response: ' + data); 
       }); 
      } 
     } 
} 

Ma, al momento la registrazione l'oggetto file fuori, ottengo l'oggetto:

File {} 
$$hashKey: "object:76" 
lastModified: 1433922719000 
lastModifiedDate: Wed Jun 10 2015 00:51:59 GMT-0700 (PDT) 
name: "1.png" 
size: 138024 
type: "image/png" 
webkitRelativePath: "" 
__proto__: File 

Nessuno dei quali, contengono il binario immagine reale che potrebbe essere memorizzato nel DB. In sostanza non ho idea di dove sia effettivamente caricata l'immagine stessa!

È anche importante notare che non ricevo una risposta dal server con questa sintassi, anche se, se potessi ottenere il file binario dell'immagine, potrei semplicemente usare il familiare metodo $http.post e inserire l'immagine nel DB da solo.

Come posso trovare il file binario dell'immagine caricata e inserirlo nel DB? Dove esiste l'immagine, dopo essere stata caricata, e dove viene caricata? Sto facendo tutto questo su localhost quindi sembra che il browser abbia letto tutte le proprietà dell'immagine, ma non sono sicuro di come trasformarlo in informazioni significative che posso usare per memorizzare l'immagine nel mio DB esterno.

Grazie per qualsiasi aiuto.

Answer 1

Ho finito per utilizzare il FileReader API. Più precisamente, leggendo l'URI come blob. Ho implementato qualcosa di simile al seguente in una direttiva personalizzata. Ho finito per includere molte letture attrs che consentirebbero l'uso della direttiva più volte in ambiti isolati nella stessa pagina, ma lo lascerò qui. Posso fornirvi il intera direttiva se sarebbe utile se, ma per breve tempo, sembrava qualcosa di simile:

function create_blob(file) { 
    var deferred = $q.defer(); 
    var reader = new FileReader(); 
    reader.onload = function() { 
      deferred.resolve(reader.result); 
    }; 
    reader.readAsDataURL(file); 
    return deferred.promise; 
} 
$scope.$watch('files', function() { 
    $scope.upload($scope.files); 
}); 
$scope.upload = function(files) { 
    $scope.loading = true; 
    if (files && files.length) { 
     for (var i = 0; i < files.length; i++) { 
      var file = files[i]; 
      var promise = create_blob(file); 
      promise.then(function(result) { 
       var thumb = resize(result); 
       Upload.http({ 
        url: '/path', 
        data: result 
       }) 
       .progress(function (evt) { 
        console.log(evt); 
        var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
        console.log('progress: ' + progressPercentage + '% '); 
       }) 
       .success(function (data, status,headers,config) { 

... ecc.

Penso che lo farà per voi. Ottenere i dati blob può essere fonte di confusione perché quando carichi l'immagine non puoi vedere nessuno dei suoi dati nello scope, anche se il resto dei metadati dell'immagine apparirà! Questa funzione create_blob dovrebbe ottenerla anche se in formato blob. Prova a fare un console.log(reader.readAsDataURL(file); all'interno di quella funzione per vedere direttamente i dati.

Mi ci è voluto molto tempo per capire, e non sono sicuro se questo è il modo migliore per farlo, se qualcuno lo sa meglio, non esitate a suggerire! :-)