Image upload using Angularjs

Asked

Viewed 533 times

0

I have this Angularjs:

app.controller("templateController", function ($scope, $http, $timeout) {             
     $scope.save = function () {
        $scope.mensagePage = {class: 'warning', text: 'Processando...'};
        var dados = $scope.obj;
        $http.post(basePath + 'gerenciar/templates_save', dados).
        then(function (response) {
            $scope.obj = {};
            $scope.mensagePage = {class: response.data.class, text: dados};
            $timeout(function () {
            $scope.mensagePage = null;
            $scope.template = 'list';
            listar();
         }, 150000000);

         }, function (response) {
            $scope.mensagePage = {class: 'error', text: response.statusText};
         });
    };
}

The main idea, he is doing, which is registering the form data in the database.

Now here’s the thing... I have the structure:

<div class="row" ng-if="template == 'add'"> 
    <div class="col-md-12">
        <div ng-if="mensagePage">
            <div class="alert alert-{{mensagePage.class}}">{{mensagePage.text}}</div>
        </div>
        <p>Preencha o formulário para cadastrar um novo template.</p>
        <br/> 
        <div class="row">
            <div class="col-md-12 form-group">
                <p><b>INFORMAÇÕES DO TEMPLATE:</b></p>
            </div> 
            <div class="col-md-12 form-group">

                <div class="col-md-6 form-group">
                    <label>Título do Template</label>
                    <input data-my-Directive ng-model="obj.titulo_template" class="form-control" type="text"/>
                </div>
                <div class="col-md-6 form-group">
                    <label>Fundo</label>
                    <input ng-model="obj.file" class="form-control" type="file"/>
                </div>

                <br/>
                <button ng-click="save()" class="btn btn-success">Salvar</button>
                <button ng-click="voltar('list')" class="btn btn-warning">Voltar</button>
                <br/><br/>
            </div>
        </div>
    </div>
</div>

Note that I have here:

<input ng-model="obj.file" class="form-control" type="file"/>

But I can’t get a way to capture which file is being uploaded.

Follow tempaltes_save (method for insertion)

public function save($data) {
    if (isset($data['id'])) {
        $data['updated_at'] = date('Y-m-d H:i:s');
        $this->db->where('id', $data['id']);
        $this->db->set($data);
        return $this->db->update($this->table);
    } else {

        # Se tiver imagem
        if(!empty($data['file'])){
            $data['fundo'] = $this->enviar_imagem('templates');
        }               

        $data['id_assinante'] = $this->session->userdata('id_usuario');
        $data['created_at'] = date('Y-m-d H:i:s');
        return $this->db->insert($this->table, $data);
    }
}

Function to send image:

# Enviando imagem
public function enviar_imagem($pasta=null){

    #diretorio de upload
    $diretorio = 'assets/uploads/'.$pasta;

    if(!is_dir($diretorio)){
        mkdir($diretorio, 0777, TRUE);
        chmod($diretorio, 0777);
    }

    #configuracoes base
    $config['upload_path'] = $diretorio;
    $config['allowed_types'] = 'gif|jpg|jpeg|png|pdf';
    $config['remove_spaces'] = TRUE;
    $config['encrypt_name'] = TRUE;
    $config['max_size'] = '8192'; // 8Mbs

    #inicia a biblioteca
    $this->load->library('upload', $config);
    $this->upload->initialize($config);

    #faz upload
    $this->upload->do_upload(); 
    $arquivo = $this->upload->data();

    #dados do banco de dados
    $file = $arquivo['file_name'];
    $path = $arquivo['full_path'];
    $url = $diretorio.'/'.$file;
    $tamanho = $arquivo['file_size'];
    $tipo = $arquivo['file_ext'];

    return $file;
}

My point is: How I can upload using Angularjs, or just direct this field to PHP?

  • 1

    https://github.com/danialfarid/ng-file-upload

  • @Diegoaugusto I could not use the example :(

  • What went wrong?

  • I don’t even know where to start setting him up, inside what I posted, I don’t know anything about Angular.

  • It’s simple, there are several examples in jsfiddle. Just install lib and copy and paste the code. You only have to prepare your back-end to receive a file

  • Is that in the context there, I would need to adapt this lib, and that’s where I’m not knowing

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.