<form role="form" action="{{route('handleAddNewTrip')}}" class="dropzone" id="mydropzone" method="post" enctype="multipart/form-data">

    {{csrf_field()}}

    <div class="col-md-6">

       <div class="form-group">

           <label>Titre de voyage</label>

           <div id="dropzonePreview"></div>

           <button type="submit" name="save" class="btn btn-primary pull-right">Ajouter</button>

           <button type="reset" class="btn btn-default pull-right">Annuler</button>

       </div>

   </div>

</form>

<script>

    //  Bind the event handler to the "submit" JavaScript event

    $('form').submit(function(e) {

        myDropzone.processQueue();

        Dropzone.options.mydropzone = {

           //url does not has to be written 

           //if we have wrote action in the form 

           //tag but i have mentioned here just for convenience sake 

           url: '{{route('handleAddNewTrip ')}}',

           addRemoveLinks: true,

           autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button

           autoDiscover: false,

           paramName: 'pic', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then bydefault it taked 'file' as paramName eg: $_FILE['file'] 

           previewsContainer: '#dropzonePreview', // we specify on which div id we must show the files

           clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable 

           accept: function(file, done) {

           console.log("uploaded");

           done();

        },

        error: function(file, msg) {

           alert(msg);

        },

   };

</script>

<form role="form" action="{{route('handleAddNewTrip')}}" class="dropzone" id="mydropzone" method="post" enctype="multipart/form-data">

    {{csrf_field()}}

    <div class="col-md-6">

       <div class="form-group">

           <label>Titre de voyage</label>

           <div id="dropzonePreview"></div>

           <button type="submit" name="save" class="btn btn-primary pull-right">Ajouter</button>

           <button type="reset" class="btn btn-default pull-right">Annuler</button>

       </div>

   </div>

</form>

<script>

    //  Bind the event handler to the "submit" JavaScript event

    $('form').submit(function(e) {

        myDropzone.processQueue();

        Dropzone.options.mydropzone = {

           //url does not has to be written 

           //if we have wrote action in the form 

           //tag but i have mentioned here just for convenience sake 

           url: '{{route('handleAddNewTrip ')}}',

           addRemoveLinks: true,

           autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button

           autoDiscover: false,

           paramName: 'pic', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then bydefault it taked 'file' as paramName eg: $_FILE['file'] 

           previewsContainer: '#dropzonePreview', // we specify on which div id we must show the files

           clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable 

           accept: function(file, done) {

           console.log("uploaded");

           done();

        },

        error: function(file, msg) {

           alert(msg);

        },

   };

</script>

<form role="form" action="{{route('handleAddNewTrip')}}" class="dropzone" id="mydropzone" method="post" enctype="multipart/form-data">

    {{csrf_field()}}

    <div class="col-md-6">

       <div class="form-group">

           <label>Titre de voyage</label>

           <div id="dropzonePreview"></div>

           <button type="submit" name="save" class="btn btn-primary pull-right">Ajouter</button>

           <button type="reset" class="btn btn-default pull-right">Annuler</button>

       </div>

   </div>

</form>

<script>

    //  Bind the event handler to the "submit" JavaScript event

    $('form').submit(function(e) {

        myDropzone.processQueue();

        Dropzone.options.mydropzone = {

           //url does not has to be written 

           //if we have wrote action in the form 

           //tag but i have mentioned here just for convenience sake 

           url: '{{route('handleAddNewTrip ')}}',

           addRemoveLinks: true,

           autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button

           autoDiscover: false,

           paramName: 'pic', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then bydefault it taked 'file' as paramName eg: $_FILE['file'] 

           previewsContainer: '#dropzonePreview', // we specify on which div id we must show the files

           clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable 

           accept: function(file, done) {

           console.log("uploaded");

           done();

        },

        error: function(file, msg) {

           alert(msg);

        },

   };

</script>

<form role="form" action="{{route('handleAddNewTrip')}}" class="dropzone" id="mydropzone" method="post" enctype="multipart/form-data">

    {{csrf_field()}}

    <div class="col-md-6">

       <div class="form-group">

           <label>Titre de voyage</label>

           <div id="dropzonePreview"></div>

           <button type="submit" name="save" class="btn btn-primary pull-right">Ajouter</button>

           <button type="reset" class="btn btn-default pull-right">Annuler</button>

       </div>

   </div>

</form>

<script>

    //  Bind the event handler to the "submit" JavaScript event

    $('form').submit(function(e) {

        myDropzone.processQueue();

        Dropzone.options.mydropzone = {

           //url does not has to be written 

           //if we have wrote action in the form 

           //tag but i have mentioned here just for convenience sake 

           url: '{{route('handleAddNewTrip ')}}',

           addRemoveLinks: true,

           autoProcessQueue: false, // this is important as you dont want form to be submitted unless you have clicked the submit button

           autoDiscover: false,

           paramName: 'pic', // this is optional Like this one will get accessed in php by writing $_FILE['pic'] // if you dont specify it then bydefault it taked 'file' as paramName eg: $_FILE['file'] 

           previewsContainer: '#dropzonePreview', // we specify on which div id we must show the files

           clickable: false, // this tells that the dropzone will not be clickable . we have to do it because v dont want the whole form to be clickable 

           accept: function(file, done) {

           console.log("uploaded");

           done();

        },

        error: function(file, msg) {

           alert(msg);

        },

   };

</script>

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

active

oldest

votes

add a comment |