I have a code that I am using in another app to upload files using Ajax which is working well. Reusing this code in a new app with Jquery modal dialog is not working as expected. Below is my form:
{!! Form::open(['method' => 'POST', 'route' => ['auto-evaluation-documents.store'], 'files' => 'true', 'role' => 'form', 'id' => 'document_form']) !!}
<div class="modal-content" modal-transclude="" title="New Attachment">
<div class="form-group">
<input class="ng-scope" type="file" name="file" id="file">
</div>
</div>
{!! Form::close() !!}
Below is my modal dialog
var dialog;
dialog = $(".modal-content").dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons: {
"Save": uploadFile,
Cancel: function() {
$('#file').val('');
$('.c-fileupload__body').hide();
dialog.dialog( "close" );
}
},
close: function() {
//form[ 0 ].reset();
//allFields.removeClass( "ui-state-error" );
$('#file').val('');
$('.c-fileupload__body').hide();
}
});
$("#new_attachment_button").button().on( "click", function() {
dialog.dialog( "open" );
});
Below is the upload file function
function uploadFile() {
var document_form = $('#document_form');
var options = {
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
uploadProgress: OnProgress, //upload progress callback
data: { 'document_type': 'file', 'evaluation_session_id':'2'},
url: document_form.attr('action'),
type: 'post',
dataType: 'json'
};
// attach handler to form's submit event
document_form.ajaxSubmit(options);
// return false to prevent normal browser submit and page navigation
return false;
}
// pre-submit callback
function showRequest(formData, jqForm, options) {
var file_msg = $('#file_msg');
file_msg.empty().hide();
var value = $('#file').fieldValue();
if (!value[0]) {
message = "<li>Please select a file to upload</li>";
file_msg.append(message).show();
return false;
} else {
formData.push({ 'name': 'file', 'value': value[0]});
return true;
}
}
In Laravel controller, I do:
public function store(Request $request)
{
$file = $request->file('file');
$return['success'] = true;
$return['file_name'] = $file;
return response()->json($return, 200, ['Content-Type' => 'text/html']);
}
However, when I check my console, the result I get for $request->file('file') is null
If I do $request->get('file'), I get C:\fakepath\banner-image.jpg
Why is $request->file('file') not working even though my form has enctype="multipart/form-data" ?
I have applied other solutions here with no success. Please help