HTML 5 Hochladen von Dateien per Drag & Drop

Question

Ich möchte Dateien per Drag & Drop hochladen

Ich benutze Laravel Framework 5.4 und JS. Das Problem besteht darin, was passiert, nachdem der Upload abgeschlossen ist. Ich kann sehen, dass die Datei in den Ordner hochgeladen wird, aber den Namen der Datei oder einen Verweis darauf nicht abrufen kann.

Dies ist meiner Meinung nach .. Ich bin das Hochladen von Dateien als E-Mail-Anhänge

{!! 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']) !!} 

Die Skripte I

(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(); 
    } 
})(); 

Das Skript ich das Formular action-Attribut verwendet, um unter Verwendung bin senden um die Dateien hochzuladen. Da die Formularaktion die E-Mail senden soll, habe ich xhr.open ("POST", "/ getAttachments", true) an eine andere Controller-Methode weitergeleitet, die ich in der send-Methode aufruft.

Mein Controller-Methoden @getAttachments und @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 
}} 

und ich versuchte

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

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

Habe ich es falsch zurückkehrt, denn wenn ich die Seite aktualisiert und $ _SERVER senden hit [ 'HTTP_X_FILENAME '] Variable ist verloren, so habe ich versucht, es in die Sitzung zu speichern, aber keine Verwendung .. Kann die Dateien nicht

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); 
    } 

Ich weiß nicht warum, aber es speichert auch nicht in der Sitzung.

Answer 1

Nicht sicher, was genau Sie versuchen zu tun. Aber wenn Sie eine Datei per Drag hochladen wollen und fallen dann würde ich Ihnen dieses ehrfürchtige js vorschlagen verwenden:

http://www.dropzonejs.com/

Wenn Sie die Implementierung sehen möchten, dann können Sie es überprüfen hier über:

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