0

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.

Sweta Jain
  • 3,248
  • 6
  • 30
  • 50

0 Answers0