Upload Image to database with javascript in laravel

Question

I have a list of form such this code and need to save data with js,my code in blade file is here:

<input type='file' id="Pre_File">
<input type="text" id="Product_Name" class="profile-input">
<textarea type="text" id="Product_Desc" class="profile-input"></textarea>
 <div id="ProSave">
   <div class="card-footer">
      <button type="submit">Save</button>
   </div>
 </div>

And jquery that I used to save Product_Name and Product_Desc is here:

<script>
  $(document).ready(function (event) {
    $('#ProSave').click(function (event) {
        var Product_Name = $('#Product_Name').val();
        var Product_Desc = $('#Product_Desc').val();
        $.post('/Product/Free/Save', {
                'Product_Name': Product_Name,
                'Product_Desc': Product_Desc,
                '_token': $('input[name=_token]').val()
     });
   });
</script>

And Controller has this code:

public function Add(Request $request){
    $product = new Product;
    $product->product_name = $request->Product_Name;
    $product->product_desc = $request->Product_Desc;
    $product->save();
}

How I Can get file input and move file folder in public and save in database?

Mayank Pandeyz · Accepted Answer · 2018-07-04 06:08:36Z

1

You cannot send a file using traditional ajax post approach, for this you have to use formData object like:

var variable1 = $("#elemId").val();
var fileData  = $('#province_upload_image').prop('files')[0];

// Create form data object and append the values into it
var formData = new FormData();
formData.append('fileData', fileData);
formData.append('variable1', variable1);
// add as many variables you want

$.ajax({
url: $('meta[name="route"]').attr('content') + '/your_route',
method: 'post',
data: formData,
contentType : false,
processData : false,
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response){

});

Controller:

$fileData   = $request->file('fileData');
$variable1  = $request->input('variable1');
// Use it accordingly

edited Jul 4, 2018 at 6:08

answered Jul 4, 2018 at 5:57

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

Upload Image to database with javascript in laravel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related