I see. That’s really weird.
Hi, I ran to an issue of an undefined function of “createNote”. Since the copy button doesn’t include that function, you’ll need to add it back manually.
Hmm can you show me a screenshot of what is missing? I’ll edit the guide.
I looked but I can’t find which chapter first defines the createNote function. But when I followed the steps in this chapter and pasted in the new “async function handleSubmit(event)” I no longer had the createNote function. So the error I got was just stating that there was no createNote function. Don’t know if that’s helpful. If I can trace my steps as to where/when the createNote function was lost I’ll post back here.
when I try to upload multiple images to s3,
I get Error: Unsupported body payload object
import React, { useState, useEffect, useRef } from "react";
import { IonButton, IonButtons, IonInput, IonBackButton, IonContent, IonHeader, IonList, IonItem, IonItemGroup, IonLoading, IonItemDivider, IonLabel, IonPage, IonTitle, IonToolbar, IonAlert, IonRadio, IonRadioGroup, IonListHeader, IonSlide, IonSlides, IonIcon } from '@ionic/react';
import { LinkContainer } from "react-router-bootstrap";
import { API, Storage } from "aws-amplify";
function JobInfo(props) {
const file = useRef(null);
function handleFileChange(event) {
file.current = event.target.files[0];
}
async function handleSubmit(event) {
event.preventDefault();
setShowLoading(true);
try {
const attachment = file.current
const filename = `${job.JobId}-${file.name}`;
const stored = await Storage.put(filename, file, {
contentType: file.type
});
return stored.key;
} catch (e) {
alert(e);
}
setShowLoading(false);
}
var centerText = {textAlign: "center"}
let today = new Date().toDateString();
let start = new Date(date).toDateString();
return(
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton/>
</IonButtons>
<IonTitle>Upload Images</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className="ion-padding">
<div style={{display: "flex", justifyContent: 'center'}}>
<IonItem>
<IonInput name="file" multiple="true" id="file" type="file" onIonChange={(e) => handleFileChange}></IonInput>
</IonItem>
<IonButton expand="block" color="primary" strong="true" size="default" type="submit" onClick={handleSubmit} >Upload</IonButton>
</div>
<IonLoading
isOpen={showLoading}
onDidDismiss={() => setShowLoading(false)}
message={'Please Wait...'}
duration={6000}
/>
</IonContent>
</IonPage>
);In that snippet, how are you uploading multiple files?
Is there no way to upload to any folders besides public/protected/private? Like if you wanted to have groups of users that could access/modify objects in a shared folder. It seems like Amplify Storage forces public/private/protected to be first in a key, and then everything in there goes into a folder specific to a user.
This one is a bit tricky. AFAIK, the way the files are protected is by creating them inside a folder that’s using the user id in their path. That allows Cognito to restrict access. If you wanted a group of users to access a folder. You’ll probably need to create a private folder and then handle access controls on your own?
@jayair thanks. I think that’s right, but what’s weird is that with Storage.put, the documentation seems to always require that the first folder must be public/protected/private, and the second folder must be the user ID.
I see no way to specify any path, like ‘/my/own/path/helloWorld.jpg’.
It seems like for this case I may actually need to upload to a serverless function and let it put the file in S3?
You could try using the AWS JS SDK directly to upload it as well. Though the AWS docs are just not very good.
thanks, this is work
1 Like
My CORS configuration was empty somehow? Thanks very much. Learning AWS lambda is like walking along a mountain path which has fatal drops on either side. It’s just a path and there’s plenty of room… just don’t fall.
1 Like
Yeah we need to work on making this easier! Do you have any specific suggestions on how we can help?
I’m a java/JavaScript developer so being able to debug the code directly gives me piece of mind. Once you’re up and running in aws lambda and you know the major pitfalls I’m sure it’s about as powerful a development hosting environment as you can get but until then there’s definitely an element of feeling around in the dark. This probably isn’t a practical suggestion at the minute but more of a wishlist thing but a graphical representation of the request working it’s way through the system could be very useful? Especially if you could see where the request began failing. In my case the browser was throwing the CORS exception but the issue was with the configuration. If in the graphical representation you could click on the request and perhaps three it could highlight all the points in the system where CORS is configured or has an impact. Guys in our place have been working with the ELK stack there recently and specifically APM. I’m pretty sure in a work shop there were able to show us the lifecycle of a specific request including the frontend and backend, stack traces and the likes. They’d setup APIs they could call from the front end which would trace the request. Again probably more wishlist than anything.
1 Like
I’ve been running into the same problem that many others have been running into and I can’t seem to find a good solution. I keep receiving this error when I attempt to attach a document to my note:
My guess is that it has something to do with my S3 configuration, but I can’t figure out what the issue is. Any help would be appreciated.
No, worries. I figured out the problem.
1 Like
Thanks for the detailed feedback. I understand the issue. The execution environment is distributed AND opaque. One thing that can help with this is AWS X-Ray. We have a chapter on it here:
I was having CORS issues as well. Double check that you have the correct region in your config.js S3.REGION.
1 Like
Hi there! I’m having an issue with file upload. Any thought on this error message: “AWSS3Provider - error uploading Error: Region is missing”?
I have reviewed everything from the beginning. What am I missing here?