8

I am trying to ajax submit form to a Laravel 5 controller method. I understand that in php, you can define a FormData object, append the input fields to the object and send it to the server where you can now extract the values using the input field names.

Like so:

var form_data = new FormData();
formdata.append('file_name', 'some_file_name_from_form.png');

When form_data is sent as the data in the ajax call, I can get the file in PHP by using the $_FILES['file_name']['name'];.

So I tried this same logic in a Laravel controller method. I tried just to grab the name of the file in the $request object but only got null.

My controller method:

public function postImage(Request $request)
{
    $file = $request->get('file_name');

    dd($file);
}

But when I dd the whole request, I see this weird object:

array:1 [ "file_name" => UploadedFile {#199 -test: false -originalName: "work-fitness_00255959.png" -mimeType: "image/png" -size: 34215 -error: 0 #hashName: null path: "/tmp" filename: "phpVodsUg" basename: "phpVodsUg" pathname: "/tmp/phpVodsUg" extension: "" realPath: "/tmp/phpVodsUg" aTime: 2017-06-04 12:42:26 mTime: 2017-06-04 12:42:26 cTime: 2017-06-04 12:42:26 inode: 17573243 size: 34215 perms: 0100600 owner: 1000 group: 1000 type: "file" writable: true readable: true executable: false file: true dir: false link: false } ]

Please how do I get the image sent through FormData() object in Ajax through it's name?

Thanks for any help

2 Answers 2

16

You can do this.

// get the `UploadedFile` object
$file = $request->file('file_name');
$file = $request->file_name;

// get the original file name
$filename = $request->file('file_name')->getClientOriginalName();
$filename = $request->file_name->getClientOriginalName();

Check out the documentation for more information https://laravel.com/docs/5.4/requests#retrieving-uploaded-files

The api methods available on the uploaded file http://api.symfony.com/3.0/Symfony/Component/HttpFoundation/File/UploadedFile.html

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

Comments

3

The code bellow is working for me:

$("#your_form").submit(function(e){
    e.preventDefault();
    var form = $(this);
    var url = form.attr("action");
    var data = new FormData(form[0]);
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        cache: false,
        processData: false,
        contentType : false,
        success: function (data) {
            console.log(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR, textStatus, errorThrown);
        }
    });
}); 

my problem was in property contentType. So, I set as false and it's ok!

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.