maz

maz

Testing LiveView Upload S3 signed upload from development machine(localhost:4000) and getting the message “External client failure”. Upon logging the hook uploader in app.js I see this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://secret-bucket.s3.amazonaws.com/. (Reason: CORS header “Access-Control-Allow-Origin” missing).

I tried adding
xhr.setRequestHeader('Access-Control-Allow-Origin', '*');

to the request but no change. Is this actually a response error? Does this mean that the change needs to be made on the amazon s3 bucket/instance? Or should the change be made in the phoenix router(or alternatively, add the corsica elixir module?). Bit confused here..

dependencies:

  phoenix 1.6.0
  phoenix_ecto 4.4.0
  phoenix_html 3.0.4
  phoenix_live_dashboard 0.5.2
  phoenix_live_reload 1.3.3
  phoenix_live_view 0.16.4

in app.js:

let Uploaders = {}
Uploaders.S3 = function(entries, onViewError){
  entries.forEach(entry => {
    console.log("entry")
    console.log(entry)
    let formData = new FormData()
    let {url, fields} = entry.meta
    console.log("url")
    console.log(url)
    
    console.log("fields")
    console.log(fields)
    
    Object.entries(fields).forEach(([key, val]) => formData.append(key, val))
    formData.append("file", entry.file)
    let xhr = new XMLHttpRequest()
    onViewError(() => xhr.abort())
    xhr.onload = () => ((xhr.status === 204 || 200) ? entry.progress(100) : entry.error())
    xhr.onerror = () => entry.error()
    xhr.upload.addEventListener("progress", (event) => {
      console.log("addEventListener event")
      console.log(event)
  
      if(event.lengthComputable){
        let percent = Math.round((event.loaded / event.total) * 100)
        if(percent < 100){ entry.progress(percent) }
      }
    })
    xhr.open("POST", url, true)
    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    xhr.send(formData)
  })
}

Showing Posts 1 to 4

axelson

axelson

Scenic Core Team

I don’t have a link handy but I believe you need to change a setting on your S3 bucket itself to allow uploads from localhost:4000

maz

maz OP

That was it, thanks. It uploaded. This is how I set the CORS policy on the S3 bucket. It is way to open but a good starting point if you’re debugging.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
           "GET",
           "PUT",
           "POST",
           "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]
axelson

axelson

Scenic Core Team

Ah, I’m glad that it helped. Thanks for posting back with your solution :+1:

— All posts loaded —

Where Next? Top

Trending in Questions Top

katta
I having some trouble figuring out if I have set myself too strict of standards for my production server. Currently I can handle 75% of r...
New
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
achenet
Hello, I’m trying to build a basic Phoenix web-app, and I’d like to use Tailwind. However, when I launch mix phx.server, I get an error...
New
kpanic
Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...
New
asweet-confluent
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New
mnkhod
So i have been using ash framework for a while and i love it. However currently the issue im having with ash framework is the error handl...
New
Cxx-mlr
I’m working on a small exercise involving update_in/3, and I came up with this solution: data = %{ name: "Periodic Table", category:...
New

Other Trending Topics Top

GenericJam
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
budgie
A little off-topic, but I feel like people here have a good head on their shoulders. I used to be quite good at making software. Was luc...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews