Transferring documents using Angular and Django

Question

Transferring documents using Angular and Django

I'm currently working on a blog project using Angular and Django. I have created a page where users can create new posts by entering a title, body, and attaching a file.

Below is the controller code:

$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 used to communicate with the server:

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

The issue arises when attempting to add a new post, resulting in a 400 Error. Specifically, in the 'response' tab under 'Network' (Firefox), a red line indicates: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data. How can this be resolved?

javascript angularjs django rest post

Answer 1

Answer №1

Prior to transmitting the parameters, remember to employ JSON.stringify().

.....
createNewPost: $resource('my_url', {
}, {
  post: {
    method: 'POST',
    headers: { 'Content-Type': 'multipart/form-data' },
    params: JSON.stringify({title:'newTitle', body:'newBody', attachment: 'newAttachment'})
  }
}), 
....

Answer 2

Prior to transmitting the parameters, remember to employ JSON.stringify().

.....
createNewPost: $resource('my_url', {
}, {
  post: {
    method: 'POST',
    headers: { 'Content-Type': 'multipart/form-data' },
    params: JSON.stringify({title:'newTitle', body:'newBody', attachment: 'newAttachment'})
  }
}), 
....

Answer 3

Answer №2

To upload a file, simply use the $upload function.

$upload.upload({
    url: 'file-upload-service/',
    file: fileToBeUploaded,
    data: {'name': fileName},
    method: 'POST',
    withCredentials: true,
    contentType:'multipart/form-data',
    dataType:'text'
});

Answer 4

To upload a file, simply use the $upload function.

$upload.upload({
    url: 'file-upload-service/',
    file: fileToBeUploaded,
    data: {'name': fileName},
    method: 'POST',
    withCredentials: true,
    contentType:'multipart/form-data',
    dataType:'text'
});

Transferring documents using Angular and Django

Answer №1

Answer №2

Similar questions

Ways to trigger a PHP function after a successful AJAX query

Cookie information will always be visible in the information box

Creating a JSON array in Django

Transferring data from a div to JavaScript

Changing the CSS class of the Bootstrap datetime picker when selecting the year

How can I utilize an external file in Node js to output as a response?

Consistently showcasing images of varying dimensions that are unfamiliar

Can all intervals set within NGZone be cleared?

Trigger a JavaScript alert when encountering an error message in the database connection function within PHP

Which specific event in NextJS is triggered only during the initial load?

Using Angular Formly to create a select input that is populated with objects

Using ES6 syntax to inject modules into an extended controller can result in the Unknown provider error

How to structure a URL to retrieve JSON data from an API using the fetch method

What is the best way to link the data from the HTML input to the class property in the TypeScript file? (Combining Angular and IntroJs)

I aim to cross-reference words within a matrix, yet I struggle to pinpoint every word in all eight directions in the matrix

Show React compilation errors

Exploring the concept of reflection in JavaScript and jQuery

Select elements that do not have a specific parent class using LESS

Maintain current page with HTML form action

An error popped up while using the fetch API due to an unexpected end of input