How to upload xlsx file with angular and php?

Question

Hello,

I am developing a financial system for client companies that I already own. I am using angular and php. In this system, I have a part that needs to import data in excel. I’m having trouble getting the file and the company ID to send the comic. NOTE: I already have the php code that moves the file to another folder and turns the xlsx into csv.

<button type="file" ngf-select="uploadFiles($file, $invalidFiles)"
accept="*/*" ngf-max-height="1000" ngf-max-size="1MB">Select File</button>

<?php
include_once("con.php");

$pdo = conectar();

$id_empresa = $_POST['id_empresa'];

include_once("PHPExcel/Classes/PHPExcel.php");

$uploadDir = "uploadFile/";

$uploadfile = $uploadDir . $_FILES['arquivo']['name'];

if(move_uploaded_file($_FILES['arquivo']['tmp_name'], $uploadfile)) {
   echo "Dados pegos com sucesso.";
}else{
   echo "Não foi possível pegar arquivo";
}
?>

JS

app.controller('AppController', ['$scope', '$window', 'Upload', function($scope, $window, Upload) {

    $scope.uploadFiles = function(file, errFiles) {
        $scope.f = file;
        $scope.errFile = errFiles && errFiles[0];
        file.id_empresa = $window.localStorage.getItem("idemp");
        id_empresa = $window.localStorage.getItem("idemp");

        if (file) {
            console.log(file);
            file.upload = Upload.upload({
                url: 'http://localhost:8888/sistemas/webApps/fluxo_de_caixa/fluxojoin_2.0/php/importaArquivo.php',
                method: 'POST',
                data: {'id_empresa': id_empresa}
            });

            file.upload.then(function (response) {
                $timeout(function () {
                    file.result = response.data;
                });
            }, function (response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
                file.progress = Math.min(100, parseInt(100.0 * 
                                     evt.loaded / evt.total));
            });
        }   
    }


}]);

Answer 1

I get it. Since you have it, it doesn’t work.

Or you choose to use only native HTML elements, and so when you do Submit is sent by POST the file, like this:

<form method="post" enctype="multipart/form-data">
    <input type="file" name="arquivo" id="arquivo">
    <input type="submit" value="Salvar conta" name="submit">
</form>

This way, it is not Angularjs to receive the file and have to re-upload it.

If you really want to use Angularjs, you have for example the ng-file-upload where you can pre-validate on the client side, such as the file size or type, and then you can use the Upload.upload() to re-upload all data to the server. You have here an example of use.