Laravel : Bootstrap model returns the image as string instead of object

Question

Question : Why the image returns as string, It should be object.

I have the following <a> for triggering the model :

<a data-toggle="modal" data-target="#add-project"><i class="fa fa-plus pull-right" aria-hidden="true"></i></a>

And the model itself :

<div class="modal fade" id="add-project" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Add Portfolio</h4>
            </div>
            <div class="modal-body">
                {!! Form::open(['file' => true]) !!}
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="form-group">
                    <label for="Projecttitle">Project Title</label>
                    <input type="text" name="projectTitle" class="form-control" id="projectTitle" placeholder="Project title here...">
                    <small id="title-message" style="color: red;"></small>
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea style="width:100%; height:350px;" class="editor" id="project_description" name="project_description"></textarea>
                    <small id="description-message" style="color: red;"></small>
                </div>
                <div class="form-group">
                    <label for="uploadimage">Upload Image</label>
                    <div class="input-group">
                        <label class="input-group-btn">
                            <span class="btn btn-add">Choose File 
                                <input type="file" name="project_image" id="project_image">
                                <small id="projectImage" style="color: red;"></small>
                            </span>
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary btn-save" id="addProjectToPortfolio">Add Portfolio</button>
                </div>
            </div>

            {!! Form::close() !!}
        </div>
    </div>
</div>

The issue I am having is that when I do dd($request->all()); It returns the following :

array:4 [
    "projectTitle" => "asdasd"
    "project_description" => "asdasdasd"
    "project_image" => "15780727_1703225656655967_2240693812695563040_n.jpg"
    "_token" => "fefYsJd4Q53TB4K0RqlQzcWNTWMw2cmf8BPCcURW"
]

Notice that the project_image is string not an object.

My Ajax request is :

$('#addProjectToPortfolio').click(function() {            
    $.ajax({
        url: '/freelancer/add-to-portfolio',
        type: "post",
        data: {'projectTitle':$('#projectTitle').val(), 'project_description': $('#project_description').val(),'project_image': $('#project_image').val(),'_token': $('input[name=_token]').val()},
        success: function(data) {
            console.log('asd');
            //window.location = '/';
            if(data && data !="") {
                console.log(data);
                $('#title-message').text(data.projectTitle);
                $('#description-message').text(data.project_description);
                $('#projectImage').text(data.project_image);
            }
        },
        error: function(data) {
            // Error...
            var errors = $.parseJSON(data.responseText);
            console.log(errors);

            $.each(errors, function(index, value) {
                $.gritter.add({
                    title: 'Error',
                    text: value
                });
            });
        }

    });      
});

Question : Why the image returns as string, It should be object.

score 0 · Answer 1 · answered Jan 18 '17 at 07:22

0

Here problem might be you are sending only image name i.e value of image field instead you need to submit whole form you need send ajax data as

data:new FormData($("#upload_form")[0])

You can access file in controller by

Input::file('image_field'); or $request->file('image_field');

answered Jan 18 '17 at 07:22

Vaibhav Malve

116
1
9

can you explain a bit more ? i didn't got you. :( – Jan 18 '17 at 07:30
'project_image': $('#project_image').val()....it will only send name of the file from project_image input field.....instead you need to pass image i.e file info to server for that you need to submit whole form....that can do either by data: $("#form_id").serialize(); or by above mention method – Vaibhav Malve Jan 18 '17 at 09:30
Appreciate that, Already done your way, Still the same issue ! – Jan 18 '17 at 09:51
@VaibhavMalve is correct. Your code is not doing a file upload, just POSTing some text strings. There [are](http://stackoverflow.com/questions/32367132/laravel-5-ajax-file-image-upload) many [examples](http://stackoverflow.com/questions/22399322/ajax-file-upload-in-laravel) here [on SO](http://stackoverflow.com/questions/41820805/ajax-file-upload-with-form-data-laravel-5-3) . `#upload_form` won't work literally, as you don't have that form ID. Try `$("form")` if you have only 1 on the page. – Don't Panic Jan 24 '17 at 09:27

Laravel : Bootstrap model returns the image as string instead of object

1 Answers1