Amplify AppSync doesn't upload S3Object file from client - reactjs

Question

First, when the docs at https://aws-amplify.github.io/docs/js/api#complex-objects say:
input CreateTodoInput {
id: ID
name: String!
description: String
file: S3ObjectInput # This input type will be generated for you
}
I get an error Type "S3ObjectInput" not found in document. and I have to add S3ObjectInput manually.
This is my schema (the docs are not very clear on it so I put it together from similar questions)
type Picture #model {
id: ID!
file: S3Object!
url: String!
rating: Int
appearedForRanking: Int
}
type S3Object {
bucket: String!
key: String!
region: String!
}
input CreatePictureInput {
id: ID
file: S3ObjectInput!
url: String!
rating: Int
appearedForRanking: Int
}
input S3ObjectInput {
bucket: String!
region: String!
localUri: String
visibility: Visibility
key: String
mimeType: String
}
enum Visibility {
public
protected
private
}
And this is the client code (with React)
class PictureUpload extends Component {
state = { fileUrl: '', file: '', filename: '' }
handleChange = e => {
let file = e.target.files[0]
let filext = file.name.split('.').pop()
let filename = uuid() + '.' + filext
this.setState({
fileUrl: URL.createObjectURL(file),
filename: filename
})
}
saveFile = async () => {
let visibility = 'public'
let fileObj = {
bucket: awsConfig.aws_user_files_s3_bucket,
region: awsConfig.aws_user_files_s3_bucket_region,
key: visibility + '/' + this.state.filename,
mimeType:'image/jpeg',
localUri: this.state.fileUrl,
visibility: visibility
}
try {
const picture = await API.graphql(
graphqlOperation(mutations.createPicture, {
input: {
url: this.state.filename,
file: fileObj
}
})
)
The problem is that the mutation runs without errors, setting the DB records, but the file does not appear in S3. The docs say the SDK uploads the file to Amazon S3 for you. so I don't think I forgot to add something.
Any idea why the upload doesn't happen?

Answer 1

Automatic upload of file to S3 happens only if using the aws-appsync package, with aws-amplify you need to upload the file yourself using Storage.put(...).
This GitHub issue explain the differences in more detail

Answer 2

For ReactNative I've found that you can't simply provide a uri, but rather a blob. Try this code instead:
const response = await fetch(uri);
const blob = await response.blob();
let file = {
bucket,
key,
region,
localUri: blob,
mimeType,
};
This should get the image data to S3 as long as your authentication is properly configured.