CODEWITHSUNDEEP
javascriptc#reactjs
Alvin Quezon
Alvin Quezon

Reputation: 1211

Axios with Reactjs Bad Request when posting my data

I got error BadRequest 400 when trying to post data to the web api using react and axios library, here is my code:

let token = 'xxx-token';
let username = 'username';
export const PostData = (url, formData) => {
    return new Promise((resolve, reject) => {
        instance.post(`${config.externalApi}/${url}`, formData, { 
            headers: { "Authorization": `Bearer ${token}`, "X-Default-Username": username, "Content-Type": "application/json" }
         }).then(response => {
            if(response.data !== undefined && response.data !== null) {
                resolve(response.data);
            } else {
                reject(Error('no data found'))
            }
        }).catch((err) => {
            console.log(err);
        })
    })
}

Sample Payload Data

{
    "companyId": 1286,
    "postingDate": "2021-04-27T05:20:39.253Z",
    "startDate": "2021-06-08T05:20:39.000Z",
    "endDate": "2021-04-27T05:20:39.253Z",
    "makePlacementDate": "2021-04-27T05:20:39.253Z",
    "closingDate": "2021-04-27T05:20:39.253Z",
    "inDeclare": true,
    "positionType": "Internship",
    "jobTitle": "Software Engineer Intern",
    "department": "IT Department",
    "noOfPositions": "5",
    "internshipPlacementType": "1",
    "ihlLevel": "3",
    "duration": "4 Months and 15 Days",
    "jobFunction": "9",
    "rolesAndResponsibility": "Roles and Responsibilities",
    "scopeAndOutcomes": "Learning Outcomes and Objectives",
    "skillsAndKnowledge": "Requirements",
    "actionModeType": "Submit",
    "resourceSumitId": null,
    "remarks": "",
    "recipient": "",
    "remarksBy": ""
}

My Controller

        [Authorize]
        [HttpPost("jobposition/create")]
        public IActionResult AddJobPosition([FromBody] JobPosition position)
        {
            if(ModelState.IsValid)
            {
                var result = _jobListingService.AddJobPosition(position);
                return Created(Request.Path.Value, result);
            } 
            else
            {
                return BadRequest();
            }
        }

Model

    public class JobPosition
    {
        [Required]
        public long CompanyId { get; set; }

        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string PositionType { get; set; }
        
        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string IhlType { get; set; }
        
        [Required]
        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        public string JobTitle { get; set; }
        
        [Required]
        [Range(0, 1000, ErrorMessage = "Range for this field must be from 0 to 1000.")]
        public int NoOfPositions { get; set; }
        
        [Required]
        [DataType(DataType.Date)]
        public DateTime StartDate { get; set; }
        
        [Required]
        [DataType(DataType.Date)]
        public DateTime EndDate { get; set; }

        [Required]
        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        [DataType(DataType.Text)]
        public string Duration { get; set; }

        [Required]
        [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
        [DataType(DataType.Text)]
        public string ScopeAndOutcome { get; set; }

        [Required]
        [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
        [DataType(DataType.Text)]
        public string SkillsAndKnowledge { get; set; }

        [Required]
        [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
        [DataType(DataType.Text)]
        public string RolesAndResponsibility { get; set; }

        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string JobFunction { get; set; }

        [Required]
        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        public string Department { get; set; }

        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string InternshipPlacementType { get; set; }

        [DataType(DataType.Date)]
        public DateTime ClosingDate { get; set; }

        [DataType(DataType.Date)]
        public DateTime MakePlacementDate { get; set; }

        [Required]
        public bool InDeclare { get; set; }

        [DataType(DataType.Upload)]
        public byte[] ResourceSumitId { get; set; }

        // submission checker
        [Required]
        [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
        public string ActionModeType { get; set; }

        // reviewer
        [MaxLength(1000, ErrorMessage = "Exceed max length of 1000.")]
        public string Remarks { get; set; }

        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        public string Reciptient { get; set; }

        [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
        public string RemarksBy { get; set; }
    }

The top mentioned above are the controller and model that I made for the web api. I am not certainly sure why the data isn't correct... I am not certain why I got an error of some kind and I am pretty sure my data structure is correct.

Upvotes: 0

Views: 753

Answers (1)

Ramin Azali
Ramin Azali

Reputation: 293

Hope I write this DTO correctly.

public class JobPosition
{
    [Required]
    public long CompanyId { get; set; }

    [Required]
    [DataType(DataType.Date)]
    public DateTime postingDate { get; set; }

    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string PositionType { get; set; }
    
    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string IhlType { get; set; }
    
    [Required]
    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    public string JobTitle { get; set; }
    
    [Required]
    [Range(0, 1000, ErrorMessage = "Range for this field must be from 0 to 1000.")]
    public int NoOfPositions { get; set; }
    
    [Required]
    [DataType(DataType.Date)]
    public DateTime StartDate { get; set; }
    
    [Required]
    [DataType(DataType.Date)]
    public DateTime EndDate { get; set; }

    [Required]
    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    [DataType(DataType.Text)]
    public string Duration { get; set; }

    [Required]
    [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
    [DataType(DataType.Text)]
    public string ScopeAndOutcome { get; set; }

    [Required]
    [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
    [DataType(DataType.Text)]
    public string SkillsAndKnowledge { get; set; }

    [Required]
    [MaxLength(2500, ErrorMessage = "Exceed max length of 2500.")]
    [DataType(DataType.Text)]
    public string RolesAndResponsibility { get; set; }

    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string JobFunction { get; set; }

    [Required]
    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    public string Department { get; set; }

    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string InternshipPlacementType { get; set; }

    [DataType(DataType.Date)]
    public DateTime ClosingDate { get; set; }

    [DataType(DataType.Date)]
    public DateTime MakePlacementDate { get; set; }

    [Required]
    public bool InDeclare { get; set; }

    [DataType(DataType.Upload)]
    public byte[] ResourceSumitId { get; set; }

    // submission checker
    [Required]
    [MaxLength(20, ErrorMessage = "Exceed max length of 20.")]
    public string ActionModeType { get; set; }

    // reviewer
    [MaxLength(1000, ErrorMessage = "Exceed max length of 1000.")]
    public string Remarks { get; set; }

    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    public string Reciptient { get; set; }

    [MaxLength(100, ErrorMessage = "Exceed max length of 100.")]
    public string RemarksBy { get; set; }
}

I am not sure this is the model you want. But, I found the field in your data that do not exists in your DTO, Please pay attention to your DTO.

Upvotes: 2

Related Questions