Using Dropzone with Laravel 5.5

Question

I would like to implement Dropzone in my long form. All tutorials focus on image upload ONLY, there are no tutorials if you have other stuff in your form. I am stuck in displaying dropzone. I have linked css and js files in my layout file but I still get an unstylized box for image upload and error in console: No URL provided.

This is a part of my form that should display Dropzone:

<form action="/ads/new" method="post" enctype="multipart/form-data">
<input class="input" type="text" name="name">
<input name="file" type="file" class="dropzone" multiple />

I would appreciate any help. Thanks.

UPDATE: I googled all the examples for this uploader and they all have only image upload field and nothing else. I need a solution when I have actually more fields in the form. Class dropzone can't be on whole form because I have more fields in it This is not just an image uploader!

I tried with this:

Dropzone.autoDiscover = false;

  $("#pics").dropzone({
    url: '/ads/new',
    maxFilesize: 1
  });

And there are no errors but whole dropzone functionality is gone.

Btw. If you don't know how to help then there is no need to downvote.

From the docs `Don’t forget to specify an url option if you’re not using a form element, since Dropzone doesn’t know where to post to without an action attribute.` may be it would be good if you'd share your js or complete form — linktoahref, Sep 30 '17 at 08:45
I actually don't have js for Dropzone, it is very confusing to me how this library works with PHP. Update: I have added some javascript code found here https://stackoverflow.com/questions/41997927/dropzone-uncaught-error-no-url-provided but I get classic jquery error Dropzone not defined... — Kira, Sep 30 '17 at 08:46
please update your question with the code including the form that you are using — linktoahref, Sep 30 '17 at 08:53
I have used dropzone in Laravel 5.4 in combination with JQuery. I'm not able to provide the answer now right away but I could give it to you later today if you want. — Lars Mertens, Sep 30 '17 at 11:00

score 0 · Answer 1 · answered Sep 30 '17 at 11:49

0

Try this might be help you

<form action="/ads/new" method="post" enctype="multipart/form-data" class="dropzone">
<input class="input" type="text" name="name">
<input name="file" type="file"  multiple />

answered Sep 30 '17 at 11:49

Dharmesh Rakholia

1,210
9
22

If I use dropzone class on a whole form then rest of the stuff is basically unusable and ugly. CSS get completely screwed. – Kira Sep 30 '17 at 12:17
can you provide snapshot of screwed css? – Dharmesh Rakholia Sep 30 '17 at 12:31
Unfortunately no, too much work just to show something I know is broken. – Kira Sep 30 '17 at 12:44
I can show you this http://d.pr/i/S3XpJ/3evQyxhq This is when I apply it to only image upload item – Kira Sep 30 '17 at 12:54

Lars Mertens · Answer 2 · 2017-09-30T11:57:26.503

To make dropzone work in Laravel you can use the example below. Change it to your desired behaviour of course.

HTML

<form id="my-awesome-dropzone" class="dropzone"></form>

JQuery

<script type="text/javascript">
        Dropzone.autoDiscover = false;
        $(document).ready(function(){

            var baseUrl = "{{ url('/') }}";
            var token = "{{ Session::token() }}";

            $("#my-awesome-dropzone").dropzone({
                paramName: 'file',
                url: baseUrl+"/ads/new",
                params: {
                    _token: token
                },
                dictDefaultMessage: "Drop or click to upload images",
                clickable: true,
                maxFilesize: 2,
                addRemoveLinks: true,
                removedfile: function(file) {
                    // @TODO : Make your own implementation to delete a file
                },
                queuecomplete: function() {
                    // @TODO : Ajax call to load your uploaded files right away if required
                }
            });
        });
</script>

Laravel Upload Function for route: /ads/new

use Illuminate\Support\Facades\File; // Required Dependencies
use Illuminate\Support\Facades\Response;
use Illuminate\Support\Facades\Input;

public function upload() {
        $destinationPath = public_path() . '/uploads/'; // upload folder, set whatever you like
        $fileNameWithExtension = Input::file('file')->getClientOriginalName();

        $upload_success = Input::file('file')->move($destinationPath, $fileNameWithExtension); // uploading file to given path

        if ($upload_success) {
            return Response::json('success', 200);
        } else {
            return Response::json('error', 400);
        }
}

As I mentioned before, my form has other stuff in it. Declaring dropzone class on a form element completely destroys my form. I tried your code to see what happens = nothing. — Kira, Sep 30 '17 at 12:16
@KiraArik Your problem may be elsewhere because this code works for css and js file uploads too — Lars Mertens, Sep 30 '17 at 12:25
But this is again just for one input within the form. Images. Nothing else. And I have several other items in my form that I have to process. — Kira, Sep 30 '17 at 12:45

Using Dropzone with Laravel 5.5

2 Answers2