Uploaded file by ajax not getting data in php controller in Laravel

Question

I am using ajax to upload a photo in Laravel. URL is working fine but data is not receiving in function in a controller.

HTML Code

<input type="file" id="photo_input">

Ajax / JQuery Code

$('#photo_input').change(function(){
var formData = new FormData('#photo_input');    
$.ajax({
       type:'POST',
       url: home_url+'/upload-image',
       data:formData,
       cache:false,
       enctype: 'multipart/form-data',
       contentType: false,
       processData: false,
       success:function(data){
               console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    });

PHP Code in Controller

public function uploadImage(){
  $data = Input::all();
  print_r($data);
}

Response from function in a controller

array(
);

I haven't used <form> tag in html, I want to upload it directly. Do I need to add <form> tag? Is there anything which is missing?

@SagarGautam I am not using the form for this, do I need to add <form> tag for this? — Omkar
– Omkar, Commented Aug 15, 2017 at 10:20
Yes, create a form for the input and on submit do ajax request: — Haider Ali
– Haider Ali, Commented Aug 15, 2017 at 10:23
@Omkar see this question. might help you stackoverflow.com/questions/166221/… — Sagar Gautam
– Sagar Gautam, Commented Aug 15, 2017 at 10:25

milo526 · Accepted Answer · 2017-08-15 17:59:05Z

1

$("#example-form").submit(function(){

var formData = new FormData($(this)[0]);
    $.ajax({
        data: formData
    });
});

edited Aug 15, 2017 at 17:59

milo526

5,1035 gold badges47 silver badges63 bronze badges

answered Aug 15, 2017 at 12:57

syntaxe

1124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omkar Over a year ago

@milo Thanks for answering but I am not using <form> so can you please suggest how do I upload file without using <form> tag (if possible)?

syntaxe Over a year ago

You can use base64, post base64 data with ajax; stackoverflow.com/a/36281449/2693988 Later use PHP to image method; stackoverflow.com/a/15153931/2693988

Haider Ali · Accepted Answer · 2017-08-15 10:34:00Z

0

Do it like this:

<form method="POST" id="photoform" enctype="multipart/form-data">
<input type="file" id="photo_input">
</form>

And accordingly ajax request should change like this:

$('#photoform').submit(function(){
var fileupload = $('#photo_input').val();    
$.ajax({
       type:'POST',
       url: home_url+'/upload-image',
       data:{
           file: fileupload,
       },
       cache:false,
       enctype: 'multipart/form-data',
       contentType: false,
       processData: false,
       success:function(data){
               console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    });

edited Aug 15, 2017 at 10:34

answered Aug 15, 2017 at 10:26

Haider Ali

1,1218 silver badges23 bronze badges

3 Comments

Haider Ali Over a year ago

You can also do it without form as discussed in this url stackoverflow.com/questions/166221/…

Farsay Over a year ago

Your code wont work because this is not a way to upload a file using ajax. You will have to use formdata to upload files.

Haider Ali Over a year ago

@Farsay it will definitely work. I have used it in such way.

Collectives™ on Stack Overflow

Uploaded file by ajax not getting data in php controller in Laravel

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related