Insert value of hidden file input into database?

Question

I want to insert the value of my hidden file input into my database but I'm unsure how. My code just keeps inserting blank values to my database, but I want to insert the filename that's being uploaded. This is my code:

<form action="handler.php" method="post" enctype="multipart/form-data">
    <div id="bd1" class="border">
        <input id="inp1" class="imginp" type="file" name="img1" hidden>
        <img src="https://img.icons8.com/wired/64/000000/add-image.png">
    </div>
    <input type="submit" name="submit">
</form>

<script>
for (let a = 1; a < 3; a++) {
    $("#bd"+a).click(function(e) {
        $(this).children(".imginp").click()
    });
    $('#inp'+a).click(function (e) {
       e.stopPropagation();
    });

    $('#inp'+a).on('change', function(e){
      var files = e.target.files;
      $.each(files, function(i, file){
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            template = 
            '<div class="border">'+
                '<input id="inp'+a+'" class="imginp" type="file" name="img'+a+'">'+
                '<img class="blah" src="'+e.target.result+'">'+
            '</div>';
            $('#bd'+a).replaceWith(template);
        };
      });
    });
}
</script>

if (isset($_POST['submit'])) {
    $img1 = $_FILES['img1']['name']; 
    $img1targ = "images/".basename($_FILES['img1']['name']);
    $img1muf = move_uploaded_file($_FILES['img1']['tmp_name'], $img1targ);

    $stmt = $conn->prepare("INSERT INTO images (img1) VALUES (?)");
    $stmt->bind_param("s", $img1);
    $stmt->execute();
    $stmt->close(); 
}

Debug with `var_dump` to be sure you're actually grabbing the right property instead of assuming you did. — tadman, Jul 29 '19 at 23:57
Whatever you're inserting to be sure the value is populated. Walk back from the blank entry in the database to the immediate operation before that, and keep going to the source of this value to ensure it's passed along correctly. — tadman, Jul 30 '19 at 00:08
@tadman I did that and get this: `string(0) ""`. I think this might be an html or javascript issue or something I'm missing in my code. — misner3456, Jul 30 '19 at 00:12
Trace back to where that came from and so on. Use the Web inspector feature in your browser to see what parameters were sent, if any. Use your JavaScript debugger and `console.log` to ensure they were properly collected in the first place. — tadman, Jul 30 '19 at 00:14

Zizzyzizzy · Accepted Answer · 2019-07-30T00:36:28.193

You are dynamically over-writing the input field with javascript, essentially erasing it before it can be submitted.

File input fields are controlled by the browser. If you debug in Chrome (hit F12, then right-click and inspect), you'll notice an input field of "file" type never actually changes. There's no value field, nothing.

Please see this excellent post: Using readAsDataURL() for image preview

I believe that is close to what you want to do.

Also, regarding debugging, this is what you would need to do:

if (isset($_POST['submit'])) {
print "<pre>" . print_r($_POST,TRUE) . "</pre>"; exit;
    $img1 = $_FILES['img1']['name']; 
    $img1targ = "images/".basename($_FILES['img1']['name']);
    $img1muf = move_uploaded_file($_FILES['img1']['tmp_name'], $img1targ);

    $stmt = $conn->prepare("INSERT INTO images (img1) VALUES (?)");
    $stmt->bind_param("s", $img1);
    $stmt->execute();
    $stmt->close(); 
}

I've added the print line that dumps out $_POST and then exits.

It will show something like this when you click submit:

Array
(
    [submit] => Submit
)

I don't think there can be two type attributes though.. and I believe you don't need a type attribute for hidden — misner3456, Jul 30 '19 at 00:08
Yeah I knew it had something to do with my javascript. I removed the bottom half of my js code and was able to insert the filename to the database that way, but it costed me that last js code, which I still needed. I just need to find out now how to make it work so it won't overwrite my input filename - thanks for further pointing that out. — misner3456, Jul 30 '19 at 01:11

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

There are many ways you can do it.

1 hide input

<input type='hidden' name='bla' value='bla'>

1 hide input 2

//...
<html>
<head>
  <style>
    /*class to hide inputs, or insert it in a file css*/
    .inputHidden{display:none !important;}
  </style>
</head>
<body>
  
  <!--add class-->
  <input class='inputHidden' type='file' name='bla'>
  
</body>
</html>

There are other ways with javascript but it's not necessary in your case.

And I'm sorry I don't use jQuery for a while, but I did understand that jQuery has nothing to do with your request to send the name of your file to the database, I also don't see any problem with your query at all unless if you have a typo there like name of the column or name of the table, types of the columns, length of string in a column ...

Insert value of hidden file input into database?

2 Answers2

1 hide input

1 hide input 2