Upload image Laravel without form AngularJS

Question

I need upload image with AngularJS without form. but I don't know how to receive it in Laravel, send it. My code is this:

<input type="file" name="file" accept="image/jpeg, image/png" id="file" ng-model="data.image">


$('input[type=file]').change(function () {
    $scope.img = this.files[0];
    var filePath = $("#file").val();
    var reader = new FileReader();
    reader.onload = function (e) {
        $('#image').attr('src',e.target.result);
        $scope.img["imgbase64"] = e.target.result;
    };
    reader.readAsDataURL(this.files[0]); 
});

I use the service here:

        var imgSend = new FormData();
        imgSend.append("file",$scope.img);
        data["image"] = imgSend;
            url = "maquinas";    registroMaquinaServices.servicesRegistroMaquinaPost(url,data).then(function(promise){
                    var requests = promise.data.response;
                    console.log(requests);
                })

I'm sending this to laravel.

Thanks.

Answer 1

You can use https://github.com/ghostbar/angular-file-model to handle your image file for uploading and then you will be able to create form object and send it to your laravel server to be able to get the image file as regular uploaded file, not a base64 encoded one. this is the code i use to do so in the example all of the data that needs to be sent to server is in $scope.data variable

$http({
    headers: {
        'Content-Type': undefined //undefined value is on purpose
    },
    method: method,
    url: url,
    data: $scope.data,
    transformRequest: function(data, headersGetter) {

        var formData = new FormData();

        angular.forEach(data, function(value, key) {
            formData.append(key, value);
        });

        return formData;
    }
})