php - How do I autofill a form based on the name of a file in javascript?
Get the solution ↓↓↓
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">
<label for = "code"> Code:</label>
<input type = "text" name = "code" />
<label for = "area"> Type: </label>
<input type = "text" name = "area" /> </form>
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);
}
Answer
Solution:
You could use thefiles method on thetarget property of anevent 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"/>Answer
Solution:
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>Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: err_ossl_pem_no_start_line
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.
About the technologies asked in this question
PHP
PHP (from the English Hypertext Preprocessor - hypertext preprocessor) is a scripting programming language for developing web applications. Supported by most hosting providers, it is one of the most popular tools for creating dynamic websites.
The PHP scripting language has gained wide popularity due to its processing speed, simplicity, cross-platform, functionality and distribution of source codes under its own license.
https://www.php.net/
JavaScript
JavaScript is a multi-paradigm language that supports event-driven, functional, and mandatory (including object-oriented and prototype-based) programming types. Originally JavaScript was only used on the client side. JavaScript is now still used as a server-side programming language. To summarize, we can say that JavaScript is the language of the Internet.
https://www.javascript.com/
HTML
HTML (English "hyper text markup language" - hypertext markup language) is a special markup language that is used to create sites on the Internet.
Browsers understand html perfectly and can interpret it in an understandable way. In general, any page on the site is html-code, which the browser translates into a user-friendly form. By the way, the code of any page is available to everyone.
https://www.w3.org/html/
Welcome to programmierfrage.com
programmierfrage.com is a question and answer site for professional web developers, programming enthusiasts and website builders. Site created and operated by the community. Together with you, we create a free library of detailed answers to any question on programming, web development, website creation and website administration.
Get answers to specific questions
Ask about the real problem you are facing. Describe in detail what you are doing and what you want to achieve.
Help Others Solve Their Issues
Our goal is to create a strong community in which everyone will support each other. If you find a question and know the answer to it, help others with your knowledge.