[Django]-Upload File using Angular and Django

by

3👍

✅

I was having the same problem. I found an efficient solution of how to send files to Django Forms with Angular $http.

DIRECTIVE

app.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
});

HTML

<form ng-submit="send()" enctype="multipart/form-data">
    <input type="text" ng-model="producer.name" placeholder="Name">
    <input type="file" files-input ng-model="producer.video">
</form>

CONTROLLER

$scope.send = function(){
    var fd = new FormData();
    fd.append('video', $scope.producer.video[0]);
    fd.append("name", $scope.producer.name);

    $http({
        method: 'POST',
        url: '/sendproducer/',
        headers: {
          'Content-Type': undefined
        },
        data: fd,
        transformRequest: angular.identity
    })
    .then(function (response) {
      console.log(response.data)
    })
}

DJANGO VIEW FORM

class ProducerView(View):

    def dispatch(self, *args, **kwargs):
        return super(ProducerView, self).dispatch(*args, **kwargs)

    def post(self, request):
        form = ProducerForm(data = request.POST, files = request.FILES or None)
        if form.is_valid():
            form.save()
            return JsonResponse({"status": "success", "message": "Success"})
        return JsonResponse({"status": "error", "message": form.errors})
👤GIA

1👍

Use the below snippet so that you can send usual data along with the file data from angular to django.

$scope.submit = function(){
    var fd = new FormData();
    datas = $("#FormId").serializeArray();
    // send other data in the form
    for( var i = 0; i < datas.length; i++ ) {
         fd.append(datas[i].name, datas[i].value);
        };
    // append file to FormData
    fd.append("select_file", $("#id_select_file")[0].files[0])
    // for sending manual values
    fd.append("type", "edit");
    url = "getter/test/",
    $http.post(url, fd, {
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
    }).success(function(data, status, headers, config) {
        // this callback will be called asynchronously
        // when the response is available
    }).
    error(function(data, status, headers, config) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        });
};

Now you will get select_file under request.FILES and other datas inside request.POST in your django view.

👤Ranju R

0👍

A combination of early posts with the correct Angular functions. 

(function(app){
   app.controller("Name_of_Controller", function($scope, $http){
      $scope.submit = function(){
         var fd = new FormData();
         datas = $("#formID").serializeArray();
         for( var i = 0; i < datas.length; i++ ) {
            fd.append(datas[i].name, datas[i].value);
         };
        fd.append("selected_file", $("#file_id")[0].files[0])
        fd.append("type", "edit");
        url = "/results/",
        $http.post(url, fd, {
            headers: {'Content-Type': undefined },
            transformRequest: angular.identity
        }).then(function (response) {
            console.log(response.data)
        }).catch(function (err) {});;
    };
});
})(App_name);
👤Rieven

-1👍

I strongly suggest using a third party plugin such as ngUpload or fileUploader to achieve this. What you are doing on the client does not look correct.

Also refer to this SO thread on angularjs file uploads

👤Sid

Leave a comment