Progress bar for multiple file input issue

Question

0.00/5 (No votes)

See more:

i have to create an upload script who contains five input to choose the file to upload

this is the html code

HTML

<pre><form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
	<br>
	 <input type="file" name="file1" id="file1">
	 <br>
	  <input type="file" name="file2" id="file2">
	<br>

	<br>
    <input type="submit" value="Upload">
    <progress id="progressBar" value="0" max="100" style="width:100%;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>
<script>

    document.getElementById('uploadForm').onsubmit = function(event) {
        event.preventDefault(); // Prevent the form from submitting the traditional way
        uploadFile();
    };

    function _(el) {
        return document.getElementById(el);
    }

    function uploadFile() {
        var file = _("file").files[0];
        var formdata = new FormData();
        formdata.append("file", file);
		 
        var ajax = new XMLHttpRequest();
        ajax.upload.addEventListener("progress", progressHandler, false);
        ajax.addEventListener("load", completeHandler, false);
        ajax.addEventListener("error", errorHandler, false);
        ajax.addEventListener("abort", abortHandler, false);
        ajax.open("POST", "upload.php");
        ajax.send(formdata);
    }

    function progressHandler(event) {
        _("loaded_n_total").innerHTML = "Uploaded " + event.loaded/1000000 + " Mo of " + event.total/1000000;
        var percent = (event.loaded / event.total) * 100;
        _("progressBar").value = Math.round(percent);
        _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
    }

    function completeHandler(event) {
        _("status").innerHTML = event.target.responseText;
        _("progressBar").value = 0; // Reset progress bar after completion
    }

    function errorHandler(event) {
        _("status").innerHTML = "Upload Failed";
    }

    function abortHandler(event) {
        _("status").innerHTML = "Upload Aborted";
    }





</script>

and this the upload.php code

PHP

<pre><?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (isset($_FILES['file']) && $_FILES['file']['error'] == UPLOAD_ERR_OK) {
        $uploadDir = 'uploads/';
        $uploadFile = $uploadDir . basename($_FILES['file']['name']);
        
        if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
            echo "File successfully uploaded!";
        } else {
            echo "Possible file upload attack!";
        }
    } else {
        echo "No file uploaded or upload error.";
    }
}
?>

when i upload the progress work but only the first file added in input was uploaded
How can i please resolve this issue
Thanks

What I have tried:

upload multiple input files with progressbar

Posted 28-May-24 4:15am

Red Kipling

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2024-05-28T04:26:00

Quote:

JavaScript

function uploadFile() {
    var file = _("file").files[0];
    var formdata = new FormData();
    formdata.append("file", file);

Your uploadFile function explicitly only sends the first file from the first input. If you want to upload files from multiple inputs, then you need to append each of them to the FormData object:

JavaScript

var formdata = new FormData();

var file = _("file");
for (var i = 0; i < file.files.length; i++) {
    formdata.append("file", file.files[i]);
}

file = _("file1");
for (var i = 0; i < file.files.length; i++) {
    formdata.append("file1", file.files[i]);
}

file = _("file2");
for (var i = 0; i < file.files.length; i++) {
    formdata.append("file2", file.files[i]);
}

...

But the obvious question is why you need five separate file input which accept a single file each, rather than a single file input with the multiple attribute applied:
multiple - <input type="file"> - HTML: HyperText Markup Language | MDN[^]