Skip to content

Instantly share code, notes, and snippets.

@warlord0
Last active February 23, 2018 10:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save warlord0/e9231c01c4ede213a6d837fce43702c0 to your computer and use it in GitHub Desktop.
Save warlord0/e9231c01c4ede213a6d837fce43702c0 to your computer and use it in GitHub Desktop.
Output from my Laravel file upload blade.
<main role="main" class="container">
<div class="card">
<div class="card-header">
<h4><i class="fa fa-upload"></i> Upload CSV Files <small>(drag and drop)</small></h4>
</div>
<div class="card-body">
<form method="GET" action="http://testserver/upload" accept-charset="UTF-8" class="uploadform" enctype="multipart/form-data">
<input class="form-control" name="_token" type="hidden" value="gHcZZlnXsPe3BZYns0u7CuSc8D51CE6gzHCflUhg">
<div class="col-12 mb-2">
<label for="file" class="control-label">Upload file</label>
<input class="form-control-file" name="file" type="file" id="file">
</div>
</form>
<div class="progress">
<div id="progress" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</main>
<!-- /.container -->
<script src="/js/app.js?id=e8e1c4197d4707b50b15"></script>
<script src="/js/vendor/jquery.ui.widget.js?id=8d64b58a6093b1bfa1ae"></script>
<script src="/js/jquery.iframe-transport.js?id=f371e8d9f57329f90114"></script>
<script src="/js/jquery.fileupload.js?id=40baba3efecd0cbc2f45"></script>
<script>
$(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#file').fileupload({
dataType: 'json',
progressall: function(e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress').css('width', progress + '%');
},
done: function(e, data) {
$.each(data.result.files, function(index, file) {
$.notify({
message: 'Uploaded ' + file.name
}, {
type: 'success'
});
});
$('#progress').css('width', '0%');
},
error: function(data) {
$.each(data.responseJSON.errors.file, function(index, message) {
$.notify({
message: message
}, {
type: 'danger'
})
});
$('#progress').css('width', '0%');
}
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment