Tips for passing multiple file values in an XMLHTTP POST request

Currently, I am utilizing FileReader() in order to access file values. Is there a method to initiate an Http post request for posting multiple file values as input?

var fi = document.getElementById('myFile');

    if (fi.files.length > 0) {
        for (var i = 0; i < fi.files.length; i++) {
            var reader = new FileReader();

            reader.readAsDataURL(fi.files[i]);
            var f = fi.files[i];
                    file_input = reader.result.split("base64,").pop();
                    var attachment_type = fi.files[i].type;
                    var filename = fi.files[i].name;
                }
            }

Performing the HTTP request

var data = JSON.stringify(
        {
            "firstname": First,
            "lastname": Last,
            "file": [
                {
                    "input_file": file_input,
                    "attachment_type": attachment_type,
                    "file_name": filename
                }     ]   }  );

    var url = "";
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true)
    xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');  
    xhr.send(data);

Answer №1

To process the files efficiently, you can pass arrays containing input_file, attachment_type, and file_name and then access them using their respective indices.

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

Ways to align and fix a button within a specific div element

How can I make the button with position: fixed property only visible inside the second div and not remain fixed when scrolling to the first or last div? .one{ height:600px; width: 100%; background-color: re ...

Is it possible to minify HTML in PHP without parsing JavaScript and CSS code?

After finding a solution in this discussion, I successfully managed to 'minify' HTML content. function process_content($buffer) { $search = array( '/\>[^\S ]+/s', // eliminate spaces after tags, except for ...

Copying text from an iframe using HTML and JavaScript

As someone who is relatively new to web development, I am currently attempting to transfer text from an iframe to a textarea located on a Bootstrap-html webpage. You can view an example of the code I am working with here: https://jsfiddle.net/fe5ahoyw/ J ...

Leveraging strings as URLs to embed PDFs in Wordpress using PDF Embedder

I'm encountering an issue related to a Wordpress plugin called PDF Embedder, as well as concatenating/using a string with document.write. My goal is to make this code work: <script src="http://nooze.org/wp-content/uploads/scripts/dateGetter.js"> ...

The Mapbox map fails to display properly upon initial page load

When my Mapbox map loads, I am experiencing issues with it only rendering partially. It seems that adjusting the width of the browser or inspecting the page will cause the map to snap into place and display correctly. To demonstrate this problem, I created ...

Getting the inner element of a particular child from the parent div using selenium with javascript

<div class="A"> <svg> ... </svg> <button> <svg> ... </svg> </button> <svg> ... </svg> </div> <div class="A"> <svg> ... </svg> <button> ...

Tips for reading or parsing JSON files stored in external storage on an Android application

I have successfully implemented JSON parsing from a server (url), but I am facing difficulty in parsing JSON from the sdcard (/Download/example.json). Can someone provide assistance in resolving this issue or suggest changes to the code? I utilized AsyncT ...

Methods for determining the disparity in days between two dates and the ratio of days yet to come

Within my React project, I am in need of a functionality that calculates the number of days remaining between two specific dates. Essentially, I want to determine how many days are left from today until the expiration date, and then calculate the percentag ...

Teaching sessions along with the implementation of functions

I've created a set of input fields with the class replaceInput. The idea is to have a simple function that clears the value when the user focuses on the field, and then returns it to 'X' if the field is empty on focus out. My query is, coul ...

Error occurs while attempting to access document.getElementById

I've been trying to make the following code display the word "Test", but all I'm getting is a message saying "TypeError: document.getElementById(...)". I can't seem to figure out what's wrong: <html> <head> <meta h ...

Display every div element if none of the links have been clicked

On my webpage at url.com/yourfirstpage/, all div elements are hidden by default with a display:none property. If we specifically target #sec1 by going to url.com/yourfirstpage/#sec1, only sec1 is displayed while the others remain hidden. But what if we acc ...

Is there a way to efficiently navigate a local JSON file using React JS?

What is the best way to extract data from a JSON file and utilize it within my code? I attempted importing the file and logging it in the console, but all I get is Object {}: import jsonData from "./file.json"; console.log(jsonData); This is the content ...

Can you recommend a third-party service that is compatible with both iOS4 and iOS5?

Is it possible to create a web-service based application using a third-party JSON library that can be compatible with both iOS5 and iOS4? It should be able to run on both versions as iOS5 does not support third party JSON libraries, while iOS4 does not sup ...

waiting to display information until it is necessary

I am currently working on optimizing my website for improved loading speed and responsiveness. Users can scroll through up to 4k images, apply filters, and sort them based on their preferences. Below is the code snippet for my filtering function: function ...

A method for displaying monthly data in a single row

Hey there! I'm currently dealing with a data list stored in an array. The |arraycontains various objects` each with their own properties such as name, created-at, and more. My goal is to display all users who were created within a specific month in on ...

Why is my Bootstrap Carousel Switching Images but Refusing to Slide?

I've encountered a problem with my bootstrap carousel. The slide effect doesn't seem to be working, even though I have added the "slide" CSS tag. Instead of sliding, the images just quickly change without any transition. Here are some key points ...

Ways to disperse items within another item

I have an inner object nested inside another object, and I am looking to extract the values from the inner object for easier access using its id. My Object Resolver [ { _id: { _id: '123456789', totaloutcome: 'DONE' }, count: 4 }, { ...

guide to importing svg file with absolute path

I have been attempting to load SVG files from my LocalDrive using an absolute path. Despite successfully achieving this with a relative path, the same method does not work when utilizing an absolute path. <script> $(document).ready(functio ...

Add a hovering effect to images by applying the absolute positioning property

On my React website, I am utilizing Tailwind CSS and I am attempting to showcase an image that has interactive elements. I want certain parts of the image to increase in size slightly when hovered over. My approach to achieving this was to save each part o ...

Interactive selection menu with jquery technology

I am in the process of developing a dynamic dropdown feature using jQuery var rooms = $("<select />"); $(res.data).each(function () { var option = $("<option />"); option.html(this.name); op ...