How to post file with new html form from append in laravel

Question

I have issue about the picture doesn't send to server. ok let me to tell about my code. I have code jQuery which the code append edit modal to container edit. the below code is container edit which to put edit modal from server

<div id="container-edit"></div>

and then I have called ajax which to get some code modal edit form and the result this

<form method=post enctype="multipart/form-data" action=gotolinkedit>
    <input type=text name="example1" value="somevalue" />
    <input type=file name="picture" />
    <input type=submit name="btnSubmit" value="submit" />
</form>

and when I submit, the input example1 receive my input, but the input file picture doesn't get my upload picture.

and this my controllers code

<?php
namespace App\Http\Controllers\FrontEnd\MarketPlace;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class ListOrderServices extends Controller
{
public function editServices(Request $request) {
    if ($request->file('picture') == null) {
        return dd($request->input('picture'));
      }
    }
}

and the return is null.

how to solve this problem?

Answer 1

public function editServices(Request $request) {

    if (!empty($request->file('picture'))) {

      dd($request->file('picture'));
      }
    }

Answer 2

public function editServices(Request $request) {
$file = $request->file('picture');

if (!empty($file)) {

    dd($file);

  }
}

Answer 3

So that means, that the problem is on javascript. Could you show it? I can advice you to use FormData object to send files on server.

var formData = new FormData;

   var files = input.eq(0)[0].files[0];// your file input element

   if (!files) {
       return;
   }

   formData.append("picture", files);

$.ajax({
       url:urlUpload,
       data:formData, ...

Maybe not very clean, but try this:

$("body").on('click', '.save-data-services', function () {

    var form = $(this).closest('form');

    var fileInput = form.find('input[name="picture"]');

    var formData = new FormData;

    var files = fileInput.eq(0)[0].files[0];

   if (!files) {
       return;
   }

   formData.append("file", files);
   formData.append("example1", form.find('input[name="example1"]').val());

   var urlUpload = form.attr('action');

   $.ajax({
       url:urlUpload,
       data:formData,
       type:"POST",

       contentType: false,
       processData: false,
       success: function(data){

            console.log(data);

       },
       error: function(obj,code)
       {
           console.log(obj,code);
       }
   });

   return false;

});

Answer 4

$(document.body).on('click', '.save-data-services', function(e) {
   $(this).parent().prev().children().submit();
   e.preventDefault();
});
$(".save-ads").on('submit', function(e) {
   e.preventDefault();
});

just using submit bro.