AWS - Upload CSV file using API Gateway using multipart/form-data

0
votes

I have a use-case where I need to upload the CSV file by using AngularJS App through AWS API Gateway, to my backend application (running in Elastic Beanstalk - Django Python REST App).

  1. The API Gateway is integrated with AWS Cognito.
  2. The backend application expects the form-data with CSV uploads.

I have created API Gateway with a resource like /main_resource/upload_csv with the POST method.

Currently, I am testing this with sample Javascript application that makes an AJAX call to the API Gateway URL. Below is the AJAX call

$.ajax({ method: 'POST', url: 'https://47483nvh39.execute-api.ap-south-1.amazonaws.com/mystage/main_resource/upload_csv', headers: { Authorization: authToken, "Accept": "*/*", "Content-Type": "multipart/form-data" }, contentType: 'multipart/form-data', data: formData, dataType: "json", processData: false, success: completeRequest, error: function ajaxError(jqXHR, textStatus, errorThrown) { console.error('Error: ', textStatus, ', Details: ', errorThrown); console.error('Response: ', jqXHR.responseText); console.log("Status: " + jqXHR.status); if (jqXHR.status == 401 || jqXHR.status == 403) { //redirectToLogin(); } else { alert('An error occured:\n' + jqXHR.responseText); } } });

Important settings are done in API Gateway resource POST method

  1. API Gateway -> Settings -> Binary Media Types - added 'multipart/form-data
  2. Added headers to "Method Request" - "Content-Type" and "Accept"
  3. Added headers to "Integration Request" - "Content-Type" and "Accept"
  4. Added Content type to "Method Request" Request Body as "multipart/form-data"
  5. In "Integration Request" added multipart/form-data to "Mapping Templates"

After doing all these settings I am getting response as 500 "Internal server error". I have gone through the logs of the Django app and found that the backend URL is not getting accessed.

Any help related to this is appreciated

Thanks

Avinash Deshmukh.

1
javascriptamazon-web-servicesapi-gateway

1 Answers

0
votes

I am finally able to perform the POST request with multipart/form-data for CSV uploads.

Below are the required steps.

  1. Add the binary media type in API Gateway -> Settings -> Binary Media Types 'multipart/form-data'
  2. Add the headers "Content-Type" and "Accept" into "Method Request".

  3. Add the "Content-Type" to "Method Request" -> Request Body as "multipart/form-data".

  4. In "Integration Request" select the checkbox "Use Proxy Integration".

In the Ajax call remove the "Content-Type" from the headers list. It is observed that the "Content-Type" header is sent with the "Request Body" payload. So the modified Ajax call can be something like this:

$.ajax({ method: 'POST', url: 'https://47483nvh39.execute-api.ap-south-1.amazonaws.com/mystage/main_resource/upload_csv', headers: { Authorization: authToken, "Accept": "*/*" }, contentType: 'multipart/form-data', data: formData, dataType: "json", processData: false, success: completeRequest, error: function ajaxError(jqXHR, textStatus, errorThrown) { console.error('Error: ', textStatus, ', Details: ', errorThrown); console.error('Response: ', jqXHR.responseText); console.log("Status: " + jqXHR.status); if (jqXHR.status == 401 || jqXHR.status == 403) { //redirectToLogin(); } else { alert('An error occured:\n' + jqXHR.responseText); } } });

Hope this will help those who are facing the challenges during the integration.