Is it possible to use XMLHttpRequest to send a multipart file to a servlet?
I am currently working on a form that needs to be submitted as multipart, but I am not receiving a response after successfully uploading it. It is important that the process happens via Ajax without refreshing the page.
To achieve this functionality, you will need to utilize the XHR FormData API. This API was previously known as part of "XHR2" or "XHR Level 2", and is currently referred to as "XHR Advanced Features."
If you have the following HTML,
<input type="file" id="myFileField" name="myFile" />
You can upload it using the code snippet below:
var formData = new FormData();
formData.append("myFile", document.getElementById("myFileField").files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "myServletUrl");
xhr.send(formData);
The XHR will handle the appropriate headers, request body encoding, and the file will be available on the server side as a form-data part with the name myFile.
It's important to note that the FormData API is not supported in older browsers. You can check browser compatibility on caniuse.com, where it shows implementation in Chrome 7+, Firefox 3.5+, Safari 5+, Internet Explorer 10+, and Opera 12+.
If you are using jQuery, avoid using the $.val() function as it only returns the file name as a String, which does not contain the file contents. Instead, use one of the alternatives provided.
Sending data using multipart/form-data through XMLHttpRequest may not be possible, except for in modern browsers that support XHR2. For more information on this, check out this helpful answer.
If you're looking to achieve similar functionality, consider using a traditional form within an iframe. This method allows for seamless uploads without refreshing the entire page.
Currently, I have a POST route that triggers a function: router.route('/generateSeed').post(function(req,res){ generate_seed(res) }); UPDATE: Here is the genrate_seed() function function generate_seed(res) { var new_seed = lightwallet. ...
Explore <script type="text/javascript"> $(document).ready(function () { $("#viewDetails").click(function () { $.ajax( { type: "POST", url: '@Url.Action("GetDetail", "ControllerName")' ...
I am attempting to achieve the functionality of automatically scrolling to the bottom of a div with the ID #chat-feed. The overflow for this div is set to auto, and I want it to remain at the bottom unless a user manually scrolls up. If they do scroll up, ...
I'm currently tackling a project involving a push menu. When the content div slides over, the menu buttons come in with a slight animation as they appear on the screen. However, if the user rapidly opens and closes the menu multiple times, the items o ...
Currently, I am utilizing a lamp set up for my project. Specifically, I have a PHP page that includes a "send message to all" button implemented with Ajax functionality. Upon clicking this button, it triggers a function on the backend which sends a message ...
I have developed a unique custom directive which is defined as: <div class="col-md-6"> {{templateMapping[colProp].SheetPointer}} <select class="form-control" ng-model="selectedColumn" ng-change="changeMapping()" ng ...
Can someone please explain to me the difference between using session["user"].name and session["user:name"]? // I don't understand why we have to put the user session into the JavaScript global space :( var session = { user: { "Id":"d675c ...
I am in the process of developing a todo list application using next.js. The issue I am facing is that when I input data into the field, it correctly displays in the console. However, upon clicking the button, instead of the input displaying like a norma ...
I've encountered an issue that I'm struggling to find a solution for. My goal is to implement an event delegate using pointermove on a parent container, and I need to be able to detect when the event transitions between a child element and the pa ...
I am brand new to HTML and JQuery, and I'm struggling with setting a class for my select element when the currently selected option has an ID of "answer". This is crucial for checking the correctness of a multiple choice question. If achieving this i ...
I'm looking to create a series of drop-down lists based on the JSON array provided below. There will be five drop-down lists, and when I select an option in one list, the other four should populate accordingly. For example, if I choose "Hindi" in the ...
I've been attempting to implement a standard Twitter search widget directly from the Twitter website: <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'search' ...
Can I load the div values automatically when the page loads along with after a time interval? How can I achieve this? <script type="text/javascript> $(document).ready(function() { setInterval(function(){ $("#Te ...
I am currently working on creating a zip file that contains a CSV file and returning it as a buffer from a function. Below is the code snippet I have implemented: const archiver = require('archiver'); const streamBuffers = require("stream-bu ...
Here is the snippet of code I am working with: $scope.addToOrder = function(index) { var tempItem = $scope.item; if (tempItem[index].validate == true){ if (_.isEmpty($scope.item2) == true) { $scope.item2.push ...
I am trying to create an element that changes its size while spinning when a button is clicked. It seems to be working fine on hover, but not onclick. Here is the code I have: <div class="rec">Rec</div> <button id="button&quo ...
Question: Dynamically creating keys in javascript associative array Typically, we initialize an array like this: var ar = ['Hello', 'World']; To access its values, we use: alert(ar[0]); // Hello However, I am looking to assign ...
//using Input HOOK I am curious to understand how this custom hook operates. import { useState } from "react"; export default initialValue => { const [value, setValue] = useState(initialValue); return { value, onChange: event =&g ...
Header for Product Data: headers: [ { text: "Product Name", value: "name" }, { text: "Quantity", value: "quantity" }, { text: "Price", value: "price" }, { text: "Orders", value: &quo ...
I've been facing a challenge trying to synchronize my POST requests to an endpoint using Angular. While I found some examples of synchronized GET requests, applying the same concept to POST requests has proven to be quite tricky. From my perspective ...