Jquery : Formdata file field is empty in $_Files

Question

i am posting formdata as below

let redirecturl="<?=base_url()?>admin/forms";
let formData = new FormData()
let posturl = " <?=base_url() . 'admin/forms/post_values';?>";
var filepath = document.getElementById("institute_systemlogo").value;
/*formData.append('file',d);*/
formData.append('form',JSON.stringify(FormArray));
formData.append('file', filepath);
$.ajax(posturl, {
    type: 'POST',
    data: formData,
    enctype: 'multipart/form-data',
    async: false,
    cache: false,
    contentType: false,
    processData: false
}, function (response) {
    console.log(response);
});

and receiving posted values as $_POST and $_FILES

if i do console.log in my formdata as below

console.log(formData.get("file")+"file here ");
console.log(formData.get("form")+"form here ");

i get the data in console as below

C:\fakepath\logo.png file here 
{"field_type":"date","field_label":"dfdf","field_options":"","is_required":false}]form here 

Now the problem is that when i receive the $_Files its empty while $_POST value is received, Please help me what am i doing wrong here

Answer 1

Assuming the #institute_systemlogo element is an input type="file" , then you need to upload the file, not the string value of its local path as is normally held in the value . Try this:

var filepath = document.getElementById("institute_systemlogo").files[0];

This is also assuming a file has been selected, and you are expecting only a single file. You would need some validation and/or a loop in those cases.