HTML 5 Télécharger des fichiers en utilisant le glisser-déposer

Question

Je voudrais télécharger des fichiers en utilisant un glisser-déposer

J'utilise laravel framework 5.4 et JS. Le problème est avec ce qui se passe après que le téléchargement est terminé. Je peux voir le fichier est téléchargé dans le dossier, mais ne peut pas obtenir le nom du fichier ou une référence à celui-ci.

C'est moi .. Je suis le téléchargement de fichiers à envoyer en pièces jointes

{!! Form::open([ 
    'url' => 'send', 
    'files' => true, 
    'id'=>'upload', 
    'enctype'=> 'multipart/form-data' 
]) !!} 
    <div class="box-body"> 
    <div class="form-group"> 
     {!! Form::text('to', null, ['class' => 'form-control', 'placeholder' => 'Send to']) !!} 
    </div> 
    <div class="form-group"> 
     {!! Form::text('subject', null, ['class' => 'form-control', 'placeholder' => 'Subject']) !!} 
    </div> 
    <div class="form-group"> 
     {!! Form::textarea('content', null, ['class' => 'form-control message-body wysihtml5-sandbox', 'placeholder' => 'Message']) !!} 
    </div> 
    <div class="form-group"> 
     <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="320000" /> 
     <div> 
      <label for="fileselect">Files to upload:</label> 
      <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /> 
      <div id="filedrag">or drop files here</div> 
     </div> 
     <div id="progress"></div> 
     <div id="messages"> 
     </div> 
    </div><!-- /.box-body --> 
    <div class="box-footer"> 
    <div class="pull-right"> 
     {{--<button class="btn btn-default"><i class="fa fa-pencil"></i> Draft</button>--}} 
     {!! Form::submit('Send', ['class' => 'btn btn-primary submit']) !!} 
        </div> 
    <div class="form-group"> 
     <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="320000" /> 
     <div> 
      <label for="fileselect">Files to upload:</label> 
      <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /> 
      <div id="filedrag">or drop files here</div> 
     </div> 
     <div id="progress"></div> 
     <div id="messages"> 
     </div> 
    </div><!-- /.box-body --> 
    <div class="box-footer"> 
     {!! Form::submit('Send', ['class' => 'btn btn-primary submit']) !!} 

Les scripts que je utilise

(function() { 

    var send = XMLHttpRequest.prototype.send, 
     token = $('meta[name=csrf-token]').attr('content'); 
    XMLHttpRequest.prototype.send = function(data) { 
     this.setRequestHeader('X-CSRF-Token', token); 
     return send.apply(this, arguments); 
    } 


    // getElementById 
    function $id(id) { 
     return document.getElementById(id); 
    } 
    // output information 
    function Output(msg) { 
     var m = $id("messages"); 
     m.innerHTML = msg + m.innerHTML; 
    } 
    // file drag hover 
    function FileDragHover(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     e.target.className = (e.type == "dragover" ? "hover" : ""); 
    } 
    // file selection 
    function FileSelectHandler(e) { 

     // cancel event and hover styling 
     FileDragHover(e); 

     // fetch FileList object 
     var files = e.target.files || e.dataTransfer.files; 

     // process all File objects 
     for (var i = 0, f; f = files[i]; i++) { 
      UploadFile(f); 
     } 

    } 

    function UploadFile(file) { 

     // following line is not necessary: prevents running on SitePoint servers 

     var xhr = new XMLHttpRequest(); 

     if (xhr.upload && file.size <= $id("MAX_FILE_SIZE").value) { 

      // create progress bar 
      var o = $id("progress"); 
      var progress = o.appendChild(document.createElement("p")); 
      progress.appendChild(document.createTextNode("upload " + file.name)); 


      // progress bar 
      xhr.upload.addEventListener("progress", function (e) { 
       var pc = parseInt(100 - (e.loaded/e.total * 100)); 
       progress.style.backgroundPosition = pc + "% 0"; 
      }, false); 

      // file received/failed 
      xhr.onreadystatechange = function (e) { 
       if (xhr.readyState == 4) { 
        progress.className = (xhr.status == 200 ? "success" : "failure"); 
       } 
      }; 

      // start upload 
      xhr.open("POST", '/getAttachments', true); 
      xhr.setRequestHeader("X_FILENAME", file.name); 
      xhr.send(file); 
     } 
    } 

    // initialize 
    function Init() { 

     var fileselect = $id("fileselect"), 
      filedrag = $id("filedrag"), 
      submitbutton = $id("submitbutton"); 

     // file select 
     fileselect.addEventListener("change", FileSelectHandler, false); 

     // is XHR2 available? 
     var xhr = new XMLHttpRequest(); 
     if (xhr.upload) { 

      // file drop 
      filedrag.addEventListener("dragover", FileDragHover, false); 
      filedrag.addEventListener("dragleave", FileDragHover, false); 
      filedrag.addEventListener("drop", FileSelectHandler, false); 
      filedrag.style.display = "block"; 

     } 

    } 

    // call initialization file 
    if (window.File && window.FileList && window.FileReader) { 
     Init(); 
    } 
})(); 

Le script j'utilisait l'attribut action du formulaire télécharger les fichiers. Étant donné que l'action de formulaire consiste à envoyer l'e-mail, j'ai routé xhr.open ("POST", "/ getAttachments", true) vers une autre méthode de contrôleur que j'appelle dans la méthode d'envoi.

Mes méthodes de régulation @getAttachments et @send

public function getAttachments() 
if ($fn) { 
// AJAX call 
file_put_contents(
    'uploads/' . $fn, 
    file_get_contents('php://input') 
); 
return $fn ; // HERE $fn = false though the name of the file stored is correct 
}} 

et j'ai essayé

Storage::put($fn, file_get_contents('php://input')); 
$file = Storage::get($fn) ; return $file;); 

public function send(Request $request) { 
$file = $this->getAttachments(); 
// $file = $false} 

je me suis dit qu'il retourne faux parce que si je frappe envoyer la page rafraichit et $ _SERVER [ 'HTTP_X_FILENAME '] variable est perdue, donc j'ai essayé de l'enregistrer à la session, mais pas d'utilisation .. Impossible d'obtenir les fichiers

public function getAttachments() 
{ 
    $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); 
    if ($fn) { 
     session(['attachments' => $fn]); 
     Storage::put($fn, file_get_contents('php://input')); 
    } 
} 
public function send(Request $request) { 
     //Grab uploaded file 
    if ($request->session()->exists('attachments')) { 
     $attachments = $request->session()->pull('attachments'); 
     $files = Storage::get($attachments); 
    } 

Je ne sais pas pourquoi, mais il ne stocke pas à la session non plus.

Answer 1

Vous ne savez pas exactement ce que vous essayez de faire. Mais si vous souhaitez télécharger un fichier par glisser-déposer alors je vous suggère d'utiliser ce js impressionnant:

http://www.dropzonejs.com/

Si vous souhaitez voir la mise en œuvre, vous pouvez le vérifier ici:

https://github.com/xparthx/Laravel-AWS-S3