Send file with Angular and Django

Question

I'm doing a simple blog with Angular + Django. I have a page when the user can create a new post, writing the title and the body. In addition, at the end, he can add a file.

This is the controller:

$scope.newPost = {};

$scope.addPost = function(){
  if ($scope.newPost){
    PostListSrv.addPost.add($scope.newPost, function(data) {
        if (data) {
          console.log('success');
        }
      }, function(error) {
        if (error) {
          console.log('error');
        }
      }
    );
  } else {

          console.log('Error');
  }
};

This is the service where I call the server:

   .....
  addPost: $resource('my_url', {
  }, {
    add: {
      method: 'POST',
      headers: { 'Content-Type': 'multipart/form-data' },
      params:{title:'title', text:'text', file: 'file'}
    }
  }), 
  ....

The problem is that if I try to add a new post, I get a 400 Error. In particular in the 'response' tab on 'Network' (Firefox) I have a red line that writes: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data. How can I do?

A.J. · Accepted Answer · 2016-04-28 13:13:55Z

0

Before you send the parameters, use JSON.stringify().

.....
addPost: $resource('my_url', {
}, {
  add: {
    method: 'POST',
    headers: { 'Content-Type': 'multipart/form-data' },
    params: JSON.stringify({title:'title', text:'text', file: 'file'})
  }
}), 
....

answered Apr 28, 2016 at 13:13

A.J.

3931 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

A.J. Over a year ago

where are you using JSON.parse()?

panagulis72 Over a year ago

nowhere: in the question I pasted the code I use! Maybe it take the word 'file' as text and doesn't take the entire file?

A.J. Over a year ago

is the file attribute a string or is it an actual file?

panagulis72 Over a year ago

The html line for the file is this: <input type="file" files-model="newPost.image" required >

A.J. Over a year ago

it seems to me then that you would have to instead do a <form></form> submit, or a file uploader control if you're using services. can't use AJAX to send a file directly. blog.teamtreehouse.com/uploading-files-ajax. if you're trying to send multipartform data, you can't send it as js obj

|

byteC0de · Accepted Answer · 2016-04-29 03:43:13Z

0

You can use $upload to upload file

$upload.upload({
    url: 'servicesUrl/',
    file: fileToBeUpload,
    data: {'title': title},
    method: 'POST',
    withCredentials: false,
    contentType:'application/json',
    dataType:'json'
});

answered Apr 29, 2016 at 3:43

byteC0de

5,3436 gold badges36 silver badges68 bronze badges

Collectives™ on Stack Overflow

Send file with Angular and Django

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related