AngularJS

Question

के साथ शेयरपॉइंट पर ठीक से एन्कोडेड (बेस 64?) छवि अपलोड करें, मैं SharePoint पर एक छवि फ़ाइल अपलोड करने में सक्षम हूं, लेकिन इसे एक छवि के रूप में पहचाना नहीं जा रहा है। मैं अनुसंधान कहा गया है कि छवियों जब SharePoint में अपलोड किया इनकोडिंग base64 होने की जरूरत के आधार पर निम्न निर्देश का उपयोग करने की कोशिश की है, लेकिन यह अभी भी एक फ़ाइल भ्रष्ट हो गया लगता है कि अपलोड करता है: https://github.com/adonespitogo/angular-base64-upload

मैं इस निर्देश का उपयोग करने के लिए खुश हूँ, लेकिन हूँ मुझे SharePoint की REST API में जो चाहिए उसे पास करने के बारे में अनिश्चित।

मूल पुनरावृत्ति मैंने इस निर्देश का उपयोग नहीं किया है, लेकिन यह सीधे अपलोड प्रयास से अधिक है।

1) सफलतापूर्वक बिना यह "भ्रष्ट" किया जा रहा एक छवि अपलोड, और इस बेस 64 एन्कोडिंग की आवश्यकता होती है/मैं यह कैसे प्राप्त करते हैं:

मैं क्या प्राप्त करने की आवश्यकता इस प्रकार है?

2) उनके नाम (नहीं "test.jpg" द्वारा छवियों को अपलोड करें) और कुछ मेटाडाटा (पूर्व के लिए शीर्षक या विभाग नाम से वह संबंधित के साथ एक छवि)

पुनरावृत्ति 1 अपलोड करें:। कोई निर्देशक यहाँ मेरी HTML है (कृपया ध्यान दें कि नियंत्रक एनजी-मार्ग के माध्यम से पेज से जुड़ा हुआ है):

$scope.filesChanged = function (elm) { 
     $scope.files = elm.files 
     $scope.$apply(); 
    } 
    $scope.upload = function() { 
     var fd = new FormData() 
     angular.forEach($scope.files,function(file){ 
      fd.append('file',file) 
     }) 
      $http.post("/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='test.jpg',overwrite='true')", fd, 
        { 
         transformRequest: angular.identity, 
         headers: { 
          'Content-Type':undefined, 'X-RequestDigest': $("#__REQUESTDIGEST").val()} 
       }).success(function (d) { 
        console.log(d); 
       }); 
      } 

:

<div class="col-md-12"> 
     <form> 
      <input type="file" onchange="angular.element(this).scope().filesChanged(this)" data-ng-model="files" multiple> 
      <button data-ng-click="upload()">Submit</button> 
      <li data-ng-repeat="file in files">{{file.name}}</li> 
     </form>    
    </div> 

यहाँ मेरी नियंत्रक है

अद्यतन: मुझे विश्वास है कि यह मुद्दा शेयरपॉइंट पर मेरे $ http पोस्ट को अलग कर दिया गया है। ऊपर उल्लिखित निर्देश का उपयोग करके, मैं बेस 64 को आउटपुट करने में सक्षम हूं, लेकिन मुझे यह सुनिश्चित नहीं है कि अपलोड के लिए मेरी पोस्ट में इसे कैसे पास किया जाए।

पुनरावृत्ति 2:

<form> 
<input type="file" data-ng-model="files" base-sixty-four-input> 
<button data-ng-click="upload()">Submit</button> 
</form> 

मेरे नियंत्रक कि SharePoint करने के लिए भ्रष्ट छवि फ़ाइलों को पोस्ट कर रहा है:

$scope.upload = function() { 
     console.log($scope.files); // Output result from upload directive 
     $http({ 
      method: 'POST', 
      url: "/sites/ens/_api/web/lists/getByTitle('Report Images')/RootFolder/Files/add(url='" + $scope.files.filename +"',overwrite='true')", 
      headers: { 
       'Content-Type': false , 
       'X-RequestDigest': $("#__REQUESTDIGEST").val() 
      }, 
      data: $scope.files, 
     }).success(function (data) { 
      console.log(data); 
     }); 
    } 

अद्यतन निर्देशक यहाँ का उपयोग करते हुए अपने मौजूदा https://github.com/adonespitogo/angular-base64-upload निर्देशों का उपयोग एचटीएमएल है 2: निम्नानुसार SP.RequestExecutor का उपयोग करके एक ही परिणाम बनाता है। एक फ़ाइल अपलोड लेकिन प्रतिपादन नहीं। यह छवियों और दस्तावेजों के लिए होता है:

पुनरावृत्ति 3: निर्देशक और SP.RequestExecutor

$scope.upload = function() { 
    var dataURL = 'data:' + $scope.files.filetype + ';' + 'base64,' + $scope.files.base64; 
    var createitem = new SP.RequestExecutor("/sites/asite"); 
    createitem.executeAsync({ 
     url: "/sites/asite/_api/web/lists/getByTitle('Images')/RootFolder/Files/add(url='" + $scope.files.filename + "')", 
     method: "POST", 
     binaryStringRequestBody: true, 
     body: dataURL, 
     success: fsucc, 
     error: ferr, 
     state: "Update" 
    }); 

    function fsucc(data) { 
     alert('success'); 
    } 
    function ferr(data) { 
     alert('error\n\n' + data.statusText + "\n\n" + data.responseText); 
    } 
} 

का उपयोग करते हुए अद्यतन 3: .ajax का उपयोग करते हुए इस प्रकार है, इसे सफलतापूर्वक छवि पोस्ट करेंगे, लेकिन जब का उपयोग कर $ http, यह छवि दूषित करता है।

पुनरावृत्ति 3: का उपयोग करना .Ajax (काम करता है)

function uploadFileSync(spWebUrl , library, filename, file) 
    { 
     var reader = new FileReader(); 
     reader.onloadend = function(evt) 
     { 
      if (evt.target.readyState == FileReader.DONE) 
      { 
       var buffer = evt.target.result; 
       var completeUrl = spWebUrl 
        + "/_api/web/lists/getByTitle('"+ library +"')" 
        + "/RootFolder/Files/add(url='"+ filename +"',overwrite='true')?" 
        + "@TargetLibrary='"+library+"'&@TargetFileName='"+ filename +"'"; 

       $.ajax({ 
        url: completeUrl, 
        type: "POST", 
        data: buffer, 
        async: false, 
        processData: false, 
        headers: { 
         "accept": "application/json;odata=verbose", 
         "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
         "content-length": buffer.byteLength 
        }, 
        complete: function (data) { 
         //uploaded pic url 
         console.log(data.responseJSON.d.ServerRelativeUrl); 
         $route.reload(); 
        }, 
        error: function (err) { 
         alert('failed'); 
        } 
       }); 

      } 
     }; 
     reader.readAsArrayBuffer(file); 
    } 

पुनरावृत्ति 4: $ http (भ्रष्ट छवि) का उपयोग करना

function uploadFileSync(spWebUrl , library, filename, file) 
{ 
    var reader = new FileReader(); 
    reader.onloadend = function (evt) { 
     if (evt.target.readyState == FileReader.DONE) { 
      var buffer = evt.target.result; 
      var completeUrl = spWebUrl 
       + "/_api/web/lists/getByTitle('" + library + "')" 
       + "/RootFolder/Files/add(url='" + filename + "',overwrite='true')?" 
       + "@TargetLibrary='" + library + "'&@TargetFileName='" + filename + "'"; 

      $http({ 
       url: completeUrl, 
       method: "POST", 
       data: buffer, 
       processData: false, 
       headers: { 
        "accept": "application/json;odata=verbose", 
        "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
        "content-length": buffer.byteLength 
       } 
      }).success(function (data) { 
       //uploaded pic url 
       //console.log(data.responseJSON.d.ServerRelativeUrl); 
       $route.reload(); 
      }).error(function (err) { 
       alert(err); 
      }); 
     } 
    }; 
    reader.readAsArrayBuffer(file); 
} 

Answer 1

हाँ, आप बेस 64 एन्कोडिंग करना चाहिए।

इस article के बाद, अपने filesChanged बेस 64 एन्कोडिंग के लिए समारोह होगा:

$scope.filesChanged = function (input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 

      //Sets the Old Image to new New Image 
      $('#photo-id').attr('src', e.target.result); 

      //Create a canvas and draw image on Client Side to get the byte[] equivalent 
      var canvas = document.createElement("canvas"); 
      var imageElement = document.createElement("img"); 

      imageElement.setAttribute('src', e.target.result); 
      canvas.width = imageElement.width; 
      canvas.height = imageElement.height; 
      var context = canvas.getContext("2d"); 
      context.drawImage(imageElement, 0, 0); 
      var base64Image = canvas.toDataURL("image/jpeg"); 

      //Removes the Data Type Prefix 
      //And set the view model to the new value 
      $scope.data.Photo = base64Image.replace(/data:image\/jpeg;base64,/g, ''); 
     } 

     //Renders Image on Page 
     reader.readAsDataURL(input.files[0]); 
    } 
}; 

आप के लिए मेरी सलाह भी है एनजी मॉडल बदलने के लिए $ से scope.files को $ scope.data.Photo से avoid problems with scope और अपने इनपुट टैग में आईडी जोड़ें।

तो (इस मामले आईडी = "फ़ोटो अपलोड करने की" में), अपलोड करने के लिए अपने HTML तरह दिखेगा:

<input type="file" onchange="angular.element(this).scope().filesChanged(this)" data-ng-model="data.Photo" id="photo-upload" multiple> 

और अपने मामले में आपके द्वारा अपलोड किए पिक का प्रतिनिधित्व करने के लिए, तो आप इस का उपयोग कर सकते हैं:

<img ng-src="data:image/jpeg;base64,{{data.Photo}}" id="photo-id"/> 

मुझे एकाधिक अपलोड के लिए निश्चित नहीं है, लेकिन एकल अपलोड के लिए यह मेरे लिए बहुत अच्छा काम करता है।

आशा है कि यह आपको SharePoint के साथ अपनी समस्या का समाधान करने में मदद करेगा।

शुभकामनाएं!