Image/file upload

[Mr-Headrick]

Upload works for everyone, however the related issue #8 where you try to display the image could be trickier (but that is the next step).

[AmazingAJ10]

I followed the reccomendations of ChatGPT to try to get the images to upload, which include the steps detailed below, but was unsucessful in getting the images from files to appear on the SubCard.

1. Verify S3 Bucket Access Public Access AWS Management Console: Open the AWS Management Console and navigate to the Amazon S3 section.

Find your Bucket: Locate the S3 bucket used by your Amplify app. This information can usually be found in your Amplify project configuration or by checking the resources created in the Amplify Console.

Bucket Permissions: Click on the bucket name, go to the Permissions tab, and check the Bucket Policy and Access Control List (ACL). If your application requires public read access for the images, ensure that the bucket policy allows public read access. However, be cautious with public permissions to avoid unintended data exposure.

2. Check IAM Role Permissions IAM Console: Go to the IAM section in the AWS Management Console.

Roles: Look for the role associated with your Amplify app. This role is usually automatically created by Amplify and has a name related to your Amplify project.

Permissions: Check the permissions attached to this role. Ensure that it has policies allowing s3:GetObject action for the specific S3 bucket and objects. If not, you may need to attach a policy granting the necessary permissions.

To verify your storage and access configuration when using AWS Amplify with Amazon S3 for storing images, follow these steps:

1. Verify S3 Bucket Access Public Access AWS Management Console: Open the AWS Management Console and navigate to the Amazon S3 section.

Find your Bucket: Locate the S3 bucket used by your Amplify app. This information can usually be found in your Amplify project configuration or by checking the resources created in the Amplify Console.

Bucket Permissions: Click on the bucket name, go to the Permissions tab, and check the Bucket Policy and Access Control List (ACL). If your application requires public read access for the images, ensure that the bucket policy allows public read access. However, be cautious with public permissions to avoid unintended data exposure.

CORS Configuration: If your application accesses S3 directly from the client-side, ensure the CORS (Cross-Origin Resource Sharing) settings are configured to allow requests from your domain.

Restricted Access If images should not be public, you'll need to manage access through your application, typically using AWS Amplify's Storage module, which handles authentication and authorization through AWS IAM roles.

2. Check IAM Role Permissions IAM Console: Go to the IAM section in the AWS Management Console.

Roles: Look for the role associated with your Amplify app. This role is usually automatically created by Amplify and has a name related to your Amplify project.

Permissions: Check the permissions attached to this role. Ensure that it has policies allowing s3:GetObject action for the specific S3 bucket and objects. If not, you may need to attach a policy granting the necessary permissions.

3. Ensure Correct Image URLs or Keys in Database Data Check: Ensure that the data stored in your database (or wherever you're storing subscription information) correctly references the image keys or URLs. Consistency: If you're storing keys, ensure your application logic constructs the URLs correctly when retrieving and displaying images. The URL typically follows the pattern https://s3.amazonaws.com/your-bucket-name/your-image-key or https://your-bucket-name.s3.amazonaws.com/your-image-key for public access. For private access, your application must generate signed URLs using AWS SDK or Amplify.

[AmazingAJ10]

I have not gotten the images form uploaded files to appear in the collection on the main page yet. I noticed that in the data section of the Amplify Studio, the images that worked previously when I was using the image url to fetch it were in the format of "data:image:'filetype';base64,/key" where key is what I created today so that the image has a key. The key is used instead of being from C:Users/socce/Files or something like that. However, this makes it upload/"key" with the new added key instead of the other way. They key has been generated which is the first step though.

[AmazingAJ10]

The following is what was reccomended by ChatGPT which I tried but then undid because it did not make any progress. Ihave spent a while trying these and I am also out of ideas. During class tomorrow, I will talk to others and hopefully someone has had this issue, which I think they have, and I will ask about image logic and what the best way to get these images to show. Hope to get it to work then.

Step 1: Update Image Upload Handling First, ensure that onUploadSuccess correctly retrieves the URL of the uploaded image from S3. This often involves using the get method from Amplify's Storage module after the upload succeeds to fetch the publicly accessible URL.

Note: The above snippet assumes you're directly working with AWS Amplify's Storage module. You'll need to adapt it if StorageManager from @aws-amplify/ui-react-storage abstracts some of these details differently.

Step 2: Adjust the StorageManager or File Input Component Your current setup with StorageManager might not directly expose the functionality needed to fetch the URL after uploading. If StorageManager doesn't support fetching the URL easily, consider using a standard file input alongside Amplify's Storage module for more control over the upload and retrieval process.

Step 3: Display the Image Using the URL Wherever you need to display the uploaded image, ensure you're using the state variable that stores the image URL. For instance, if displaying it in the same component:

Conclusion: This approach directly interacts with AWS Amplify's Storage module to handle file uploads and URL retrieval, giving you more control over the process compared to using StorageManager directly. Ensure you have configured your S3 bucket for public access if necessary and that you handle any security concerns related to making user-uploaded files accessible.

[AmazingAJ10]

I will watch the video about images appearing in the collection tonight to get this to work. The other methods I have tried have not work, and I probably should have just started with the video instead of trying to do it on my own. All these previous comments failed.

[AmazingAJ10]

I'm not sure what the issue is. I've tried multiple things and getting kind of frusturated lol.

[AmazingAJ10]

The src is set now, I had an issue in the NewSub with setting it to the right token when mergin different codes. However, the src is set and shows up in content and in storage but not in the app. I have watched the entirety of the videos having to do with this issue and checked that everything is the same, so using other methods to troubleshoot now.

[AmazingAJ10]

uploads are available but don't show up... this will be addressed in Issue #8