Utilize AJAX and JavaScript to retrieve file information and facilitate file downloads

I have developed a script that intercepts Captcha form submissions. Typically, when the form is submitted, a file will be downloaded (such as exe or zip) in the usual way where it appears at the bottom of the Chrome browser and gets stored in the "downloads" directory.

However, I do not want the script to actually save the downloaded file on the user's computer. So, I modified the form submission process to handle the download using AJAX, and store the file data in a variable. Then, another function uploads this data to a PHP page.

Is there a way to retrieve information about the downloading file, such as its name and type? The file could be named 'Application.1.2.zip', but I am unsure how to get this data from the AJAX request that initiates the download. I only need this information to identify the file type and store it correctly on the second domain.

The current workflow involves downloading a file from Domain A (in any format) via AJAX, storing it temporarily, and then uploading it to Domain B using AJAX as well.

Thank you, Dan.

javascriptajax

Answer №1

One way to solve this issue is by using the Content-Disposition HTTP header. According to RFC2616 from W3C:

The Content-Disposition response-header field has been proposed as a means for the origin server to suggest a default filename if the user requests that the content is saved to a file. This usage is derived from the definition of Content-Disposition in RFC 1806 [35].

content-disposition = "Content-Disposition" ":"
                          disposition-type *( ";" disposition-parm )
disposition-type = "attachment" | disp-extension-token
disposition-parm = filename-parm | disp-extension-parm
filename-parm = "filename" "=" quoted-string
disp-extension-token = token
disp-extension-parm = token "=" ( token | quoted-string )

For example:

    Content-Disposition: attachment; filename="fname.ext"

This method allows you to handle it all in one request.

If you're working with JavaScript, you can extract the filename like this:

var disposition = httpRequest.getResponseHeader('Content-Disposition');
var filename = disposition.substring(disposition.indexOf('=') + 1);

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

Swapping out the contents of a div with an external PHP file within the Laravel 3 framework

I'm currently working on a project where I have an unordered list of movies displayed using data from the Rotten Tomatoes API on a page called "browse" within the Laravel Framework. My goal is to implement AJAX functionality that will load content int ...

phpajaxlaravel

Adding an active class to a link tag depending on the current URL and custom Vanity URLs - here's how!

I have a functioning code snippet, but it seems to be missing a crucial part when dealing with URLs such as www.mysite.com/home/. It works perfectly fine if the URL ends with index.aspx, like www.mysite.com/home/index.aspx, but fails when that part is omit ...

javascriptjqueryhtmlurlwindow.location

Callbacks in Laika tests go untriggered

Meteor.collection.insert() allows for the use of a callback as one of its arguments. To demonstrate, you can start a new Meteor project and execute the following code in the browser's console. my_collection = new Meteor.Collection("myCollection"); my ...

javascriptmeteorlaika

How can one determine if a DOM element has been generated dynamically?

Some of the content on this page is dynamically created after an ajax request, while other content was pre-loaded when the page refreshed. When I click on an anchor tag, I need to know if it was created dynamically or not. I did manage to solve this issu ...

javascriptjquerydom

Having trouble navigating back to the homepage

Recently, I started following a tutorial on YouTube to create a basic frontend in React with Bootstrap. However, I encountered a roadblock while trying to implement a specific functionality. The issue stemmed from the fact that react-router-dom v6 no lon ...

javascriptreactjsreact-bootstrap

Kartik's gridview in yii2 has a unique feature where the floating header in the thead and tbody are

I'm looking to create a table gridview with a floating header, where the tbody and thead are not the same. The image appears after refreshing the page, before the modal is refreshed. After refreshing the modal, this modal is inside pjax and it sets t ...

javascriptphpgridviewyii2

Merging scripts to minimize HTTP requests - The Takeover of the Body Swappers

For my website design, I've implemented the Invasion Of The Body Switchers script from brothercake.com. This script involves loading three separate js files in the header. I'm looking to optimize my site by reducing the number of HTTP requests a ...

javascript

Updating your feed dynamically using Ajax in Rails 4.0: A step-by-step guide

