Uploading Angular Files

Question

Uploading Angular Files

Navigation

#1 by (1 votes)

0

I have a button where I select a file, I would like to upload this file to my server ( Java + Vraptor ). I can already get the file and also save the file name in the database along with the data of the collaborator. Now we just need to send this file to the server. I'm using this template.

I upload it this way:

    $scope.uploadFiles = function(file) {
        $scope.f = file;

    }

    var salvarImagem = function(file) {
        if (file && !file.$error) {
            file.upload = Upload.upload({
                //Não sei o que colocar aqui!
                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                data: {
                    file: file
                }
            });

            file.upload.then(function(response) {
                $timeout(function() {
                    file.result = response.data;
                    console.log("REsposta: " + response.data);
                });
            }, function(response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ': ' + response.data;
            });

            file.upload.progress(function(evt) {
                file.progress = Math.min(100, parseInt(100.0 *
                    evt.loaded / evt.total));
            });
        }
    }

Then I call the function salvarImagem within my function that saves the Contributor:

$scope.adicionarColaborador = function(colaborador) {
        if (!editar) {
            colaborador.arquivo = $scope.f.name;
            console.log('colaborador: ' + colaborador.arquivo)
            colaboradorAPI.saveColaborador(colaborador).success(function(data) {
            salvarImagem($scope.f);

         .../Código omitido

What is the next step now? How to receive this image on my server and save it to a directory, or how to save that image to a direct directory?

rest angularjs upload vraptor

asked by anonymous 28.09.2015 / 16:53

1 answer

New PHP line in fopen function Organize time table in Database [closed]

score 1 · Accepted Answer

I'm starting to work with Angular now and I've just come across the need to upload directly to a server. I also used this ng-file-upload. I did the same way of the example, just changing the url: ' link ' to the path of my server. For tests, I uploaded a python server to receive this file. If you help, follow the snippets:

JavaScript:

mainCtrl.controller('uploadCtrl', function ($scope, Upload, $timeout) {
$scope.uploadFiles = function(file, errFiles) {
    $scope.f = file;
    $scope.errFile = errFiles && errFiles[0];
    if (file) {
        file.upload = Upload.upload({
            url: 'http://192.168.1.112:5000/uploadImg',
            data: {file: file}
        });

        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data;
                console.log("REsposta: " + 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));
        });
    }   
}
});

HTML:

<div ng-controller="uploadCtrl">
        <label>Selecione a imagem</label>
        <button type="file" ngf-select="uploadFiles($file, $invalidFiles)" accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">Adicionar</button>
        <br><br>
        Arquivo:
        <div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
            <span class="progress" ng-show="f.progress >= 0">
                <div style="width:{{f.progress}}%" ng-bind="f.progress + '%'"/>
            </span>
        </div>  
    </div>

Python:

app = flask.Flask(__name__)

@app.route('/uploadImg', methods=['POST', 'GET', 'OPTIONS'])
@crossdomain(origin="*")
def uploadImg():
    file = flask.request.files['file']
    filename = file.filename
    file.save('/tmp/'+ filename)
    return json.dumps('foo')

if __name__ == "__main__":
    app.run(host='0.0.0.0', debug=True)