Merging dropzone.js with my form

Question

I'm creating a form that uses dropzone.js, I've managed to do it by having the drag and drop image by itself. The problem I'm having is that I'm struggling to merge dropzone with the form I'm having. If I add the dropzone class to my form then my whole form is the dropzone but I just want a section to be the dropzone.

Hope I explained it properly.

Here is my create.blade.php

{{ Form::open(array('route' => 'menus.store', 'class' => 'add-form')) }}
    <div class="form">
        <div class="parents_input">
                <div>
                    {{ Form::label('menu_id', 'Parent Menu')}}
                </div>

                <div>
                    {!! Form::select('menu_id', $menu_id->prepend('Please Select', '0'), null, array("class" => "form-control")) !!}
                </div>
            </div>

        <div class="title_input">
            <div>
                {{ Form::label('title', 'Title') }}
            </div>
            <div>
                {{ Form::text('title','', array('id' => 'title', "class" => "form-control")) }}
            </div>
        </div>

        <input type="file" name="file" class="dropzone" id="my-awesome-dropzone" />

        <div class="layout_type">
                <input id="home" type="radio" value="home" name="type">
                <label for="home">Home</label>

                <input id="stories" type="radio" value="stories" name="type">
                <label for="stories">Stories</label>
            </div>

        <div class="submit_button">
            <div>
                {{ Form::submit('Submit', array("class" => "btn btn-info submit", "role" => "button")) }}
            </div>
        </div>
    </div>
{{ Form::close() }}

Unknown Unknown · Accepted Answer · 2017-03-30T12:08:02

you have to add dropzone in one separate div.

   <script src="../../assets/dropzone/js/dropzone.js"></script>
   <link type="text/css" rel="stylesheet" 
     href="../../assets/dropzone/css/dropzone.css">

 <div class="">

  <div action="" id="dZUpload" class="dropzone" method="post" 
  enctype="multipart/form-data">

 </div>
 </div>

after that initialise dropzone.

Merging dropzone.js with my form

1 Answers