I'm currently working on implementing ajax functionality for a sample app inspired by Michael Heart's book. I've set up a feed model controller, which is similar to microposts in his book. I'm attempting to use ajax for posting feeds, b ...

ajaxruby-on-rails-4feed

Using the "this" keyword in JavaScript to access the "rel"

Take a look at the JSFIDDLE , where you will notice that the rel attribute in the alert is shown as 'undefined' : var ItemTypeArray = $('input[name^=ItemType]:checked').map(function(){ alert(this.id + ' , r= ' + this.rel) ...

javascriptjqueryhtml

Leveraging JavaScript within PHP script

I am currently developing a booking system that involves creating events in a table using PHP. I want to implement a script that will run when a user tries to book an event and then submits the form to PHP. This script will help me determine if the user ha ...

javascriptphpmysqldatabase

"Utilizing Material-UI in React to create a textfield input with number validation

I am currently working on an input field that should only accept values within a specified range of min and max. However, I have encountered an issue where manually entering a number bypasses this control mechanism. Is there a way to prevent this from happ ...

javascriptreactjsnumbersmaterial-uitextfield

ng-class expressions are constantly evolving and adapting

Within a div, I am utilizing ng-class="{minifyClass: minifyCheck}". In the controller, I monitor changes in two parameters - $window.outerHeight and $('#eventModal > .modal-dialog').height(). If there are any changes, I trigger the minifyChan ...

javascriptangularjs

How do I collapse the sidebar in mobile and tablet view using Bootstrap 4?

I am trying to create a collapsible sidebar that expands on large screens such as lg, but collapses with a visible button for tablet and mobile views (md or smaller). How can I achieve this responsive behavior for my sidebar on mobile and tablet views? It ...

javascriptbootstrap-4

What could be causing the Autocomplete feature to display as undefined?

I'm encountering an issue where the Autocomplete box displays "undefined" even though it returns the expected results. How can I resolve this problem? import { Drawer, List, Typography, Switch, ListItem, ListItemText, ListItemSecondaryAction, TextFiel ...

javascriptreactjsmaterial-ui

Creating Browser Extensions with Vue.js and Vue CLI

I am in the process of creating a Chrome Extension with a frontend powered by Vue.js. Everything was going smoothly using vuecli until my app started utilizing the Webextension-API. This API is only accessible to registered Extensions, not normal websites. ...

javascriptvue.jsgoogle-chrome-extensionvue-cli

Unable to Trigger onClick Event with react-bootstrap Navbar Dropdown in Combination with react-router-dom

In my React application with react-bootstrap, I have a Navbar component that displays a dropdown menu for different brands. However, I noticed that the second brand option (Tommy Hilfiger) is always the one active by default, as if it is automatically cl ...

javascriptreactjsbootstrap-4react-hooksreact-bootstrap

Switching back and forth between classes prevents the animation from playing continuously, causing it to jump straight to the end

Currently, I am in the process of animating a hamburger menu with a unique twist. The idea is to have the top and bottom lines smoothly translate to the middle and then elegantly rotate into an X shape when clicked. My approach involves toggling between tw ...

javascripthtmljquerycsscss-animations

A method for automatically collapsing one div item when another is open

I have tried various methods but none seem to work. I am attempting to open only one div at a time, please click on the link above to see for yourself. Please provide any alternate solutions or suggestions. JsFiddle: http://jsfiddle.net/gm2k3ewp/ < ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Tips for incorporating various color schemes into all sides of a shape generated through the extrude geometry feature in three.js

I have recently designed a wall-like structure using extrude geometry and now I want to assign different colors to each side based on the settings below: var extrusionSettings = { curveSegments:5, steps: 10, amount: 200, be ...

javascriptthree.js

Utilize JSON text importing for template literals in Node.js

When it comes to my node js projects, I usually opt for using a text.json file and requiring it rather than hardcoding static text directly into my code. Here's an example: JSON file { "greet": "Hello world" } var text = require('./text.json ...

javascriptnode.js