2017-10-18 4 views
0

Je veux utiliser dropzone pour télécharger plusieurs images avec un autre formulaire entrées donc je veux un div qui montre les images lorsque l'utilisateur clique, aussi j'ai un bouton qui déclencher le formulaire .Laravel et dropzone en utilisant div et un autre formulaire entrées

j'ai cela, mais sa ne fonctionne pas

html:

<div class="col-md-12"> 
     <h1>Upload Multiple Images using dropzone.js and Laravel</h1> 
     {!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => '', 'id' => '' ]) !!} 

     {!! Form::text('name'); !!} 
     <div class="dropzone" id="image-upload"> 
      <h3>Upload Multiple Image By Click On Box</h3> 

      <button type="submit" class="btn btn-success" id="submit-all"> 
      Enviar files 
      </button> 
     </div> 
     {!! Form::close() !!} 
    </div> 

dropzone:

Dropzone.autoDiscover = false; 

    var imageUpload = new Dropzone("div#image-upload", { 
     url: "dropzone/store", 
     autoProcessQueue:false, 
     uploadMultiple: true, 
     maxFilesize:5, 
     maxFiles:3, 
     acceptedFiles: ".jpeg,.jpg,.png,.gif", 

     init: function() { 
      var submitButton = document.querySelector("#submit-all") 
       //imageUpload = this; // closure 

      submitButton.addEventListener("click", function(e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       imageUpload.processQueue(); // Tell Dropzone to process all queued files. 
      }); 

      // You might want to show the submit button only when 
      // files are dropped here: 
      this.on("addedfile", function() { 
       // Show submit button here and/or inform user to click it. 
      }); 

     } 

    } 

cela m'a donné cette erreur: http://127.0.0.1/project/public/dropzone/store 419 (statut inconnu)

myController:

public function dropzone() 
{ 
    return view('dropzone-view'); 
} 

/** 
* Image Upload Code 
* 
* @return void 
*/ 
public function dropzoneStore(Request $request) 
{ 


    $dir = public_path().'/upload/'; 
    $files = $request->file('file'); 

    foreach($files as $file){ 
     $fileName = $file->getClientOriginalName(); 
     $file->move($dir, $fileName); 
    } 
} 

routes: web.php

Route::get('dropzone', '[email protected]'); 
Route::post('dropzone/store', ['as'=>'dropzone.store','uses'=>'[email protected]']); 
+1

oui c'est l'erreur, j'ai mis dans l'objet dropzone comme ceci: var myDropzone = new Dropzone ("div # ima ge-upload ", {headers: { 'X-CSRF-TOKEN': $ ('meta [nom =" csrf-token "]'). attr ('contenu') })}; – Leoh

Répondre

1

Laravel renvoie une réponse 419 lorsqu'il y a un problème d'incompatibilité jeton. Le code que vous avez affiché POSTE les fichiers sur votre serveur, mais ne transmet pas un _token avec la demande. Le middleware web, qui est appliqué par défaut, fera la vérification du jeton, et puisqu'il n'y a pas de jeton, cela échouera et enverra un 419.

Vous pouvez probablement le voir vous-même si vous regardez dans devtools de votre navigateur, cliquez sur le Cliquez sur l'onglet réseau, cliquez sur la demande POST où le fichier est téléchargé et cliquez sur les onglets Aperçu ou Réponse.

Donc vous devez passer un _token avec la demande. Il y a plusieurs façons de le faire, mais le plus simple probablement what is described in the docs:

  1. Ajouter le jeton à votre <head>

    <meta name="csrf-token" content="{{ csrf_token() }}"> 
    
  2. passent automatiquement à chaque requête AJAX:

    $.ajaxSetup({ 
        headers: { 
         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
        } 
    }); 
    
+0

merci pour votre aide. Ne paniquez pas :) – Leoh