AngularJS एक छवि अपलोड करने के साथ ng-upload

Question

मैं एनजी-अपलोड का उपयोग कर AngularJS में एक फ़ाइल अपलोड करने का प्रयास कर रहा हूं लेकिन मैं मुद्दों में भाग रहा हूं। मेरे एचटीएमएल इस तरह दिखता है:

<div class="create-article" ng-controller="PostCreateCtrl"> 
     <form ng-upload method="post" enctype="multipart/form-data" action="/write" > 
      <fieldset> 
       <label>Category</label> 
       <select name="category_id" class=""> 
        <option value="0">Select A Category</option> 
        <?php foreach($categories as $category): ?> 
         <option value="<?= $category -> category_id; ?>"><?= $category -> category_name; ?></option> 
        <?php endforeach; ?> 
       </select> 

       <label>Title</label> 
       <input type="text" class="title span5" name="post_title" placeholder="A catchy title here..." value="<?= $post -> post_title; ?>" /> 

       <label>Attach Image</label> 
       <input type="file" name="post_image" /> 

       <a href='javascript:void(0)' class="upload-submit: uploadPostImage(contents, completed)" >Crop Image</a> 

       <label>Body</label> 
       <div id="container"> 
       <textarea id="mytextarea" wrap="off" name="post_content" class="span7" placeholder="Content..."><?= $post -> post_content; ?></textarea> 
       </div> 
       <div style='clear:both;'></div> 
       <label>Preview</label> 
       <div id='textarea-preview'></div> 

      </fieldset> 
      <div class="span7" style="margin: 0;"> 
       <input type="submit" class="btn btn-success" value="Create Post" /> 
      <input type="submit" class="btn btn-warning pull-right draft" value="Save as Draft" /> 
      </div> 

     </form> 
    </div> 

और मेरे js नियंत्रक इस तरह दिखता है:

ClabborApp.controller("PostCreateCtrl", ['$scope', 'PostModel', 
function($scope, PostModel) { 

    $scope.uploadPostImage = function(contents, completed) { 
     console.log(completed); 
     alert(contents); 
    } 

}]); 

समस्या का सामना करना पड़ रहा हूँ जब फसल छवि मारा जाता है और यह uploadPostImage कार्यान्वित करता है, यह पूरे फार्म अपलोड करता है । वांछित व्यवहार नहीं है लेकिन मैं इसे काम कर सकता हूं। बड़ी समस्या जेएस में है फ़ंक्शन अपलोडपोस्ट इमेज 'सामग्री' पैरामीटर हमेशा अनिर्धारित होता है, भले ही 'पूरा' पैरामीटर सत्य के रूप में वापस आ जाता है।

लक्ष्य केवल फसल के लिए एक छवि अपलोड करना है। मैं इस प्रक्रिया में क्या गलत कर रहा हूं?

Answer 1

फ़ाइलों को अपलोड करने के लिए कोणीय पर बहुत कम दस्तावेज नहीं है। कई समाधानों के लिए कस्टम निर्देश अन्य निर्भरताओं की आवश्यकता होती है (प्राइमिस में jquery ... बस एक फाइल अपलोड करने के लिए ...)। कई प्रयासों के बाद भी मैं के साथ सिर्फ (v.1.0.6 पर परीक्षण) AngularJS

एचटीएमएल

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> 

AngularJS (1.0.6) "इनपुट पर समर्थन नहीं एनजी मॉडल इस मिल गया है -फाइल "टैग्स ताकि आपको इसे" मूल-मार्ग "में करना होगा जो उपयोगकर्ता से सभी (अंततः) चुनी गई फ़ाइलों को पास करता है।

नियंत्रक

$scope.uploadFile = function(files) { 
    var fd = new FormData(); 
    //Take the first selected file 
    fd.append("file", files[0]); 

    $http.post(uploadUrl, fd, { 
     withCredentials: true, 
     headers: {'Content-Type': undefined }, 
     transformRequest: angular.identity 
    }).success(...all right!...).error(..damn!...); 

}; 

