CODEWITHSUNDEEP
javascriptangularjsfile-uploadgulpng-file-upload
Rian
Rian

Reputation: 201

Getting Error Code 405 when uploading files using ng-file-upload

I am trying to implement a file upload functionality using ng-file-upload based on an example found here.

Everything seems to be working fine except that when I try to upload the file to my local webserver, I get an Error Code 405 (Method not allowed).

Here is a part of my markup:

<div class="block form-group">
        <label for="photo">Photos:</label>
        <input type="file" ngf-select ng-model="addCourtCtrl.picFile" name="file"
               accept="image/*" ngf-max-size="2MB" required
               ngf-model-invalid="errorFile">
        <img ng-show="addRegisterForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> 
        <button ng-click="addCourtCtrl.picFile = null" ng-show="addCourtCtrl.picFile">Remove</button>
        <br>
        <button ng-click="addCourtCtrl.uploadPic(addCourtCtrl.picFile)">
            Upload
        </button>
        <span class="progress" ng-show="addCourtCtrl.picFile.progress >= 0">
            <div style="width:{{addCourtCtrl.picFile.progress}}%"
                 ng-bind="addCourtCtrl.picFile.progress + '%'"></div>
        </span>
        <span ng-show="picFile.result">Upload Successful</span>
        <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
    </div>

and here's the definition of my upload function:

this.uploadPic = function (file) {
        file.upload = Upload.upload({
            url: '/www/images/uploads/courts',
            data: { username: __this.username, file: file },
        });

        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data;
            });
        }, function (response) {
            alert('Upload Failed');
            if (response.status > 0)
                __this.errorMsg = response.status + ': ' + response.data;
        }, function (evt) {
            // Math.min is to fix IE which reports 200% sometimes
            file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
    }

I am using gulp's webserver to run this application and the error doesn't show when I use the same upload url from the example.

I have been looking at some questions related to this issue but I am new to Angular and I find most of the answers a bit too complicated.

I wish someone could help me. Thanks in advance.

Upvotes: 0

Views: 819

Answers (1)

Mike Wojtyna
Mike Wojtyna

Reputation: 771

You are most probably facing the CORS issue. Ajax requests from browser are rejected if performed from different domain. You need to add CORS headers to your backend. Please, take a look here to learn more about CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.

Upvotes: 1

Related Questions