Lonare's avatar

Dropzone send additional data

I have just incorporated dropzone.js into my page and created one instance with

<form class="dropzone dz-clickable" method="POST" action="{{ URL::route('upload-url') }}">
                              <input type="text" name="task_id" value="{{ $taskid }}">
                            <div class="dz-message">
                            <h4>Drag Photos to Upload</h4>
                            <span>Or click to browse</span>
                            </div>
                          </form>

no i want to upload each file and save it in my database with relevant task id.

but i dont understand how will i know if its sending taskid or not ? because in console there is nothing.

here is my controller code:

public function uploadfile(){ 
        $data               = Input::all(); 
        print_r($data);
        $file               = Input::file('file'); 
        $destinationPath    = '/files';
        $filename           = $file->getClientOriginalName();
        $extension          = $file->getClientOriginalExtension();  
        $uploadSuccess      = $file->move($destinationPath, $filename);
        if( $uploadSuccess ) {
           return Response::json('success', 200);
        } else {
           return Response::json('error', 400);
        }

    }
0 likes
5 replies
colourmill's avatar

This is explained on the dropzone.js website. You can append the form in the "sending" callback, something like this:

sending: function(file, xhr, formData) {
    formData.append("_token", token);
}

Look for "Listen to events" on the dropzone website, the description for the "sending" callback says this:

Called just before each file is sent. Gets the xhr object and the formData objects as second and third parameters, so you can modify them (for example to add a CSRF token) or add additional data.
Lonare's avatar

hi @colourmill, i am trying to alert a response after every successful upload but its not working do you think i am doing something wrong

Dropzone.options.myDropzone = {
  init: function() {
    this.on("success", function(file, responseText) {
      // Handle the responseText here. For example, add the text to the preview element:
      file.previewTemplate.appendChild(document.createTextNode(responseText));
      alert(responseText);
    });
  }
};
colourmill's avatar

@Lonare Well, my javascript skills are fairly lacking so I can't really say if that code is correct or not without trying it out. The only thing I can add is that you need to make sure that you send a 200 response to the upload request so that dropzone knows to hit the success callback.

Edit: Did you make sure the console didn't show any errors? It could be that the line before your alert throws an error and the alert is never called, move it up a line to be sure.

Please or to participate in this conversation.