शांत हिस्सा अपरिभाषित सामग्री प्रकार और transformRequest है: angular.identity कि $ http पर सही चयन करने की क्षमता देने "सामग्री प्रकार "और मल्टीपार्ट डेटा को संभालने के दौरान आवश्यक सीमा का प्रबंधन करें।

Answer 2

आप ng-file-upload कोणीय प्लगइन का प्रयास कर सकते हैं।

एंजुलरजेस विनिर्देशों के साथ सेटअप और सौदा करना काफी आसान है। यह प्रगति, रद्द, खींचें और ड्रॉप का समर्थन करता है और क्रॉस ब्राउज़र है।

एचटीएमएल

<!-- Note: MUST BE PLACED BEFORE angular.js--> 
<script src="ng-file-upload-shim.min.js"></script> 
<script src="angular.min.js"></script> 
<script src="ng-file-upload.min.js"></script> 

<div ng-controller="MyCtrl"> 
    <input type="file" ngf-select="onFileSelect($files)" multiple> 
</div> 

जे एस:

//inject angular file upload directives and service. 
angular.module('myApp', ['angularFileUpload']); 

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { 
    $scope.onFileSelect = function($files) { 
    //$files: an array of files selected, each file has name, size, and type. 
    for (var i = 0; i < $files.length; i++) { 
     var file = $files[i]; 
     $scope.upload = $upload.upload({ 
     url: 'server/upload/url', //upload.php script, node.js route, or servlet url 
     data: {myObj: $scope.myModelObj}, 
     file: file, 
     }).progress(function(evt) { 
     console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
     }).success(function(data, status, headers, config) { 
     // file is uploaded successfully 
     console.log(data); 
     }); 
    } 
    }; 
}]; 

Answer 3

उल्लेख किया तरीकों से ऊपर मेरे मामले में php के साथ ठीक से काम करते हैं, लेकिन जब मैं Node.js में इन तरीकों के साथ फ़ाइलों को अपलोड करने की कोशिश तो मैं कुछ समस्या है । तो $ http ({.., .., ...}) का उपयोग करने के बजाय सामान्य jquery AJAX का उपयोग करें।

चयन फ़ाइल उपयोग के लिए इस

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this)"/> 

और में नियंत्रक

$scope.uploadFile = function(element) { 
var data = new FormData(); 
data.append('file', $(element)[0].files[0]); 
jQuery.ajax({ 
     url: 'brand/upload', 
     type:'post', 
     data: data, 
     contentType: false, 
     processData: false, 
     success: function(response) { 
     console.log(response); 
     }, 
     error: function(jqXHR, textStatus, errorMessage) { 
     alert('Error uploading: ' + errorMessage); 
     } 
}); 
}; 

Answer 4

त्रुटि फ़ाइल अपलोड करते समय: "कंटेनर में कोई विधि से निपटने पोस्ट है"

App.service('fileUpload', ['$http', function($http) { 
    this.uploadFileToUrl = function(file, uploadUrl) { 
     console.log("inside upload file service js "); 
     var fd = new FormData(); 
     fd.append('file', file); 

     $http.post(uploadUrl, fd, { 
       transformRequest: angular.identity, 
       headers: { 
        'Content-Type': undefined 
       } 
      }) 
      .success(function(response) { 

       console.log("file uploaded sucessfully " + response); 

      }) 
      .error(function(error) { 

       console.log("Error while uploading file " + JSON.stringify(error)); 
      }); 
    } 
}]); 

{ "त्रुटि ": {" name ":" त्रुटि "," स्थिति ": 404," संदेश ":" साझा कक्षा \ "कंटेनर \" में कोई विधि हैंडल नहीं है आईएनजी पोस्ट/5555-1111 "," statusCode ": 404," ढेर ":" त्रुटि: