Is there a way to upload web page (js) files without submitting a form using a servlet?

I am trying to develop a webpage that enables users to upload one or more files to a servlet without the need for a form submission.

I am open to utilizing jQuery and/or Ajax for this purpose and prefer not to rely on any other third-party libraries.

I currently have a servlet that functions with a form submission and I am willing to make necessary adjustments to make it work without the form submission:

package ajaxdemo;

    // Java code for file upload Servlet

The code above functions with a specific input form which I'm looking to adapt for use without the form submission:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
    <!-- HTML code for file upload form -->

In my attempt to make it work without form submission, I've created the following page:

<html>
    <!-- HTML code for file upload popup dialog -->

During testing, I encountered an error message from the server (shown in the eclipse console) stating that no multipart boundary was found.

If I remove the JavaScript line setting the request header, the error message changes to indicate that filePart is null, preventing the invocation of getSubmittedFileName().

I explored an alternative method using await fetch(...) instead of xmlRequest.send(...), but encountered difficulty in getting it to function correctly.

Ultimately, I aim to enable users to upload multiple files and receive a JSON structure in return for displaying a table. However, I am currently focused on resolving the issue with the initial file upload.

javascriptajaxservletsfile-upload

Answer №1

xmlRequest.setRequestHeader("Content-type", "multipart/form-data");

The necessity of specifying the boundary in the multipart/form-data type is crucial as it serves as a separator between different parts.

In usual cases, when using xhr or fetch, the entire Content-Type header, including the essential boundary parameter derived from the FormData object, is automatically generated.

In this scenario, overriding the Content-type and opting for multipart/form-data without specifying a boundary is not recommended.

It is advised to avoid such actions.

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

The Outer Div Can't Contain Google Maps

I am currently working on integrating a map widget into a dashboard I created using gridstack.js. The sample widget layout that I am aiming for can be seen in the link below: https://i.sstatic.net/ZQP6G.png My goal is to embed the map within the inner (w ...

javascripthtmlcssgoogle-mapsgridstack

Executing a function upon loading a page triggered by a submitted form

Recently on my index.php page, I implemented a form that posts data into a third-party newsletter system. After the form submission, the page reloads to index.php?mail&. Is there a way to detect when the page is loaded and determine if the form has bee ...

javascriptjqueryhtmlformspost

What is the method for accessing appendTo() in the Document Object Model (

I added a duplicated element $canvas to the body in the DOM with this piece of code $('.' + $canvas).clone().appendTo('body'); Now, I want to be able to use it like this $('ul,.map').mousemove(function (e) { $(& ...

javascriptjquerydom

Conditional return type mistakes

I'm facing an issue with a function that takes a parameter "value" and is supposed to return 0 or 1 based on its true or false value. Check it out here. const f = <T extends boolean>(value: T): false extends T ? 0 : 1 => { if (value === ...

javascripttypescripttypescript-generics

Dealing with AngularJS: Issue arises when attempting to inject $modal into a controller nested within a directive

Our team has implemented a custom directive that wraps around a checkbox and utilizes transclusion to inject content into it. Here is an example of the setup: somecheckbox.js angular.module('namespace.directives') .directive('someCheckbox& ...

javascriptangularjstwitter-bootstrapcheckbox

Obtain the chosen option from an HTML select element by utilizing JavaScript

This is my HTML snippet: <div id="detail"> <div class="d_left"> Page <strong>1</strong> of 107 </div> <div class="d_center"> <table> <tr> <td><a href="#">Previous&l ...

javascripthtml

The clarity of an HTML input field is still unclear despite attempting to clear it using the clear()

When I created a form in HTML using PHP, AJAX, JavaScript, and jQuery, I encountered an issue where after entering data and updating it in the database, the input fields were not being cleared. I tried using clear() in JavaScript but it didn't work. C ...

javascriptjqueryhtml

Vertical scroll bar positioned on the left side of a DIV

Can a vertical scroll bar be placed on the left side of a DIV using CSS? What about JavaScript? ...

javascripthtmlcss

How to add a service to a static function in Angular

After incorporating a logger service into my project, I have encountered an issue with using it in NGXS static selectors. The selectors in NGXS are static methods, which prevent me from accessing the logger service injected via Angular DI. Are there any e ...

javascriptangulartypescriptngxs

Learn the method for automatically checking a checkbox when a page is loaded in Angular

I have multiple checkboxes on a single page <div class="check-outer"> <label>Place of operation</label> <div class="checkDiv"> <div ng-repeat="place in places"> <div class="checkbox-wrapper"> ...

javascriptangularjs

What is the best way to display a string state value in a React component?

I need assistance with displaying a state value that is in string format. Despite my efforts, I have not been successful in finding a solution and am feeling quite frustrated. Can anyone provide some guidance? ...

javascriptreactjsreduxreact-redux

Retrieve Textures From an Assortment

Greetings to all the readers here! I am in the process of developing a website where I want to implement a feature that allows me to scroll through "cards" arranged in a single line, visible from an isometric side view. I have managed to set up the scene ...

javascriptcollectionsthree.jstextures

`Is there a way to dynamically update a nested field object in Mongoose without updating the entire object?`

const userProfile = new Schema({ name: { type: String, default: null }, contacts: { mobileNumber: { countryCode: { type: String, default: null }, digits: { type: String, default: null } }, email: { type: String, default: null }, facebook: { ...

javascriptnode.jsmongodbmongoose

The Express/Mongoose route consistently modifies the identical item

I'm encountering an issue where any attempt to update or create a new item results in only creating one item and then updating that same item regardless of the input. Is there something incorrect with this route? // @route POST api/item // @desc ...

javascriptnode.jsexpressmongoose

During the serialization process of a System.Reflection object, a circular reference was identified

One of my asp.net MVC 3 controller action methods looks like this: public JsonResult GetRecordingRates(int Id) { List<DefaultRateChart> defaultRateCharts = new List<DefaultRateChart>(); using (IDefaultRateChartManager defau ...

asp.netajaxjsonasp.net-mvc-3jquery

When the button is clicked, redirect to a new page and submit a form using AJAX with data obtained from the click event

I have a page called 2.html where inputting an ID number results in some output being displayed. This functionality is achieved using Ajax post method, sending data along with the data parameter. I also have another page named 1.html that contains a list o ...

javascriptjqueryhtmlajaxflask

Angular: Where does the problem lie - with the application or the deployment?

Currently, I am in the process of creating my own personal website using Angular(v4+). I understand that Angular may seem like a complex framework for a simple website, but I am using it because I am eager to improve my skills with it. During development, ...

javascriptangularazureangular-cli

Display the list items when the page first loads

I currently have this code snippet: <nav> <ul class="sel"> <li> <a href="#LINK1" data-title="A">A</a> </li> <li> <a href ...

javascriptjqueryhtmlcss

Regularly switch up the background image using the same URL

I am currently developing an angular JS application where the background of my body needs to change every minute based on the image stored on my server. In my HTML file, I am using ng-style to dynamically set the background image: <body ng-controller= ...

javascripthtmlangularjsbackground-imageng-style

Off Canvas left navigation menu using Bootstrap

I am working on creating a responsive layout for a webpage using Bootstrap. On larger displays, such as desktop resolutions, I want the webpage to show the header and left navigation as normal. However, when the site is resized to that of tablets or mobile ...

javascriptjqueryhtmltwitter-bootstrap-3