{Multi Drag-and-drop} Enhancing the User Experience: Implementing Individual Comboboxes for Each File Prior to Up

Utilizing the dropzone tool for uploading files to my server has been quite helpful. I am able to drag and drop multiple files, sending them successfully with a post request.

For each uploaded file, I require specific information related to it. It would be beneficial to have a combobox displayed for each element before proceeding to send them over to the server.

1./ Choose a selection of files

2./ Drop them into the designated zone


3./ A div containing a combobox along with the respective file name should appear (for every file)

4./ Select the desired option (for each individual file)


5./ Transmit all files to the server within a single request (for each file)

Currently, files can only be dragged and dropped, triggering uploads upon being dropped. This results in one request per file.

I aim to include both the file itself and the combobox value in my post request.

While accustomed to resolving issues independently, I am fairly new to front-end programming and could use suggestions on improving my approach.

Any insights or ideas to assist me would be greatly appreciated.

(Front-end code for the drag-and-drop functionality)

<div class="meter">
    <span class="roller"></span> //progress bar
</div>
<input hidden id="file" name="file"/>
<div id="dropzone">
    <form action="/upload" class="dropzone" id="my-dropzone">
    </form>
</div>
<script type="text/javascript" src="dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="dropzone.min.css">

Answer №1

My understanding of dropzonejs has deepened, and I have discovered an effective method for searching.

Exploring text input addition to dropzone upload

Challenge overcome

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

Strategies for extracting methods and refactoring to a separate file for better reusability

Still relatively new to the JQuery/javascript realm, I've put together a functional jqgrid with a datepicker and custom control (using jquery auto complete) by piecing together code samples I came across online. This code has been added to a T4 templa ...

The animation for the login and registration modal is malfunctioning and not functioning as

I am currently working on implementing a login/register modal in React, inspired by a TypeScript example I came across. This is how the login section looks: https://i.sstatic.net/ECvv9.png The goal is to: When the "Sign up" button is clicked, it should ...

Toggle Form Section Visibility

I am working on a table with five rows that have upload buttons. Each time I submit a row, the page refreshes, but I want to hide all but one row at a time. When the first submit button is clicked, it should show the next row and hide the previous ones. Th ...

What is the best way to implement a dynamic sidebar component using React and Material UI?

I have been attempting to implement a responsive sidebar using React Material Design, but I am struggling to achieve the desired outcome. The main goal is for the page content to remain responsive when the sidebar is opened, without overlapping on the pag ...

View is unable to trigger the success attribute

Currently, I am delving deep into Backbone JS and facing an issue where the 'success' function in 'EditUser' is not being triggered. I would greatly appreciate it if someone could guide me on what changes I need to make in the code? B ...

Steps to create a clickable row with color change in Angular 4

How do I make an entire row clickable and change the row color when a checkbox is clicked? This is my HTML file: <section class="others"> <div class="sub-header">Others</div> <p class="text-center" *ngIf="otherTests.length === 0"> ...

What are the best practices for sharing context in express and typescript?

Implementing a solution to expose a value to all request handlers using express and typescript is my goal. I am looking for a way to easily "inject" this value from a middleware or an alternative method that allows for simple mocking if needed. Here is th ...

Scale up each image with the use of Java script

I have a main container with three different sub-containers, each containing an image and text. I want to achieve the effect of zooming in on the image of the specific sub-container when hovering over it. Currently, when I hover over any sub-container, all ...

React - updating state does not cause changes to elements rendered from variables

Currently, I am facing an issue where I have stored a component in a variable called const span = <span>{this.state.text}</span>. However, when I render this element and update the text within the state, the element fails to re-render. Below i ...

filter array based on property value

var arr = [ {'a':1,'b':2}, {'a':1,'b':3}, {'a':1,'b':0}, ] I am looking to retrieve an array where the value of property b is 2 ...

Components are not being displayed by React Router v4

Encountering an issue with React Router v4 where components are not being rendered correctly. Initially, when the application loads, the corresponding component for the URL is displayed. However, subsequent clicks on any Link do not result in the desired c ...

The feature of Access Control Request Headers involves appending certain information to the header of an AJAX request when using jQuery

Looking to enhance an AJAX POST request from jQuery with a custom header. Attempted solution: $.ajax({ type: 'POST', url: url, headers: { "My-First-Header":"first value", "My-Second-Header":"second value" } ...

Retrieving data with JQuery when encountering an XHR error

When I send a jQuery AJAX request and receive a successful response, I am able to retrieve my JSON data. However, if the response code is anything other than 200, I am unable to access the data in the jQuery callback function. This data is crucial as it co ...

Is there a way to organize a table in ReactJS based on ascending numerical values from a particular column?

I am working with a table that retrieves data from an object called blockInfo: <table> <thead> <tr> <th>Timestamp</th> <th>B ...

I encountered an error in my React project while compiling: "Module not found: Error: Can't resolve 'react-reveal'. What is this 'react-reveal' and why is it showing up in my

Issue with Module: Error: Unable to locate 'react-reveal Upon running "npm start" in my React project, I encountered this error. Despite attempting multiple solutions, the problem persists. How can I resolve this issue? Even after downloading the np ...

What sets apart a plugin from a component in ExtJS?

Can you explain the key distinction between a plugin and a component in extjs? How do you decide whether to implement and use certain behavior as a class or a plugin? ...

Transferring an array from PHP to JavaScript via an Ajax response

Welcome to my first post on stackoverflow. I usually find answers from existing posts, but this time I'm facing a problem that none of the suggested solutions have been able to fix. Currently, I have a JavaScript function that makes an AJAX request t ...

Error: The value is null and cannot be read

My external application is set up within a const called setupRemote, where it starts with the appConfig in the variable allowAppInstance. export const setupRemote = () => { if (isRemoteAvailable) { try { ... const allowAppInstance = S ...

Is there a way to incorporate page animations when utilizing the <a href> tag in HTML?

I have created several HTML files. On the main page, I simply inserted some code like this: <a href="new.html> <img src="img/button" id="buttonid"> </a> When I click the button, it takes me to the new.html page. I would like ...

What is the best way to sequentially process data column by column and incorporate them into a three-dimensional model using three.js?

Currently, I am in the process of creating a 3D model using three.js that will accurately display the position and orientation of a vehicle using accelerometer and gyroscope data. I have collected all the necessary information in an xlsx file, including th ...