Paste image via ajax to laravel controller

Question

i'm trying to send a form with an image (file) via ajax to a laravel backend.

currently i'm trying to get it work with form data, but all i can get are the params but not the file...

I'm just outputting the content in console later on the ajax will be used

On the save click the currently displaed image should also be replaced with the uploaded one

 $(document).ready(function() { $('a[data-action=edit]').on('click', function() { $('.box-tools').addClass('hide'); $(this).closest(".box-primary").find('dl.view-data, .box-tools').addClass('hide'); $(this).closest(".box-primary").find('.spinner, form.form-data').removeClass('hide'); }); $('a[data-action=cancel]').on('click', function() { $('.box-tools').removeClass('hide'); $(this).closest(".box-primary").find('.box-tools, dl.view-data').removeClass('hide'); $(this).closest(".box-primary").find('.spinner, form.form-data').addClass('hide'); }); $('a[data-action=save]').on('click', function() { var form = $(this).closest('form.form-data'), formData = new FormData(), formParams = form.serializeArray(); $.each(form.find('input[type="file"]'), function(i, tag) { $.each($(tag)[0].files, function(i, file) { formData.append(tag.name, file); }); }); $.each(formParams, function(i, val) { formData.append(val.name, val.value); }); console.log(formData); console.log(formParams); // alert($(this).closest('form.form-data').serialize()); // alert($(this).closest('.box-primary').attr('id')); $('.box-tools').removeClass('hide'); $(this).closest(".box-primary").find('.box-tools, dl.view-data').removeClass('hide'); $(this).closest(".box-primary").find('.spinner, form.form-data').addClass('hide'); }); $('#file').on('change', function() { var file = document.getElementById("file"); $('.file-name > span[data-text]').html(file.value); $('a[data-action=remove-file]').removeClass('hide'); }); $('a[data-action=remove-file]').on('click', function() { $('a[data-action=remove-file]').addClass('hide'); }); });

 .box.box-primary { border-top-color: #00acd6; } .box { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); border-top: 3px solid #dddddd; } .box { position: relative; background: #ffffff; border-top: 2px solid #c1c1c1; margin-bottom: 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 100%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); } .hide { visibility: hidden; } .file-wrapper input[type="file"] { cursor: pointer; font-size: 100px; height: 100%; filter: alpha(opacity=1); -moz-opacity: 0.01; opacity: 0.01; position: absolute; right: 0; top: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box box-primary" id="profile-picture"> <div class="box-header"> <h3 class="box-title">Profilbild</h3> <div class="box-tools block-action permanent pull-right"> <a href="javascript:void(0)" class="btn btn-default" data-action="edit"> EDIT </a> </div> </div> <div class="box-body"> <div class="text-center"> <div class="small spinner hide"> <div>Loading…</div> </div> </div> <dl class="dl-horizontal view-data"> <dt></dt> <dd class="text-right"> <img class="img-rounded profile" alt="Avatar" src="/img/no-avatar.png"> </dd> </dl> <form class="form-horizontal hide form-data" role="form"> <input type="hidden" name="_token" value="b4AniUckmBZqImpPqFbVhkDWlUwKQ7oiUKDXwAyE"> <div class="form-group"> <label class="col-sm-3 control-label">Neues Profilbild</label> <div class="col-sm-9"> <div class="file-field clearfix" style="margin-top:3px"> <div class="file-wrapper"> <input type="file" id="file" name="file"> <button class="btn btn-default btn-sm" data-action="change-file">Profilbild hochladen</button> </div> <div class="file-name"> <span data-text=""></span> <a href="javascript:void(0)" data-action="remove-file" class="remove-file btn btn-link btn-sm pull-right hide"> <i class="glyphicon glyphicon-remove"></i> </a> </div> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-8"> <a href="javascript:void(0)" class="btn btn-primary" data-action="save">Speichern</a> <a href="javascript:void(0)" class="btn btn-default" data-action="cancel">Zurück</a> </div> </div> </form> </div> </div>

Answer 1

First you need to add attribute enctype="multipart/form-data" to your form tag like this:

<form class="form-horizontal hide form-data" role="form" enctype="multipart/form-data">

And formData can't be inspected in console window you should use this way

for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

Finally to submit your data use ajax call

 $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });