How to upload image, Find file size and find name of file in JavaScript

Create a program that shows how to upload images in Javascript and the next program is to find the size of the file and another is to find the file name using the javascript. Let’s create simple web pages to design and perform the upload image and find the size and find name using HTML, CSS, JS.

How to upload Image in JavaScript

In this task, we have to upload an image and display the image using the javascript function. For that create an HTML file and use JS functions that display the output.

Solution

Create an HTML file
Create input type file and take id as a file. Now, onchange function filevalidation() will be called on the uploaded image.
Inside function filevalidation() to select the element by its ids we use document .getElementById() method in program we use var image = document.getElementById(‘output’);
Use URL.createObjectURL() on the file to pass the URL to image. src that loads the provided image on the browser image.src = URL.createObjectURL(event.target.files[0]);
To check if any file is selected use if (fi.files.length > 0) loop
To get size of the file use const fsize = fi.files.item(i).size;
The value we will get in bytes. Now, to convert it into any unit we will be using Math. round((fsize / 1024)

JS code to upload the image and display

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="file" id="file" onchange="FileValidation(event)" >
   Uploaded Image<img id="output">
</body>
<script>
    FileValidation = (event) => {
        var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
        const fi = document.getElementById("file");
        if (fi.files.length > 0) {
            for (const i = 0; i <= fi.files.length - 1; i++) {
                const fsize = fi.files.item(i).size;

                const file = Math.round((fsize / 1024));
}
}

}
</script>
</body>
</html>

Output

In this way, we learn how to upload images in JS.

Find Image/File name in JavaScript

In this task, we have to find the size of the file using JS functions. For that create an HTML file and use js functions that display output.

Solution

Create HTML file
Take input type file <input type=”file” id=”file” onchange=”fileInfo()”/>
In fileInfo() to get the file name in JS use var fileName = document.getElementById(‘file’).files[0].name;
Print the output use document.write(“File name is -“+ file_info);

JS code to find the name of a file

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Find file name</title>
</head>
<body style="text-align: center;">
<input type="file" id="file" onchange="fileInfo()"/>
<script type="text/javascript">
function fileInfo(){
    var fileName = document.getElementById('file').files[0].name;
    var file_info = fileName;
    document.write("File name is -"+ file_info);
}
</script>
</body>
</html>

Output

Upload file above,

In this way, we will learn how to find the name of the file using js.

Find Image size in JavaScript

In this task, we have to find the file size using js functions, For that create an HTML file and use the js function that displays the output.

Solution

Create HTML file
Take input type file <input type=”file” id=”file” onchange=”fileInfo()”/>
In fileInfo() to get the file size in JS use var fileSize = document.getElementById(‘file’).files[0].size;
Print the output use document.write(“File size is -“+ file_info);

JS code to find the size of a file

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Find file size</title>
</head>
<body style="text-align: center;">
<input type="file" id="file" onchange="fileInfo()"/>
<script type="text/javascript">
function fileInfo(){
    
    var fileSize = document.getElementById('file').files[0].size;
    var file_info = fileSize;

    document.write("File size is -"+ file_info);
}
</script>
</body>
</html>

Output

Upload file above ,

In this way, we will learn how to find the size of files using JS.