HTML 5 Upload files using drag and drop - ajax

Question

I would like to upload files using a drag and drop
I'm using laravel framework 5.4 and JS. The problem is with what happens after the upload is complete. I can see the file is uploaded to the folder but can't get the name of the file or any reference to it.
This is my view.. I'm uploading files to send as email attachments
{!! 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']) !!}
The scripts I'm using
(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();
}
})();
The script I used was using the form action attribute to upload the files. Since the form action is to send the email, I routed xhr.open("POST", '/getAttachments', true) to a different controller method that I call in the send method.
My controller methods #getAttachments and #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
}}
and I tried
Storage::put($fn, file_get_contents('php://input'));
$file = Storage::get($fn) ; return $file;);
public function send( Request $request ) {
$file = $this->getAttachments();
// $file = $false}
I figured it is returning false because if I hit send the page refreshes
and $_SERVER['HTTP_X_FILENAME'] variable is lost, so I tried saving it to the session but no use.. Can't get the files
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);
}
Don't know why but it doesn't store to the session either.

Answer 1

Not sure what exactly you are trying to do. But if you to want to upload a file by drag and drop then I would suggest you use this awesome js:
http://www.dropzonejs.com/
If you would like to see the implementation, then you can check it over here:
https://github.com/xparthx/Laravel-AWS-S3