HTML 5ドラッグアンドドロップでファイルをアップロード

Question

ドラッグアンドドロップでファイルをアップロードしたい

私はlaravel framework 5.4とJSを使用しています。問題は、アップロードが完了した後に何が起こるかである。ファイルがフォルダにアップロードされているのがわかりますが、ファイルの名前や参照は取得できません。

これは私が

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

にメールの添付ファイルとして、私は私が使用するスクリプトは、フォームのaction属性を使用していた

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

を使用していたスクリプトを送信するためにファイルをアップロードしています。..私の見解でありますファイルをアップロードします。フォームアクションは電子メールを送信することなので、xhr.open（ "POST"、 '/ getAttachments'、true）をsendメソッドで呼び出す別のコントローラメソッドにルーティングしました。

私のコントローラメソッドの@getAttachmentsと@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 
}} 

と私が試した

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

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

私は私がページを と$ _SERVERを[リフレッシュし送信打つため場合はfalseを返している考え出し「HTTP_X_FILENAME ']変数が失われているので、セッションに保存しようとしましたが使用できません。ファイルを取得できません。

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

理由はわかりませんが、セッションに保存されません。

Answer 1

正確に何をしようとしているのかわかりません。あなたはドラッグすることで、ファイルをアップロードして、ドロップしたい場合はしかし、私はあなたがこの素晴らしいjsの使用を示唆している：あなたは、実装をご覧になりたい方

http://www.dropzonejs.com/

を、あなたはここでそれを上に確認できます。

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