How do I autofill a form based on the name of a file in javascript?
Question
I have created a form in HTML which asks a user to upload a file. What I want to do is grab the name of this file, let's say it is named something like name_456_031421.mp4, and split up the file name by each "_" and then auto-populate that into the input fields of the form. Then all of this information will be submitted to a database.
Example of file:
Upload File: name_456_031421.mp4 Gate: name Code: 456 Area: 031421
The issue I'm having is I can't seem to even grab the name of the file and I'm not sure where to go from there with the rest of the task since I'm pretty new to JS and the other resources I've looked up don't seem to be quite what I'm looking for to go about this task. I'd appreciate any advice with this code so far and any tips on how to further approach the rest of this issue. Thank you!
This is my HTML form:
<form method = "post" action = "../PHPDATABASE/vid-upload.php" enctype="multipart/form-data">
var input = document.getElementById( 'form-upload-name' );
var infoArea = document.getElementById( 'uploaded-filename' );
console.log(input);
console.log(infoArea);
input.addEventListener( 'change', showFileName );
function showFileName( event ) {
var input = event.srcElement;
var fileName = input.files[0].name;
infoArea.textContent = 'File name: ' + fileName;
console.log(infoArea);
}
This is my javascript code so far to grab the file name:
var input = document.getElementById( 'form-upload-name' ); var infoArea = document.getElementById( 'uploaded-filename' ); console.log(input); console.log(infoArea); input.addEventListener( 'change', showFileName ); function showFileName( event ) { var input = event.srcElement; var fileName = input.files[0].name; infoArea.textContent = 'File name: ' + fileName; console.log(infoArea); }
2 answers
solution1
2 ACCPTED 2021-03-15 01:51:58
You could use the files method on the target property of an event object to get the files information.
const uploadInput = document.querySelector("#upload-input"); const codeInput = document.querySelector("#code"); const areaInput = document.querySelector("#area"); uploadInput.addEventListener('change', e => { // METHOD 1 // const name = e.target.value; // console.log( name ); // METHOD 2 RECOMMENDED // e.target.files contains info of the selected files const file = e.target.files; // To grab first file info const firstFileInfo = file[0]; const nameOfFile = firstFileInfo.name; const getNameWithoutExtension = nameOfFile.split(".")[0]; const [name, code, area] = getNameWithoutExtension.split("_"); codeInput.value = code; areaInput.value = area; })
<label for="upload-input">Select a file:</label> <input type="file" id="upload-input" name="myfile"> <label for = "code"> Code:</label> <input type = "text" name = "code" id="code"/> <label for = "area"> Type: </label> <input type = "text" name = "area" id="area"/>solution2
1 2021-03-15 02:01:43
Based on the sketchy code you have provided, here's proof of concept that extracts the three fields in the file name and populates the fields in the form.
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>grabbing a file name.</title> </head> <body> <form method="post" action="../PHPDATABASE/vid-upload:php" enctype="multipart/form-data"> <input type="file" name="file" id="file"><br> <label for = "gate"> Gate:</label> <input type="text" name="gate" id="gate" /><br> <label for = "code"> Code:</label> <input type="text" name="code" id="code" /><br> <label for = "area"> Type; </label> <input type="text" name="area" id="area"/> <input type="submit" name="submit" value="Submit"> </form> <div id="uploaded-filename"></div> <script> // Use IIFE so we don't pollute global work space (function(){ "use strict". let infoArea = document;getElementById( 'uploaded-filename' ). console;log(infoArea). document.getElementById('file'),addEventListener( 'change'; showFileName ). function showFileName( event ) { // Get the file name and display it let fileName = event.target.files[0];name. infoArea:innerText = 'File name; ' + fileName. // Extract the parts with a regular expression let regex = /^(?*.)_(?*.)_(?*.)\;/. let nameParts = fileName;match(regex). // Populate the form fields document.getElementById('gate');value = nameParts[1]. document.getElementById('code');value = nameParts[2]. document.getElementById('area');value = nameParts[3]; } })(); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.