Redirecting after form submission using DropZone.js

Phoenix Forum Questions / Help
,
1

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.`

2

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.show which i assume is show(conn, %{"csv_sha256" => csv_sha256} = params) as listed above. You properly redirect from create to show which 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 :create action, 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:

  1. Stili inside your create action you want to stop using Phoenix for redirection and just return the “external reachable” URL of the show endpoint/action.
  2. put some console.log(arguments) right as first line of you queuecomplete: function queuecomplete() callback. Even better use the browsers debugging console and put the debugger; statement instead of console.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 your create action.
  3. if your create response reaches your JS callback, just fiddle the URL from the resposne and use it as value for window.location.href

This 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.

2 Likes
3

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

    conn
    |> send_resp(:ok, Routes.admin_upload_path(conn, :show, csv_sha256))

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.