Is it possible to upload multiple files using JavaScript?

My JavaScript project can be found on GitHub.

You can check out a live demo of the project here.

The main goal for my HTML Button with id='Multiple-Files' is to enable users to upload multiple files, have them displayed in the console, and then play them one after another. If you're interested in the progress so far, you can view it here.

Apologies for including inline links, I was unaware that it could cause an issue here. The snippet might not fully demonstrate the web app, as its primary purpose is to showcase the JavaScript and HTML involved.

const videoElement = document.getElementById("drop-zone-video");
const audioElement = document.getElementById("drop-zone-audio");
const albumArtElement = document.getElementById('drop-zone-image');
const progressBar = document.querySelector(".barz-inner");
...

function updateThumbnail(dropZoneElement, file) {
    ...
}
<!DOCTYPE html>
<html lang="en">
...
        </script>
    </div>
</body>
</html>

Answer №1

Utilize the file input field with the multiple attribute.

<input type="file" id="multi-file" name="filefield" multiple="multiple">

If you prefer a button-like appearance, consider using CSS styling or hiding the file input visually and triggering its selection prompt with a button, similar to this (note: untested code snippet):

document.getElementById("multi-file-button").addEventListener('click', () => {
    document.getElementById("multi-file").click()
})

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

Guide to aligning form data with Bootstrap

Struggling to align my form data in the center below. I have attempted various online solutions without success. The use of bootstrap and offset is causing issues with the title for the form and the actual form itself. Any suggestions would be highly appre ...

Is it feasible to access a service instance within a parameter decorator in nest.js?

I am looking to replicate the functionality of Spring framework in nest.js with a similar code snippet like this: @Controller('/test') class TestController { @Get() get(@Principal() principal: Principal) { } } After spending countless ho ...

Fetch solely the metadata from HTML5 video and audio files

Before we dive in, let me address a question I have regarding video metadata loading without any additional video content. The preload = "metadata" attribute doesn't seem to be functioning as expected. My testing thus far has been limited to Win Chrom ...

Determine the number of entries in a JSON object

I am encountering an issue while trying to calculate the number of records in a JSON object, as I am getting an incorrect count. Snippet var jsonObject = {"d":"[{\"Country\":\"\",\"CountryCo ...

Creating an AJAX request using JQuery in a JSP page and sending it to a Spring controller

At the moment, I am in the process of creating two distinct Ajax JQueries to transmit data from a Google Maps JavaScript page (Latitude, Longitude, and Address of the location searched by the user) to my controller class. However, I am encountering differe ...

Step-by-step guide on redirecting to a different page following a successful POST API call using Jquery

I have the code below in my JavaScript file. $scope.addLookupAction = function () { $("#importForm").attr("action", 'xyz.com'); success:function(response) { $log.info("Redirecting to lookup home page"); ...

Animate a jumping figure using jQuery

Is it possible to create an animation of a person jumping from the bottom of the screen to the top, with the scroll bar following them? I have my doubts but would love to know if it can be done. If you want to see what I mean, check out this PDF: http:// ...

Interactive navigation with jQuery

I am currently utilizing a jQuery menu script that enhances the navigation structure on my website: (function($) { $.fn.blowfish = function() { // concealing the original ul dom tree $(this).hide(); // constructing a container from top-l ...

Is it possible for a media query to target only 2 elements instead of all 3?

Currently, I am dealing with an older website for a client, and it appears that a media query is not correctly affecting three specific classes out of the total. These problematic classes are .free-ship, .wholesale, .chronicles The CSS styling for these c ...

Tips for refreshing a D3.js bubble chart with live JSON data updates

Currently delving into d3 and experimenting with transforming a static bubble chart into a dynamic one that adjusts by removing or adding bubbles based on JSON changes. I am aiming to have the JSON file refreshed every 5 seconds to update the bubble chart ...

What is the best way to tally json elements for every parameter?

My data consists of JSON objects with "Week" and "From" properties: { "Week": 1145, "From": "IN1" }, { "Week": 1145, "From": "IN1" }, { "Week": 1145, "From": "IN2" }, { "Week": 1146, "From": "IN1" }, { "W ...

The inner division appears to have a larger bottom margin than expected

Can anyone explain why the .slot or .card classes in this code have a larger margin at the bottom compared to the top? Appreciate any help, Link to JsFiddle: http://jsfiddle.net/Tighttempo/LgeAf/ <div id="hand"> <div class="card" id="card1" ...

Exploring the font variables in the asset pipeline of Rails 7

Creating a habit of defining a set of root variables is crucial for maintaining consistency throughout an application. :root { --main-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; --kbd-font-family: Consolas, "Libe ...

Having trouble rendering to the framebuffer due to issues with the texture

In the process of incorporating shadow maps for shadows, I am attempting to render a scene to a separate framebuffer (texture). Despite my efforts, I have not been able to achieve the desired outcome. After simplifying my codebase, I am left with a set of ...

What components and substances are needed for a particle system in Three.js?

After spending a few weeks working with particle systems in Three.js, I initially used an Object3D, incorporating my own Vector3s and various materials like MeshBasicMaterials, Phong, and Lambert. However, after discovering the built-in ParticleSystem obje ...

When an item in the accordion is clicked, the modal's left side scroll bar automatically scrolls to the top. Is there a solution to prevent this behavior and

When I first load the page and click on the Sales accordion, then proceed to click on Total reported and forecasted sales, the scrollbar jumps back up to the top The marked ng-container is specifically for the UI of Total reported and forecasted sales He ...

Node.js and MongoDB Login Form Integration with Mongoose

I am relatively new to web development and currently working on a simple web page for user login authentication. My goal is to verify user credentials (username & password) on the LoginPage from a mongoose database, and if they are correct, redirect them t ...

Launch a new window for a div when a button is clicked

Hey everyone, I need some help with opening a div in a new window. Currently, I am using window.open and it is working fine. Here is the code snippet: <div id="pass">pass this to the new window</div> <a href="#" onclick="openWin()">clic ...

Disable the setTimeout() function in order to prevent the countdown from refreshing

I have a JavaScript countdown function that is working well, but I am unsure how to stop and refresh the timer to extend the time. When I call the function again before it times out, it behaves strangely by showing two countdown timers because the updateTi ...

Can you explain the significance of this error message that occurs when attempting to execute a node.js script connected to a MySQL database?

const mysql = require('mysql'); const inquirer = require('inquirer'); const connection = mysql.createConnection({ host: "localhost", port: 8889, user: "root", password: "root", database: "bamazon" }) connection.conn ...