CODEWITHSUNDEEP
javascriptphpjquery
misner3456
misner3456

Reputation: 404

Javascript preventing input files from submitting to database

This is my code:

<form action="handler.php" method="post" enctype="multipart/form-data">
    <div id="pbd1" class="photbox">
        <input id="ph1" name="img1" type="file" hidden>
    </div>
    <div id="pbd2" class="photbox">
        <input id="ph2" name="img2" type="file" hidden>
    </div>
    <button type="submit" name="submit">Submit</button>
</form>

<script type="text/javascript">
for (let a = 1; a < 3; a++) {
    $("#pbd"+a).click(function(e) {
        $(this).children("#ph"+a).click();
    });
    $('#ph'+a).click(function (e) {
       e.stopPropagation();
    });
    $('#ph'+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="photbox">'+
                    '<input id="ph'+a+'" name="img'+a+'" type="file" hidden>'+
                    '<img class="blah" src="'+e.target.result+'">'+
                '</div>';
                $('#pbd'+a).replaceWith(template);
            };
        });
    });
}
</script>

What my code does: User clicks on div id="pbd1", it triggers a click on input id="ph1", which throws a dialog window requesting user to select a file from their computer. Once user has selected a file, a thumbnail image of that file is displayed. This is all worked by my javascript code. But my issue - this javascript somehow affects the uploaded file from being inserted into my database. My goal: to insert the uploaded files to my database. So I'm stuck and not sure how to fix this. Please help

EDIT: People are suggesting that it's an issue with my server. It is not because I am able to successfully submit this form doing it this way:

<input type="file" name="img1" id="clickme1" hidden>
<input type="file" name="img2" id="clickme2" hidden>
<span id="sp1">CLICKME1</span>
<span id="sp2">CLICKME2</span>
<span id="here1"></span>
<span id="here2"></span>

<script type="text/javascript">
$("#sp1").click(function(e) {
    $("#clickme1").click();
});
$("#sp2").click(function(e) {
    $("#clickme2").click();
});
document.getElementById('clickme1').onchange = function (evt) {
    $this = $(this).val();
    f = $this.replace(/.*[\/\\]/, '');
    $("#here1").text(f);
};
document.getElementById('clickme2').onchange = function (evt) {
    $this = $(this).val();
    f = $this.replace(/.*[\/\\]/, '');
    $("#here2").text(f);
};
</script>

But I cannot use this on my overall code. I need to use the "javascript thumbnail code" shown first. But it somehow is affecting the files from being inserted into the database.

Upvotes: 1

Views: 53

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

The problem stems from the fact that your code is replacing the input element, therefore you lose the selected file

The following not only corrects that mistake, but (hopefully) shows how you can avoid the for loop (note the extra class="inputFile" for the input)

<form action="handler.php" method="post" enctype="multipart/form-data">
    <div id="pbd1" class="photbox">
        <input id="ph1" name="img1" class="inputFile" type="file" hidden>
    </div>
    <div id="pbd2" class="photbox">
        <input id="ph2" name="img2" class="inputFile" type="file" hidden>
    </div>
    <button type="submit" name="submit">Submit</button>
</form>

<script type="text/javascript">

$(".photbox").click(function(e) {
    $(this).children(".inputFile").click();
});
$(".inputFile").click(function(e) {
    e.stopPropagation();
});
$(".inputFile").on('change', function(e) {
    var files = e.target.files;
    var _this = this;
    var file = files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var img = document.createElement('img');
        while(_this.nextElementSibling) _this.nextElementSibling.remove();
        img.className = 'blah';
        img.src = e.target.result;
        _this.insertAdjacentElement('afterend', img);
    };
    reader.readAsDataURL(file);
});
</script>

I've also removed the files loop, since you seem to only want a single file (in each input) anyway

A, perhaps, cleaner version of the change handler

$(".inputFile").on('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = e => { // this in here will be the input element
        var img = document.createElement('img');
        while(this.nextElementSibling) this.nextElementSibling.remove();
        img.className = 'blah';
        img.src = e.target.result;
        this.insertAdjacentElement('afterend', img);
    };
    reader.readAsDataURL(file);
});

Upvotes: 2

Related Questions