POSTing a document through REST API returns JSON parse error

Question

I am using the REST API to POST a document to GeoNode. Here is the Javascript code. The error returned is that JSON parse error. I have tried many ways of sending the fileObject - a string, blob and file, but results in the same error. Not sure what could be the issue.

The reason I am posting this question here is because this isn't a GeoNode issue at all - if these errors appear in the JavaScript console then I am not able to send the POST payload to GeoNode yet. Thus, it is a error in the JavaScript code which is executing at the browser end.

Some say its the issue with the Content-type header. But when I tried to change it, different errors came up. Those may be related to the Accept header. I would really appreciate the readers to please try the code.

//now to send the document upload in geonode
let url = 'https://DOMAIN/api/v2/documents/';                
var crf_token1 = $('[name="csrfmiddlewaretoken"]').attr('value');

var file = new File(["My test file contents as a string"], "myTestFilename.txt"); 
   
let headers = new Headers();
//headers.set('Authorization', token.token_type + ' '  + token.access_token);  //+ ' ' +
headers.set('Content-Type','multipart/form-data');  
headers.set('Accept','application/json');       
var crf_token = $('[name="csrfmiddlewaretoken"]').attr('value');
headers.set('X-CSRFToken', crf_token);

var formData = new FormData();         
formData.append('file', file);  
       
//document related parameters        
formData.append('owner', 'admin');             formData.append('title', 'testdoc');
formData.append('abstract', 'testdoc');        formData.append('attribution', 'test');
formData.append('bbox_polygon', 'MULTIPOLYGON (((0 0, 0 1, 1 1, 1 0, 0 0)))');
formData.append('constraints_other', 'no');    formData.append('data_quality_statement', 'no');
formData.append('doi', 'test');                formData.append('embed_url', 'test');
formData.append('is_approved', 'true');        formData.append('is_published', 'true');
formData.append('ll_bbox_polygon', 'MULTIPOLYGON (((0 0, 0 1, 1 1, 1 0, 0 0)))');
formData.append('maintenance_frequency', '1'); formData.append('metadata_only', 'true');
formData.append('popular_count', '1');         formData.append('share_count', '1');
formData.append('srid', '1');                  formData.append('purpose', '1');         
formData.append('rating', '1');
formData.append('language', 'English');        formData.append('supplemental_information', 'No information provided');
formData.append('temporal_extent_end', '2022-02-02 12:21');         f 
formData.append('temporal_extent_start', '2022-02-02 12:21');
formData.append('thumbnail_url', 'test');      formData.append('Regions', 'Global');
formData.append('Responsible', 'admin');       formData.append('date', '2022-02-02 12:21');
formData.append('edition', 'test');            formData.append('date_type', 'test');       
    
fetch(url, 
      { 
           method:'POST',
           credentials: "same-origin",
           headers: headers ,
           body: formData // jsonobject //formData  //fileK.files[0]       
      }
 )
.then(response => response.json())
.then(json => console.log(json));

When I try to upload a word document, the error returned within the browser console is

{detail: "JSON parse error - 'utf-8' codec can't decode byte 0xd2 in position 226: invalid 
continuation byte"}

When I try to upload geojson file, the error returned is

{detail: 'JSON parse error - Expecting value: line 1 column 1 (char 0)'}