How can a server retrieve a file uploaded using FormData and Ajax on a cross-domain upload?

my website is running on localhost:8084 and I need to upload a file to localhost:8086. Below is the JavaScript code:

var xhr = new XMLHttpRequest();
    xhr.open("post", "http://localshot:8086"+ "?type=ajax",true);   
    xhr.setRequestHeader("X-Requested-With","XMLHttpRequest");  
    xhr.setRequestHeader("Content-type", "multipart/form-data;");  
    // Simulated data  
    var fd = new FormData();  
    fd.append("upfile", f);  //f represents a File object
    fd.append("result","tskdskfjsf");  
    xhr.send(fd);  
    xhr.addEventListener('load', function(e) {
                                    var r = e.target.response, json;
                                    me.uploadComplete(r);
                                    if (i == fileList.length - 1) {
                                        $(img).remove()
                                    }
                                });  

The server-side code (Java) is as follows:

    System.out.print(getPara("result"));  
    UploadFile uf = getFile("upfile", path.getAbsolutePath() + "/");

My problems are:

  1. I am not receiving any data in the console.
  2. When executing the statement
    getFile("upfile",path.getAbsolutePath() + "/")
    , it throws an exception
    "java.io.IOException: Posted content type isn't multipart/form-data"
    .

The method getFile is part of a third-party framework:

public UploadFile getFile(String parameterName, String saveDirectory) {
    getFiles(saveDirectory);
    return getFile(parameterName);
}  

public List<UploadFile> getFiles(String saveDirectory) {
    if (multipartRequest == null) {
        multipartRequest = new MultipartRequest(request, saveDirectory);
        request = multipartRequest;
    }
    return multipartRequest.getFiles();
}

Your assistance would be greatly appreciated. Thank you!

Answer №1

To simplify the process, consider incorporating Apache File Upload Utils library. In order to address cross domain policy issues, you may need to implement server side policies or utilize a proxy server such as nginx.

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 location of the CHROMEDRIVER for Node.js with Selenium

After trying "npm install selenium-webdriver", I am still encountering the error message below. Can anyone provide guidance on where the path is supposed to be located? Error: The ChromeDriver could not be found on the current PATH. Please download the ...

react-datepicker displaying error message "Preventing default action not possible within a passive event listener invocation"

I've integrated the react-datepicker library in portal mode. While it functions well on browsers, I encounter an error when using mobile browser mode. An issue arises stating: "Unable to preventDefault inside passive event listener invocation" Des ...

Ways to transfer information among Angular's services and components?

Exploring the Real-Time Binding of Data Between Services and Components. Consider the scenario where isAuthenticated is a public variable within an Authentication service affecting a component's view. How can one subscribe to the changes in the isAut ...

Methods for concealing the title and date when printing web content using JavaScript

When utilizing the window.print method to print out a specific screen, I encountered an issue. I need to hide the date in the top left corner of the image as well as the title (not the big heading) which has been intentionally blurred. I've come acro ...

Sending an array or list of files from AJAX to the Controller

I have a task to upload multiple files and pass them to my Controller's Action. The current code is functional, but I feel there could be room for improvement as it's somewhat manual. I need to display file upload elements based on the number of ...

Update the labelClass of markers when hovering over them with jQuery on Google Maps

After successfully incorporating the markerwithlabel.js file, I am now able to display markers with labels on my Google map using the following code: markerArray[i] = new MarkerWithLabel({ position: myLatLng, map: map, icon: image, lab ...

React Native error: encountering the error message "undefined is not an object '_this3.props.navigation()'"

I am encountering an error in the navigationOptions() function when running my React app, but everything is working correctly in the render() function. App.js import React, { Component } from 'react'; import { AppRegistry, View } from 'r ...

Issue with jQuery's .height() method not updating

Here is the code I am working with: $(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto'); }); }); I am trying to change the height of a div when a link is clicked. After adding an alert ...

What is the best way to display a child component inside an iframe using Vue.js?

Looking to provide a live preview of an email before sending it out, I've opted to use an iframe to contain the preview and prevent style leaks. The goal is for the preview to update dynamically as the user fills out form details. How can I display a ...

Using Ajax script to transfer user information to a php file in order to refresh the modified row in a table

Recently, I created a table in PHP to display certain data. Here's how it looks: <?php echo '<table id="tableteste" class="table table-striped" width="100%">'; echo '<thead><tr>'; echo &apos ...

Effortlessly apply mapping, filtering, reducing, and more in JavaScript

Array#map and Array#filter both create a new array, effectively iterating over the original array each time. In languages like rust, python, java, c#, etc., such expression chains only iterate once, making them more efficient in certain cases. While this ...

Guide to creating "bidirectional data binding" in Vue

I have a child component that is responsible for uploading a photo. The uploaded photo is assigned to the child component's data called "photo". I need to connect the parent data called "file" with the child data called "photo". And whenever "photo" i ...

Node.js command-line interface for chat application

Can someone help me figure out the best method for creating a command line interface chat app using nodejs? I'm considering using http and possibly phantomjs to display it in the terminal, but I have a feeling there's a more efficient approach. A ...

What are some techniques for modifying the output of getScanResults()?

Currently, I am in the process of learning how to develop Android applications and have been exploring ways to discover all network spots in my vicinity. I recently downloaded a code snippet in order to gain a better understanding of how the process functi ...

What steps can I take to direct mobile visitors to the mobile-friendly version of my website?

Looking for a way to automatically redirect users on mobile devices from www.domain.com to the new mobile version at m.domain.com? ...

How to Generate HTML Reports Using JBoss?

Is there a convenient and efficient way to generate .html reports for JBoss applications that is not time-consuming? I have a database containing entities that I need to display in multiple tables. The report should include links to navigate between secti ...

What is the best way to extract plain text with JQuery?

I found this Html code snippet: <div class="form-group row"> <label id="lb_size" class="col-lg-3 col-form-label"> <span class="must-have">****</span> Size </label> </div> My goal is to ext ...

The OpenWeatherMap API is displaying 'undefined' as a response

I've been encountering some issues with my weather app project due to lack of clarity in my previous questions. To be more specific, every time I attempt to retrieve weather information in JSON format using the fetch method, it keeps returning undefin ...

What steps do I need to take to incorporate the Google API into my Chrome extension's content script

I am currently attempting to display labels using the Gmail API within a content script. Below are snippets from my manifest.json and content-script.js files: { "name": "Append Test Text", "description": "Add test123 to body", "version": "1.0", "p ...

Unlocking the power of Google Feed API to incorporate MIXED FORMAT in AngularJS

Currently, I am utilizing Google's Feed API in conjunction with AngularJS to retrieve my feed data in a mixed format of both JSON and XML. Although I have attempted to modify the method and callback tags to MIXED_FORMAT as per Google's documentat ...