How to send image to server on AngularJS?

Question

I am trying to send image to server with some additional data. My issue is that the image is not getting saved on server where other recordings are.

below is my .html code :

<div class="widget uib_w_4 d-margins" data-uib="media/file_input" data-ver="0">
   <input type="file" name="image" id="image" 
      accept="image/jpeg, image/png, image/gif" 
      ng-model="image" class="ng-pristine ng-untouched ng-valid">
</div>
<div class="widget uib_w_5 d-margins" data-uib="media/text" data-ver="0">
   <div class="widget-container left-receptacle"></div>
   <div class="widget-container right-receptacle"></div>
   <div>
      <p>Username:</p>
   </div>
</div>

JS code

< script >
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.SendData = function()
    var data = $.param({
        image: $scope.image,
        username: $scope.username,
    });

    var config = {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;
                charset = utf - 8;
                '
        }
    }
    var param = getParameterByName('id');
    $http.post('myrurl.php', data, config)
        .success(function(data, status, headers, config) {
        window.location.href = 'view.html';
    })
        .error(function(data, status, header, config) {
        alert('Please retry');
    });
};
}); 
< /script>

I tried to to print the value in PHP using print_r($_REQUEST);

The value of image is null.

How can I send my image to the server?

server code is fine i tried to check via printing request by image value is blank — mdeveloper, Nov 08 '15 at 12:45
i use a separate enpoint on the server for the image upload only. The user has to upload the image first, then send the form data.. But either way, I prep the image as a formData before sending it to the server — MayK, Nov 08 '15 at 12:50
can u create fiddle example or guide me sample url, but i do not want to send as two request — mdeveloper, Nov 08 '15 at 12:57
check the third answer http://stackoverflow.com/questions/18571001/file-upload-using-angularjs — MayK, Nov 08 '15 at 13:03

score 1 · Answer 1 · edited Jul 07 '17 at 17:06

Pretty easy. A good approach can be to Base64 encode the image, then send that Base64 to the server; the best part is that PHP natively supports decoding Base64.

You can do something like:

<!-- In your HTML file -->
<input type="file" id="file" /> 
<input type="submit" ng-click"uploadFile" value="Upload File"/>

Then, in your JavaScript:

$("#file").on('change', function(event) {

    var reader = new FileReader();
    reader.onload = function( loadEvent ) {

        $scope.fileData = loadEvent.target.result;
        $scope.$apply();

    };

    reader.readAsDataURL( event.target.files[0] );

});

$scope.uploadFile = function() {

    if ( $scope.fileData === null || $scope.fileData === "" || !($scope.fileData) ) {
        alert("No file has been uploaded");
        return;
    }


    var dtx = eval("(" + atob($scope.fileData.substring("data:application/json;base64,".length)) + ")");

    $http.get( 'yourScript.php?data=' + encodeURIComponent( JSON.stringify(dtx) ) ).then( function(response) {

        if( response.data.status_code == 200 ) {

            // Done!

        } else { ERROR }

    });

};

Lastly, in your PHP file you can:

$imageData = base64_decode( $_GET[ 'data' ] ); // Now you have a binary image file. Do whatever you want!

Can you tell me a little more about the error? Also, remember that this code is just an example. You HAVE to edit it for your needs. — weirdpanda, Nov 08 '15 at 15:09
Works perfectly on my machine! Wait. Have you tried to debug it? Have you included jQuery? — weirdpanda, Nov 08 '15 at 15:38
That is the full code, you need to edit it according to your needs. I am just giving you with the info which is required to set the ball rolling. — weirdpanda, Nov 08 '15 at 16:04
@ weirdpanda http://stackoverflow.com/questions/43315615/how-to-upload-the-image-in-public-folder-and-retrieve-it-in-angularjs-mean-stack — jose, Apr 10 '17 at 06:37

How to send image to server on AngularJS?

1 Answers1