asnyder002
I have DropZone.js set up to accept an uploaded file.
<div class="container">
<%= form_for @conn, Routes.admin_upload_path(@conn, :create, []), [data: [turbolinks: false], multipart: true, class: " dropzone dz-clickable rounded-lg h-1/2 bg-gray-200 justify-center my-5 flex flex-wrap", id: "mydropzone", name: "mydropzone"], fn f-> %>
<div class="dropzone-previews"></div>
<% end %>
</div>
Once uploaded, the file properly gets sent to the correct action:
def create(conn, %{"upload" => upload} = params) do
# Temp use for testing
csv_sha256 = "1fa7cfa1068a21894ebdab8edfd074453571c0d5520223380d8c44c633b4e288"
conn
|> put_flash(:info, "file uploaded correctly")
|> redirect(to: Routes.admin_upload_path(conn, :show, csv_sha256))
end
def show(conn, %{"csv_sha256" => csv_sha256} = params) do
shipments = App.list_shipments_by_csv_sha256()
render(conn, "show.html")
end
The problem I am facing is that I am unable to redirect or render once I’ve reached the create action. I’ve been able to solve this problem in other projects by using the DropZone event “queueComplete”:
queuecomplete: function queuecomplete() {
let dropzone = document.getElementById("mydropzone");
window.location.href = dropzone.action;
},
I am unable to use this workout around this time because instead of just returning to an index page, I need to go to a page using a specific identifier. If anyone has an idea that can point me in the right direction that would be great. Thanks.`
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Elixir, Erlang & messaging conferences from Code Sync. Next up: ElixirConf US (10–11 Sep) & Code BEAM Europe (21–22 Oct), Haarlem + online.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 2- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
kynoshi
Hi asnyder002!
The scenario you are describing seems basically clear to me, only in the details i have the feeling to miss some crucial information to give a good answer to you. Here is some analysis of the above scenario:
a) Given, that the action is called properly and the upload did well, you code looks like the redirection target should be the route of
WhateverWeb.AdminUpload.showwhich i assume isshow(conn, %{"csv_sha256" => csv_sha256} = params)as listed above. You properly redirect fromcreatetoshowwhich should render a list of shipments, matching the csv_sha256 parameter.App.list_shipments_by_csv_sha256()is probably missing a parameter here, but that’s probably not the single point of failure here.b) As I see in the template code, you seem to render a default, html form. Since you relate to the
:createaction, this is most likely a POST/PUT HTTP call. I cannot see anything here, that turns the default HTTP Post (with page reload) into an Ajax call or alike. So, the form will probably behave that way.Assumption: I am not seeing any submit button but a DropZone field. I’ve never used DropZone but due to the missing submit button and the fact, that your above controller code looks fine AND you are pointing to the fact, that you’ve used a JS callback in the past to delegate after upload, come to the conclusion, that you actually seem to be confusing/mixing up between “real/basic” HTML Forms which do full HTTP POST and “nice/modern/dynamic” HTTP Forms, that make heacy use of JS callbacks,
Here are some things for you in order to figure out what happens and to probably solve the problem yourself:
Assuming you would to keep DropZone:
createaction you want to stop using Phoenix for redirection and just return the “external reachable” URL of theshowendpoint/action.console.log(arguments)right as first line of youqueuecomplete: function queuecomplete()callback. Even better use the browsers debugging console and put thedebugger;statement instead ofconsole.log. You will want to ensure that the callback is even activated and if it is activated, what the actual response is the complete url including sha256 hash from yourcreateaction.createresponse reaches your JS callback, just fiddle the URL from the resposne and use it as value forwindow.location.hrefThis might hopefully do the trick for you. If understood your overall goal incorrect and you want to accomplish something else, it would work best for me, if you’d upload a minimal, “runnable”, sample project github or alike.
asnyder002
Hey, thank you so much. This was extremely helpful. I felt I was missing something, from inexperience, and this lead me to learn a lot.
In the create action I sent this as a response
I then found a “success” event that gets triggered in DropZone and took the URL from the response and set the location. Thanks again man.