Виртуальная загрузка на стороне клиента без jQuery

Question

Я использую Cloudinary без jQuery и пытаюсь сделать прямую загрузку через браузер.

Я следил за указаниями HERE и создал предварительный заказ для загрузки под названием seller.

Проблема заключается в том, что когда я делаю сообщения от клиента (используя угловые), я получаю ответ:

XMLHttpRequest cannot load https://api.cloudinary.com/v1_1/mycloud/image/upload. Credentials flag is 'true', but the 'Access-Control-Allow-Credentials' header is ''. It must be 'true' to allow credentials. 

Что я понимаю, это вопрос CORS. Я делаю запрос, как показано ниже.

req = 
    method: 'POST' 
    url: 'https://api.cloudinary.com/v1_1/mycloud/image/upload' 
    headers: 
    'Access-Control-Allow-Credentials': 'true' 
    file: scope.file 
    data: 
    upload_preset: 'seller' 
$http(req) 
    .success (data, status, headers, config) -> 
    console.log 'file is uploaded successfully. Response: ' + data 
    .error (err) -> 
    console.log 'file error', err 

Что мне не хватает? Возможно ли сделать непосредственную загрузку Cloudinary без плагина jQuery?

Answer 1

Вот рабочий раствор с AngularJS 1,3 выполнять прямую неподписанную загрузку на cloudinary без их JQuery плагина:

var file = /* your file */; 
var cloud_name = 'your cloud_name'; 

var fd = new FormData(); 

fd.append('upload_preset', 'seller'); 
fd.append('file', file); 

$http 
    .post('https://api.cloudinary.com/v1_1/' + cloud_name + '/image/upload', fd, { 
     headers: { 
      'Content-Type': undefined, 
      'X-Requested-With': 'XMLHttpRequest' 
     } 
    }) 
    .success(function (cloudinaryResponse) { 

     // do stuff with cloudinary response 
     // cloudinaryResponse = { public_id: ..., etc. } 

    }) 
    .error(function (reponse) { 


    }); 

Answer 2

Чтобы решить многие проблемы, связанные с CORS, и несовместимость браузеров, вам будет лучше использовать либо загрузчик на основе jQuery, либо jQuery.cloudinary.js или ng-file-upload. Здесь вы можете увидеть оба примера: https://github.com/cloudinary/cloudinary_angular/tree/master/samples/photo_album

В частности, запрос CORS отклоняется из-за того, что вы передаете заголовок Access-Control-Allow-Credentials. Попробуйте удалить его.

Answer 3

Если кто-то ищет угловые нг поток + cloudinary решения, которое я создал базовую установку здесь

https://gist.github.com/maruf89/5528df53b133d442b292

Answer 4

Следуйте этому учебник для простого решения, работает очарование ..

http://prasanthco.de/tutorials/cloudinary-image-upload-using-angularjs/

Сделайте это.

Index.html - включают в себя файлы в том же порядке ..

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.1/lodash.min.js"></script> 
<script src="https://github.com/cloudinary/pkg-cloudinary-core/blob/master/cloudinary-core.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.11/ng-file-upload-shim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script> 
<script src="https://github.com/cloudinary/cloudinary_angular/blob/master/js/angular.cloudinary.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.11/ng-file-upload.min.js"></script> 

app.js - впрыскивать модули

var app = angular.module('myApp', [ 
    'cloudinary', 
    'ngFileUpload' 
]); 

home.html - любой вид, где вам нужно загружать изображения опция

<div class="container" ng-hide="loader"> 
    <div class="deal"> 
    <label class="black bold">Upload an Image</label> 
    <br> 
    <div id="direct_upload" 
     ngf-drop="uploadFiles($files)" 
     ngf-drag-over-class="dragOverClass($event)" 
     ng-model="files" 
     ng-multiple="true"> 
     <form> 
      <div class="form_line"> 
       <div class="form_controls"> 
        <div class="upload_button_holder"> 
         <div href="#" class="button" style="width:150px;" ngf-select="uploadFiles($files)" multiple title="upload" resetOnClick="true" >Upload</div> 
        </div> 
       </div> 
       <br> 
      </div> 
     </form> 
    </div> 
    <br> 
</div> 

home.s - соответствующий контроллер

app.controller('homeController', ['$scope','$http', 'Upload', 'cloudinary', function ($scope, $http, $upload, cloudinary) { 

var cloud_name = "your cloud name"; 
var api_key = "your api_key"; 
var public_id = "your public_id"; 
var signature = "your signature"; 
var timestamp = "your timestamp"; 

$scope.uploadFiles = function(files){ 

    if(!files){ 
     return false; 
    }   

    angular.forEach(files, function(file){ 
     if (file && !file.$error) { 
      file.upload = $upload.upload({ 
       url: "https://api.cloudinary.com/v1_1/" + cloud_name + "/upload", 
       data: { 
        timestamp: timestamp, 
        public_id: public_id, 
        api_key: api_key, 
        signature: signature, 
        file: file 
       } 
      }).progress(function (e) { 
       file.progress = Math.round((e.loaded * 100.0)/e.total); 
       file.status = "Uploading... " + file.progress + "%"; 
      }).success(function (data) { 
       console.log('success'); 
       console.log(data); 
       alert('success'); 
      }).error(function (data) { 
       console.log('failed'); 
       console.log(data); 
       alert('failed'); 
      }); 
     } 
    }); 
}; 

}]); 

Надеюсь, это поможет :)