I spent days looking for a solution to my problem, but with no sucess.
The problem is: I have a html file with form, and inside a form I have a dropdown options, and a file input label, as you can see below:
<form enctype="multipart/form-data">
<div class="form-group">
<label for="drop">Choose one:</label>
<select class="custom-select" id="drop" name="dropCustom">
<option selected></option>
<option>TEST</option>
<option>TEST1</option>
<option>TEST2</option>
<option>TEST3</option>
</select>
<hr>
<label>Upload Product CSV file Here</label>
<input size='5000000000' type='file' name='filename' id='filename'>
<button type="button" class="btn btn-outline-primary btn-lg btn-block" id='btnget'>UPDATE</button>
The button 'update' call a javascript function that executes a post. BUT THE PROBLEM IS that I'm not being able to pass the file data with the post. I can pass with no problem the modal choose, but not the data file. The file that I'm tryng to pass is a .csv file.
Here's the js code:
$('#btnget').click(function() {
getResponse_insert();
});
function getResponse_insert() {
$.post("update.php", {
name: $('#drop').val()
//I´ve been trying to pass the file data here.
})
.done(function() {
alert("Sucess!");
})
.fail(function() {
alert("Fail");
});
}
Some options that I have tested (I've been trying one option listed below at a time, I didn't test all at once):
$('#btnget').click(function() {
getResponse_insert();
});
function getResponse_insert() {
$.post("update.php", {
name: $('#drop').val(),
filename: document.getElementById('filename'); // option 1
filename: document.getElementById('filename').value; // option 2
filename: document.getElementById('theFile').files[0].name; //option 3
})
.done(function() {
alert("Sucess!");
})
.fail(function() {
alert("Fail");
});
}
The other php file that catches the file data is working well. I was able to send the data using an input form submit, like below:
<form enctype='multipart/form-data' action='update.php' method='post'>
<label>Upload Product CSV file Here</label>
<input size='5000000000' type='file' name='filename'>
<input type='submit' name='submit' value='Upload Products'>
But with javascript post, I just can't send in any way using js post. I have to use JS post, for my problem here, is not an option send using 'submit' button.
Can someone help me ?
Thanks.