Image upload not working through ajax Laravel

Question

Having a weird issue and I'm sure it's got something to do with the way my script is grabbing the value of the file input field.

I know the controller function works because I've been able to do it by manually submitting the form without using ajax.

I also know the ajax works in sending and receiving the request because I tested it by modifying it to parse a string back and forth which worked.

Additionally I can see that the script is grabbing the file as when I select a file, it shows the selected file in the console.

In my browser I'm getting a 500 error and in Laravel I'm only getting this:

Symfony\Component\Debug\Exception\FatalThrowableError: Call to a member function getClientOriginalExtension() on string in C:\123\app\Http\Controllers\MyController.php:156

I've tried updating the controller to use Request->logo instead with no success.

View:

<form enctype="multipart/form-data" class="form-horizontal" method="POST" action="{{ url('studio/uploadLogo') }}">
    {{ csrf_field() }}
    <div class="form-group{{ $errors->has('studioname') ? ' has-error' : '' }}">            
                <label for="imageInput" class="col-md-4 control-label">Logo</label>
                <div class="col-md-6">
                    <input data-preview="#preview" name="logo" type="file" id="imageInput">
                    <img id="preview" src="" style="display: none"></img>
                    <input class="form-control" type="submit">
                </div>
            </div>
        </form>

Script:

$('#imageInput').change(function (e) {
    e.preventDefault();
    var logo = $('#imageInput').val();
    console.log(logo);
    $.ajax({
        type: "POST",
        url: '/studio/uploadLogo',
        data: {logo: logo},
        success: function( data ) {
            console.log(data);
        }
    });
});

Controller:

public function uploadLogo() {
    $file = Input::file('logo')->getRealPath();
    $photoName = str_random(20) . '.' . Input::file('logo')->getClientOriginalExtension();
    Input::get('logo')->move(public_path('avatars'), $photoName);
    $response = array(
        'status' => 'success',
        'data' => $photoName
    );
    return \Response::json($response);
}

Routes:

 Route::post('/studio/uploadLogo', 'MyController@uploadLogo');
 Route::get('/studio/uploadLogo', 'MyController@uploadLogo');

check url path is corect or not. `url: '/studio/uploadLogo',` — Bilal Ahmed, Dec 20 '17 at 11:17
you can get file extention name to this alternate way.(i.e. https://stackoverflow.com/questions/38403558/get-an-image-extension-from-an-uploaded-file-in-laravel) — AddWeb Solution Pvt Ltd, Dec 20 '17 at 11:32
I don't think that's right, your link is for getting an already uploaded file - I'm not able to process the upload. — hylian, Dec 20 '17 at 11:34
In your uploadLogo() function remove all code and just return success message and let me know you are able to get success message or not? — Muthu17, Dec 20 '17 at 12:31
@Muthu17 - Yes - I removed all other code and get success after selecting a file. — hylian, Dec 20 '17 at 12:34
Please check my comment @https://stackoverflow.com/a/47906332/4049692 — Muthu17, Dec 20 '17 at 12:43

Jalin · Accepted Answer · 2017-12-20T12:47:13.113

        You just change a view js script to submit like below
         $('.form-horizontal').submit(function(event){
            event.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : "/studio/uploadLogo", 
                data        : new FormData(this),
                contentType:false,
                processData:false,
            })
            .done(function(data,status){
                 //Your codes here
             });
        });


        and
        echo string response from controller like below
    ----------------
          $file=$request->file('logo');
          $uploaded_file_path='';
          if($file!=null) {
              $destinationPath = 'uploads';
              $uploaded=$file->move($destinationPath,$file->getClientOriginalName());  
              $uploaded_file_path= $uploaded->getPathName();
               $response = array(
                    'status' => 'success',
                    'data' => $uploaded_file_path
                );
          }else{
              $response = array(
                  'status' => 'failed',
                  'data' => $uploaded_file_path
              );          
          }     
         echo json_encode($response);
    ----------------

Muthu17 · Answer 2 · 2017-12-20T12:48:49.753

Try this in your controller

public function uploadLogo() {
    $file = Input::file('logo')->getRealPath();
    $photoName = str_random(20) . '.' . Input::file('logo')->getClientOriginalExtension();
    Input::file('logo')->move(public_path('avatars'), $photoName);
    $response = array(
        'status' => 'success',
        'data' => $photoName
    );
    return \Response::json($response);
}

You have given

Input::get('logo')->move(public_path('avatars'), $photoName);

Please change it to

Input::file('logo')->move(public_path('avatars'), $photoName);

and you should submit the form from ajax as like @jalin comment (https://stackoverflow.com/a/47906201/4049692)

Hope this should be the issue. Thanks!.

VinoCoder · Answer 3 · 2017-12-20T12:28:57.940

0

Try adding processData: false, contentType: false in your script code

$('#imageInput').change(function (e) {
e.preventDefault();
var logo = $('#imageInput').val();
var form_data = new FormData();
form_data.append("logo",$("#imageInput")[0].files[0]);
console.log(logo);
$.ajax({
    type: "POST",
    url: '/studio/uploadLogo',
    data: {form_data},
    cache : false,
    processData: false,
    contentType: false
    success: function( data ) {
        console.log(data);
    }
});
});

And try getting values in controller like $request->logo

Refer my answer here enter link description here

edited Dec 20 '17 at 12:28

answered Dec 20 '17 at 11:26

VinoCoder

1,133
5
22
45

Thanks for the suggestion, adjusted as suggested and no success. – hylian Dec 20 '17 at 11:32
I think you need formData().. Try my answer now – VinoCoder Dec 20 '17 at 12:09
Note your edit had an error: data: {formData} should be data: {form_data} but still didn't work. – hylian Dec 20 '17 at 12:26

score 0 · Answer 4 · answered Apr 20 '22 at 22:02

add data into FormData instance using 'this' and pass it to the data object in the ajax, also add contentType: false, processData: false

let formData = new FormData(this);
 $.ajax({
          type: "POST",
          url: "{{ route('auth.societies.store') }}",
          contentType: false,
          processData: false,
       });

then it will upload the form images

Image upload not working through ajax Laravel

4 Answers4