Personalize the File upload with HTML and Javascript

https://jsfiddle.net/yugxqopz/

I'm new to the world of UI and have a simple request:

1) I want to upload a document using an "attach file" option
2) Once the file is selected, I want to automatically trigger a specific JavaScript function as shown below:

<form id="fileUploadForm" onsubmit="return uploadToTempFolder();" enctype="multipart/form-data">
    <input type="file" name="file" id="file" accept="application/pdf">
    <input type="submit" class="button-blue" value="Upload">
</form> 

Instead of having a separate button for uploading, I would like to replace the "choose file" option with "attach file". When the user selects the file, I want the 'uploadToTempFolder' function to be triggered automatically.

Any assistance would be greatly appreciated.

Thanks,
Harry

Answer №1

To trigger a function on change, simply add an onchange event.

<form id="fileUploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="file" accept="application/pdf" onchange="uploadToTempFolder()">
</form> 

Unfortunately, the default text of file input cannot be changed directly, but there is a workaround available.

Check out this working example

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Padding issue with Dropotron plugin not functioning properly

I'm struggling to reduce the right space on my drop-down menus. Here's what I've tried: .dropotron li { box-shadow: inset 0 1px 0 0 #e6e6e6; padding-right: 0 !important; } Unfortunately, it didn't work ...

retrieving a map containing the values from an array using the `.includes()`

Currently, I am attempting to map my routes based on the roles they possess. For example, my mapped routes may have roles like ["User", "Admin"] or just ["Admin"]. The current user can have one or multiple roles assigned to them. This particular function w ...

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

The particular division is failing to display in its designated location

This is quite an interesting predicament I am facing! Currently, I am in the process of coding a website and incorporating the three.js flocking birds animation on a specific div labeled 'canvas-div'. My intention is to have this animation displa ...

Both JOINs are being performed on the identical table

Currently, I am working on a website that displays soccer scores with two teams and two scores stored in my database. Below is the code I am using: <?php $result = mysql_query( "SELECT * FROM resultat LEFT JOIN brukere ON resultat.do ...

How to download a file using AJAX in Laravel?

Is there a way to download a CSV file within an ajax call? I have an ajax request in my Laravel controller that successfully retrieves the file contents in the response. However, I am facing issues with actually downloading the file. Laravel controller c ...

Tips for displaying dynamic data using innerHTML

Recently, I set out to implement an infinite scroll feature in Angular 2 using JavaScript code (even though it may seem a bit unusual to use JavaScript for this purpose, it's actually working perfectly). Initially, I was able to create an infinitely s ...

What could be preventing this src tag from loading the image?

Here is the file structure of my react project Within navbar.js, I am encountering an issue where the brand image fails to load from the Assets/images directory. import '../../Assets/Css/Navbar.css'; import image from '../../Assets/Images/a ...

Any tips on how to properly display a div along with script tags in React?

The React application has received a visualization code, and I utilized the unescape function to extract HTML codes from a string. The string contains a div tag with an ID related to the visualization and a script tag containing JavaScript code that genera ...

Diverse Browser Image Mapping Coordinates

I am in the process of creating an image map, where I specify coordinates on an image that link to other pages. However, I'm encountering an issue where the position of these coordinates is not relative. When viewing the image on a different browser ...

Issue with IE failing to load a particular Stylesheet

Have you had a chance to view this live demonstration? My website has two different stylesheets, one specifically for Internet Explorer and another for regular browsers. Here's how they are set up in the header: <link rel="stylesheet" type="text/c ...

Issues have been reported regarding the paramMap item consistently returning null when working with Angular 8 routing

I am encountering an issue with Angular 8 where I am trying to fetch some parameters or data from the route but consistently getting empty values. The component resides within a lazy-loaded module called 'message'. app-routing.module.ts: ... { ...

Safari experiencing a problem with the CSS mix-blend-mode: difference

I have been experimenting with a mouseover effect using mix-blend-mode. The effect is functioning as desired in Chrome and Firefox. .btn-anim { position: relative; display: inline-block; overflow: hidden; padding: 1.25rem; color: #fff; --x: 6 ...

Tips for effectively redirecting multiple links on a website

Can anyone advise me on how to redirect certain HTML pages to corresponding PHP pages? For instance, if a user lands on www.example.com/sample.html from another website, I want them to automatically be redirected to www.example.com/sample.php without seei ...

I'm trying to figure out how to incorporate types for utilizing Intl.ListFormat in node v12. Can

I am currently working with nodeJS version 12.10.0, which now includes support for Intl.ListFormat. I am also using Typescript version 3.6.3. However, when compiling my code with Typescript, I encounter the following error: Property 'ListFormat' ...

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

What is the best way to include multiple <p> elements in a row using Bootstrap?

What is the best way to display multiple <p> elements inline using Bootstrap? This is the code I have currently: <div className="container d-inline-flex"> <p className="text-nowrap"> This is sent ...

What is the significance of `(<typeof className>this.constructor)` in TypeScript?

After inspecting the source code of jQTree, written in Typescript, available at https://github.com/mbraak/jqTree, I came across the following snippet: export default class SimpleWidget{ protected static defaults = {}; ...

Modify the rows in an HTML table in a Django project to have matching cell values displayed in the same color

I have set up a table in my HTML file for a Django project, with raw data extracted from the provided list sample below (only showing a few lines due to length): mylist= [{'StartDate': '2021-10-02', 'ID': 11773, 'Receiver ...

Express.js: Communicating with internal microservices

I'm still learning about node.js, express.js and REST APIs. Here's the situation I'm facing: I have a requirement to retrieve user information from my database (using mongoDB) in various scenarios. What would be the recommended approach i ...