This tutorial explains how to write JavaScript Code to Upload One File after another for HTML Form. It begins with the hard coding of the file input button for one file, and then continuing with adding more file input buttons, using JavaScript.

In one of the previous parts of the series, it was explained how to include a hyperlink of an image file, into the webpage, using DOM. The question is: is the resource (e.g. image) already in the website? If yes, then there is no need to upload a file (image) to the website directory. If no, then there is a need to upload a file to the website directory.

If there are more than one hyperlinks included, for more than one new file, then there is need for more than one file upload input buttons. For this project, one file upload input button is provided by hard coding within the HTML form tags; and any other is provided by JavaScript, while the page is actively displayed.

Hard Coding File Upload Input Button

To upload only one file without any restriction, the following code in the form element suffices:

            <div id='fil'>
                <input type='file' id='nameOfFile' name='nameOfFile'>
            </div>

Strictly speaking, the input element does not have to be inside a div element. The reason for putting it inside a div element is explained below.

The type of the input element is file (and not text or some other type). The ID of the input element is 'nameOfFile' and the name is 'nameOfFile'. These two values should always be the same. It should be replaced with a name for the purpose of the file, such as 'avatar'.

With this blunt input specification, a button will be displayed in the webpage with the name, "Browse…" . On the right of the button will be the text, "No file selected." .

When the button or the text next to it is clicked, a "File Upload" dialog box opens, for only one file to be selected. There are features in the dialog box, which the user can use to navigate to a particular directory and select only one file.

When the file is clicked to select it (becomes highlighted). The OK button or Select button of the dialog box has to be clicked, to dismiss the dialog box. The file is already selected. The text "No file selected." will change to the name of the file selected, without the preceding directory path. If the submit button of the form is clicked, the content of the file selected and its name, will be sent to the web-server. What exactly happens in the web-server is not address in this tutorial.

The Boolean multiple Attribute

If more than one file is to be selected from the dialog box, the boolean multiple attribute has to be used in the input element tag; like so:

        <input type='file' id='nameOfFile' name='nameOfFile' multiple>

However, this tutorial will not consider the case of selecting more than one file in the dialog box. And so the tutorial will continue without employing the multiple attribute.

Selecting One File after Another for this project, means that after selecting the first file, a new file upload input button will appear below the hard coded button for the selection of another file. After another file has been selected, another new file upload input button will appear below the previous file upload input button, for yet another file selection; and so on. Any extra new file upload input button is provided by JavaScript; see below. For this project, up to a maximum of 10 files can be uploaded.

Restricting the Type of File to Upload

The following file input tag shows the type of files that are allowed, for uploading:

        <input type='file' id='nameOfFile' name='nameOfFile' accept='.doc, .docx, .xml, .mp4, .pdf, .pdf'>

The accept attribute is used. Its value has the extensions of the different file types accepted (allowed). Each begins with a dot. They are separated by commas. Read through the tag, if that is not already done.

However, this tutorial will not consider the case of restricting files. For this tutorial, any file is allowed.

Hard Coded File Upload Input Button Elements

Actually, all the 10 file upload input button elements are hard coded. Only the first one is displayed. The following ones are displayed by JavaScript, when needed. The hard coding is:

            <div id='fil'>
                <p style='display:block' id='p0'><input type='file' id='0' name='0' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('0')">Delete</button></p>
                <p style='display:none' id='p1'><input type='file' id='1' name='1' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('1')">Delete</button></p>
                <p style='display:none' id='p2'><input type='file' id='2' name='2' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('2')">Delete</button></p>
                <p style='display:none' id='p3'><input type='file' id='3' name='3' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('3')">Delete</button></p>
                <p style='display:none' id='p4'><input type='file' id='4' name='4' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('4')">Delete</button></p>
                <p style='display:none' id='p5'><input type='file' id='5' name='5' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('5')">Delete</button></p>
                <p style='display:none' id='p6'><input type='file' id='6' name='6' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('6')">Delete</button></p>
                <p style='display:none' id='p7'><input type='file' id='7' name='7' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('7')">Delete</button></p>
                <p style='display:none' id='p8'><input type='file' id='8' name='8' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('8')">Delete</button></p>
                <p style='display:none' id='p9'><input type='file' id='9' name='9' onchange='changeFn(id)'> <button type="button" onclick="deleteInput('9')">Delete</button></p>
            </div>

