Как загрузить файл на сервер средствами AngularJS?

Question

[Степан Кормилин]

Доброго времени суток!
Подскажите как правильно организовать отправку формы Angular с выбором файла изображения и наименования этого изображения. Основная проблема именно в загрузке файла, никак не пойму, как это сделать.

Answer 1

[Зелимхан Бельтоев]

Используйте готовое решение: https://github.com/danialfarid/ng-file-upload

Всё сведется к тому, что нужно будет в контроллер добавить сервис Upload, а уже в нём вызывать метод upload, передавая ему url адреса для загрузки и прочие параметры.

Решение только на первый взгляд сложное, но на деле там всё просто выходит =)

Answer 2

[Степан Кормилин]

Ну вот сколько я этих готовых решений не попробовал, почему-то так и не получилось реализовать, может всё дело было в особенностях бэкенда на django. Но каждый раз получал 400 ошибку. В итоге рабочая реализация получилась вот такой.

$scope.uploadFile = function(file, title){
            var fd = new FormData();

            fd.append('title', title);
            fd.append('image', file);
            fd.append('hotel', $scope.hotel.id);
            fd.append('is_primary', false);

            return $http({
                url: '/api/v2/hotels/image/',
                method: 'POST',
                data: fd,
                headers: { 'Content-Type': undefined },
                transformRequest: angular.identity,
                transformResponse: function (data) {
                    data = JSON.parse(data);
                    return data;
                }
            })
            .success(function(data){
                $scope.images.push(data);
            });
        };

Comments

[Зелимхан Бельтоев]

Да, back-end криво писали, раз 400 ошибка возвращалась. Судя по коду, ожидали на сервере поля формы, когда как готовые решения шлют массив байт, который и следует ожидать, да обрабатывать. Да и отладчик ещё никто не отменял, вполне можно было им выяснить причину