# Comments for Upload a File to S3

**URL:** <https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123>\
**Category:** Chapter Comments\
**Created:** [May 9, 2018, 7:40pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123 "2018-05-09T19:40:30Z")\
**Posts on this page:** 20\
**Page:** 6

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [February 10, 2020, 6:55pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/102 "2020-02-10T18:55:38Z")

</div>

I see. That’s really weird.

---

<div class="post-metadata">

**Author:** ![granto](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/granto/32/764_2.png) [@granto](https://discourse.sst.dev/u/granto)\
**Post date:** [February 20, 2020, 1:32am UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/103 "2020-02-20T01:32:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [February 22, 2020, 6:48pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/104 "2020-02-22T18:48:31Z")

</div>

Hmm can you show me a screenshot of what is missing? I’ll edit the guide.

---

<div class="post-metadata">

**Author:** ![granto](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/granto/32/764_2.png) [@granto](https://discourse.sst.dev/u/granto)\
**Post date:** [February 23, 2020, 3:10pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/105 "2020-02-23T15:10:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Jspackman](https://avatars.discourse-cdn.com/v4/letter/j/ecc23a/32.png) [@Jspackman](https://discourse.sst.dev/u/Jspackman)\
**Post date:** [February 26, 2020, 10:46pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/106 "2020-02-26T22:46:08Z")

</div>

when I try to upload multiple images to s3,

I get `Error: Unsupported body payload object`

```auto
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>
    );
```

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [March 8, 2020, 8:16pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/107 "2020-03-08T20:16:12Z")

</div>

In that snippet, how are you uploading multiple files?

---

<div class="post-metadata">

**Author:** ![srchulo](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/srchulo/32/805_2.png) [@srchulo](https://discourse.sst.dev/u/srchulo)\
**Post date:** [March 29, 2020, 10:11pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/108 "2020-03-29T22:11:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [March 30, 2020, 11:16pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/109 "2020-03-30T23:16:59Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![srchulo](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/srchulo/32/805_2.png) [@srchulo](https://discourse.sst.dev/u/srchulo)\
**Post date:** [March 31, 2020, 1:33am UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/110 "2020-03-31T01:33:27Z")

</div>

@jayair thanks. I think that’s right, but what’s weird is that with [Storage.put](https://aws-amplify.github.io/docs/js/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?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [April 12, 2020, 11:44pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/111 "2020-04-12T23:44:23Z")

</div>

You could try using the AWS JS SDK directly to upload it as well. Though the AWS docs are just not very good.

---

<div class="post-metadata">

**Author:** ![srchulo](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/srchulo/32/805_2.png) [@srchulo](https://discourse.sst.dev/u/srchulo)\
**Post date:** [April 13, 2020, 2:25am UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/112 "2020-04-13T02:25:11Z")

</div>

@jayair, thanks! I’ll look into that.

---

<div class="post-metadata">

**Author:** ![wintoro](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/wintoro/32/886_2.png) [@wintoro](https://discourse.sst.dev/u/wintoro)\
**Post date:** [May 28, 2020, 1:42am UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/113 "2020-05-28T01:42:24Z")

</div>

thanks, this is work

---

<div class="post-metadata">

**Author:** ![markgargan](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/markgargan/32/903_2.png) [@markgargan](https://discourse.sst.dev/u/markgargan)\
**Post date:** [June 6, 2020, 4:10pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/114 "2020-06-06T16:10:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [June 13, 2020, 10:28pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/115 "2020-06-13T22:28:13Z")

</div>

Yeah we need to work on making this easier! Do you have any specific suggestions on how we can help?

---

<div class="post-metadata">

**Author:** ![markgargan](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/markgargan/32/903_2.png) [@markgargan](https://discourse.sst.dev/u/markgargan)\
**Post date:** [June 14, 2020, 2:56pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/116 "2020-06-14T14:56:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JonathanEdMoore](https://avatars.discourse-cdn.com/v4/letter/j/ed8c4c/32.png) [@JonathanEdMoore](https://discourse.sst.dev/u/JonathanEdMoore)\
**Post date:** [June 15, 2020, 4:56pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/117 "2020-06-15T16:56:17Z")

</div>

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:

 ![Screen Shot 2020-06-15 at 11.46.13 AM](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/c8977ca738f011e3b8d819924c4cc77dc7739219.png)

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.

---

<div class="post-metadata">

**Author:** ![JonathanEdMoore](https://avatars.discourse-cdn.com/v4/letter/j/ed8c4c/32.png) [@JonathanEdMoore](https://discourse.sst.dev/u/JonathanEdMoore)\
**Post date:** [June 15, 2020, 5:04pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/118 "2020-06-15T17:04:09Z")

</div>

No, worries. I figured out the problem.

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [July 2, 2020, 8:40pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/119 "2020-07-02T20:40:37Z")

</div>

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:

> **[Tracing Serverless Apps with X-Ray](https://serverless-stack.com/chapters/tracing-serverless-apps-with-x-ray.html)**
>
> In this chapter we look at how to trace Serverless apps using AWS X-Ray. Since your app is made up of multiple services, it’s important to configure X-Ray to get visibility over a request as it flows through the system.

---

<div class="post-metadata">

**Author:** ![Napoleon](https://avatars.discourse-cdn.com/v4/letter/n/58956e/32.png) [@Napoleon](https://discourse.sst.dev/u/Napoleon)\
**Post date:** [July 9, 2020, 6:23am UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/120 "2020-07-09T06:23:14Z")

</div>

I was having CORS issues as well. Double check that you have the correct region in your config.js S3.REGION.

---

<div class="post-metadata">

**Author:** ![aldodaquino](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/aldodaquino/32/939_2.png) [@aldodaquino](https://discourse.sst.dev/u/aldodaquino)\
**Post date:** [July 14, 2020, 5:41pm UTC](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123/121 "2020-07-14T17:41:14Z")

</div>

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?

[Previous page](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123.md?page=5)

[Next page](https://discourse.sst.dev/t/comments-for-upload-a-file-to-s3/123.md?page=7)