Read through the code if that is not already done. The div element is the container for all the paragraph elements. Each paragraph element has one file upload input button tag (element). The first paragraph element is displayed, through its style attribute. The rest of the paragraph elements are not displayed, through their style attributes. JavaScript will display them, one followed by the other, when necessary.

As well as having a file upload input button, each paragraph has a clickable Delete button, to delete its paragraph and its file upload input button, and also its delete button.

JavaScript

There are three JavaScript code segments for uploading files: the maximum size segment, the create another segment, and the delete segment.

Maximum Size Code Segment

The code segment is:

                function changeFn(ID) {
                    const uploadField = document.getElementById(ID);
                    if(uploadField.files[0].size > 4194304) {
                        alert("File is greater than 4 MBytes !");
                        uploadField.value = "";
                    }
                    else {
                        createAnother();
                    }
                }

It is a function with name, changeFn(ID) and its argument is the ID of the corresponding input button tag.

When the file has been finally selected, that is an onchange event. Each file input tag has this event, hard coded. When the change occurs, the changeFn(ID) function is called. The function does not attach any file that is greater than 4 Megabytes.

If the file selected is greater than 4 MBytes, no attachment takes place, and the value of the file input element is replaced with "", and "No file selected." will appear by to the "Browse…" input button. Otherwise, the function, createAnother() for another file upload segment will be called. Calling that function, means that the approved file, has size less than or equal to 4 MBytes and has been attached.

Create Another Code Segment

The code segment is:

                let IDI = 0;
                function createAnother() {
                    let bol = window.confirm("Create another button for another upload ?\nClicking Cancel means you do not want to upload another file.");
                    if (bol == true) {
                        IDI = IDI + 1;
                        let ID = "p" + IDI + "";
                        document.getElementById(ID).style.display = 'block';   
                    }
                }

This code segment displays the next file upload input element and its paragraph. The code segment begins with the variable IDI, initialized to 0. This 0 refers to the ID of the first input element, which is '0'. The IDs of the rest of the input elements are '1', '2', '3', '4', '5', '6', '7', '8' and '9'. They correspond to positive integers.

After the declaration, "let IDI = 0;" is the function definition, createAnother(). This function is called by the previous function, when the attachment is successful (the file size is alright). The function displays the next un-displayed paragraph with its file upload input button, for selection to take place.

Before the next paragraph is displayed, a confirmation dialog box appears, asking the user if the next paragraph (next file upload input button) should be displayed.

Read through the code if that is not already done.

Delete Code Segment

Each paragraph has a clickable Delete button hard coded. When clicked, the following function definition is called:

                function deleteInput(idd) {
                    document.getElementById(idd).value = "";
                    let IDP = 'p' + idd;
                    if (idd != '0')
                        document.getElementById(IDP).style.display = 'none';  
                }

This function takes the ID of the file upload input element as argument. The ID of the enclosing paragraph is preceded by 'p'. For example, if the ID of the input element is '2', the ID of its paragraph is 'p2'. The function removes the attachment of the file from the file upload input button, by giving it the value, "" . If the paragraph is not the first paragraph, it is un-displayed. Read through the code if that is not already done.

Conclusion

Actually, all the 10 file upload input button elements are hard coded. A div element is the container for all the paragraph elements. Each paragraph element has one file upload input button tag (element). Only the first one is displayed. The following ones are displayed by JavaScript, when needed. Each paragraph element has one file upload input button tag (element). The first paragraph element is displayed, through its style attribute. When a paragraph element is displayed, its content file upload input element is also displayed. The rest of the paragraph elements are not displayed, through their style attributes. JavaScript will display them, one followed by the other, when necessary.

The next and last part of this series, explains how to use the complete installed program (application) and provides the download link. The complete code download is free; and all the knowledge of this ten part series is free.

Chrys