Carregar imagens é uma dor de cabeça. No cliente há input type = ‘file’, mas parece terrível e pode ser difícil de estilizar sem plug-ins adicionais. Além disso, você precisa enviar o formulário usando multiparte – seja o que for. No servidor não é melhor. Hospedar imagens pode ser caro para seu banco de dados e sua conta bancária. Configurar buckets AWS S3 e urls de referência em seu banco de dados é uma solução, mas demorado, especialmente se você não estiver familiarizado com o AWS. Tudo o que você quer fazer é permitir que os usuários carreguem uma foto de perfil! Digite Filestack , anteriormente denominado Filepicker.io.

tl; dr código-fonte no github .

iniciar

Vamos construir este tutorial usando a extremamente popular MEAN stack, que significa MongoDB, Express (um servidor web), Angular.js (estrutura de front-end) e Node.js (linguagem de script, ou seja, os javascripts ).

Eu construí um repositório que atua como um modelo inicial para aplicativos MEAN. Clone isso para começar um novo projeto.

$ git clone git@github.com:cleechtech/mean-starter.git
$ cd mean-starter
$ npm install
$ node server

Em seguida, inscreva-se para uma conta de arquivo de arquivos grátis. Um ponto especial é que a camada gratuita suporta apenas 250 uploads de arquivos. Depois disso, o serviço custa US $ 99 por mês. Isso não é o ideal, mas se você está tentando fazer um MVP funcionar rapidamente, 250 há muitos arquivos!

Adicione a biblioteca javascript filestack ao seu projeto. Podemos adicioná-lo via cdn:
<script type="text/javascript" src="//api.filestackapi.com/filestack.js"></script>

Ou instale-o com bower: $ bower install filepicker-js --save

De qualquer forma, faça referência à biblioteca em public / index.html .

Configure Angular.js

Como estamos trabalhando com o angular, podemos usar o módulo angular-filepicker que as boas pessoas em filestack / filepicker (lembre-se de que mudaram de nome recentemente) fornecem para nós. Instale isso com caramanchão:

$ bower install angular-filepicker --save

Adicione a tag de script a public / index.html (após angular.js!):

<script src="bower_components/angular-filepicker/dist/angular_filepicker.js"></script>

e, em seguida, declare o módulo como uma dependência em public / js / app.js :

var app = angular.module('mean-boilerplate', [
    'ui.router',
    'angular-filepicker'
]);

No mesmo arquivo, configure sua chave api:

app.config(function($stateProvider, $urlRouterProvider, filepickerProvider){
    $stateProvider
        .state('home', {
            url: "/",
            templateUrl: "templates/home.html",
            controller: 'HomeCtrl'
        });

    $urlRouterProvider.otherwise("/");

    filepickerProvider.setKey('<YOUR_API_KEY_HERE>');
});

Crie o uploader de arquivo

No modelo html principal, use a diretiva filepicker para criar um botão “Selecionar arquivo”, estilizado com bootstrap:

<div class='jumbotron text-center'>
    <h1>Welcome to Filestack starter</h1>

    <input filepicker type="filepicker" data-fp-services="computer,facebook,webcam,box" on-success="onSuccess(event.fpfile)" data-fp-button-class="btn btn-success" />

</div>

Em seguida, defina a matriz de arquivos e o método de sucesso no controlador principal:

app.controller('HomeCtrl', function($scope){
    $scope.files = [];

    $scope.onSuccess = function (Blob){
        console.log(Blob);
        $scope.files.push(Blob);  
        $scope.$apply();      
    };

});

Finalmente, podemos renderizar o arquivo que carregamos na tela principal:

<div class='row'>
    <div class='col-sm-12'>
        <h3>Uploaded images</h3>
        <div class='row' ng-repeat='file in files'>
            <img ng-src='{{file.url}}' />
        </div>
    </div>
</div>
<div class='row'>
    <div class='col-sm-12'>
        <h3>Raw data</h3>
        <pre>{{files | json}}</pre>
    </div>
</div>

Assim que tivermos a url, hospedada pelo filepicker, podemos salvá-la em localStorage ou em nosso próprio banco de dados. Existem várias outras opções com o Filestack / Filepicker. Este tutorial apenas arranha a superfície do que você pode fazer!

Se você tiver dúvidas, questione o código-fonte .