0
votes

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

1

1 Answers

0
votes

You should try to dump $request->all(); to see if error is on front-end. If you have file named "file" error is in front-end/Angular.