Skip to content

Instantly share code, notes, and snippets.

@lucianotonet
Created January 22, 2016 00:56
Show Gist options
  • Save lucianotonet/f456611eb6b9ea53cc2f to your computer and use it in GitHub Desktop.
Save lucianotonet/f456611eb6b9ea53cc2f to your computer and use it in GitHub Desktop.
Laravel Ajax Upload - Frontend
{!! Form::open(['url' => url('/upload'), 'method' => 'POST', 'class' => "form-horizontal", 'role' => "form", 'id'=>'uploadFile']) !!}
<div class="row">
<label class="col-lg-2 control-label" for="fileInput">Anexos: </label>
<div class="col-lg-6">
<div class="form-group">
<input type="file" class="form-control" id="fileInput" name="file[]" placeholder="Input field" multiple>
</div>
</div>
<div class="col-lg-4">
<button type="submit" class="btn btn-primary"><i class="fa fa-upload"></i> Upload</button>
</div>
</div>
{!! Form::close() !!}
<script>
var form = document.getElementById('uploadFile');
var fileinput = document.getElementById('fileInput');
var request = new XMLHttpRequest();
form.addEventListener('submit',function (e) {
e.preventDefault();
var formdata = new FormData( form );
request.open('post', urlbase+'/upload'); // urlbase cames from PHP (https://github.com/laracasts/PHP-Vars-To-Js-Transformer)
request.addEventListener('load', transferComplete);
request.send( formdata );
})
fileinput.addEventListener('change', function (e) {
e.preventDefault();
form.trigger('submit');
})
var transferComplete = function ( data ){
response = JSON.parse( data.currentTarget.response );
if( response.success ){
alert( 'Uploaded o/' );
}
console.log( data.currentTarget.response );
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment