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
– mdeveloper, Commented Nov 8, 2015 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
– MayK, Commented Nov 8, 2015 at 12:50
can u create fiddle example or guide me sample url, but i do not want to send as two request — mdeveloper
– mdeveloper, Commented Nov 8, 2015 at 12:57
check the third answer stackoverflow.com/questions/18571001/… — MayK
– MayK, Commented Nov 8, 2015 at 13:03

Markus Pscheidt · Accepted Answer · 2017-07-07 17:06:06Z

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.
Works perfectly on my machine! Wait. Have you tried to debug it? Have you included jQuery?
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.

Collectives™ on Stack Overflow

How to send image to server on AngularJS?

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related