Amplify-js: API: Add support to send FormData

[poplapetja]

Do you want to request a feature or report a bug?
New feature

What is the current behavior?
Blank JSON object {} will be sent to server

Steps to reproduce

import API from '@aws-amplify/api'

const fd = new FormData()
fd.append('test', 'foobar')

API.put('MyApi', '/products', {body: fd})

What is the expected behavior?
Contents of FormData will be sent to the server successfully.

Version
"@aws-amplify/api": "1.0.5"

[chmelevskij]

Is there any updates on when this will be implemented? It's needed for implementing file uploads as well. It's kind of limiting that the only supported way to talk with apis is JSON.

[LuongTruong]

Hi @chmelevskij , you can use getSignedUrl provided by aws-sdk getSignedUrl

[chmelevskij]

@truongluong1314520 thanks for the reply.

I know that I can use getSignedUrl or even direct upload with Cognito credentials and s3 client. But in my case I need to validate the files so uploading files directly to s3 would mean a lot of extra steps to validate the files and then reject and notify.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sam-jg]

Are there any updates on this? This is pretty limiting.
Alternatively is it possible to get the authentication that amplify would use for an API request and make the request manually with the required file upload headers, etc?

[emanuelherrmann]

+1

[rickbora]

+1

[emanuelherrmann]

Has anyone found a workaround to post a file without having to use an S3 bucket?

I just need to post a csv file and parse it on the back-end. I do not need to persist the file anywhere

[chmelevskij]

@emanuelherrmann I’d try base 64 encoding the file and sending it as a string. But it depends on what size of files you are looking to send and etc. It’s definitely not the right way to do it, but it would work

[emanuelherrmann]

Thanks @chmelevskij for the tip I will try it. I haven't thought about encoding the file and sending it as string. I think I'll be Ok while Amplify sort this out I am talking about small csv files (less than 100kb usually 10kb).

[sam-jg]

@emanuelherrmann if your CSV's are always going to be that small it might be possible to just extract the CSV data to a JSON object client-side and send a regular post request.

[emanuelherrmann]

@sam-jg Yes I am currently doing that in some cases. But I will still like to be able to post a file to my API.

Using a bucket + a lambda notification on s3 only works in cases where the front end does not need the result .

Parsing the file in the front end convert to JSON and send to the APU is extra work that the front end shouldn't need to do.

Base 64 encoding does not work well with excel files.

I'd like to know if AWS is planning to implement this in the near future.

[rmaroun]

+1

[ivanzvonkov]

+1

[ralphsomeday]

@dabit3 can anyone from the team help with this issue as it has been staling for a while and it is an important feature that should be supported by amplify to be able to upload documents or any binary format files. thank you.

[sakhmedbayev]

Is there any workaround? How to accomplish it using fetch or axios?

[pclements12]

You can workaround this by using the underlying axios instance:

import { Auth } from 'aws-amplify';
import axios from 'axios';

const fileUpload = async (uploadPath: string, file: any) => {
    const formData = new FormData();
    formData.append('file', file);
    const session = await Auth.currentSession();
    const token = session.getIdToken().getJwtToken();
    // awsconfig here is the configuration you setup to use amplify already with your app
    const url = awsconfig.api_endpoint + uploadPath;
    return await axios.post(url, formData, {
        headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `Bearer ${token}`,
        },
    });
};

[vallard]

@pclements12 thanks, I'm trying that but seems my serverless setup may not be right as I'm getting 403 error saying its not supported.

[harrysolovay]

axios will serialize for you... I'd recommend using javascript-stringify (handles serialization and parsing of circularity and functions!).

Also, we're open to reviewing PRs!

[IsaacTrevino]

+1