I'm doing a small HTML project of converting a doc file into another file (which is based on user preference). The website will have the user pickup the file, and choose their preferences on how the file should be processed, before sending it to a Java servlet. After processing the file, the servlet will then send the processed file as a downloadable file, which then will be automatically downloaded to the user's browser download folder.
At first, i used the HTML's form tag, with various input on it. After submitting the form, the processed file was auto-downloaded to my browser's download folder.
But then i changed the pickup file method into drag and drop, and used XMLHttpRequest to send the formdata, along with the dropped file to the servlet. The formdata was successfully sent to the servlet, and the servlet processed the file normally. But after that, the servlet didn't send the processed file to my browser as a downloadable file. I checked on the inspector, on the response under network tab, and it showed the processed file content, yet i didn't get the processed file like i would normally get using form tag method.
So i was wondering did i do something wrong in my XHR code below? I just want to get the processed file from the servlet as downloadable file, and not showing it on my page. The HTML form tag works fine and the servlet returned the processed file as auto-download file, but with XHR, the processed file was only shown in the response tab under network in the inspector, no downloadable file or whatsoever.
function formHandler(form) {
var formdata = new FormData(form);
formdata.append("inputFile", doc);
var xhr = new XMLHttpRequest();
xhr.open('POST', "excelServlet", true);
xhr.send(formdata);
}
Ok i get the answer for this already.
AJAX cannot download the response from server directly like form's submit() method. =.=''' The response will be shown in the inspector's response, but user won't be able to download it.
Related
I need to be able to take the raw data from any file and generate a response object within a service worker.
Short explanation:
I have a website that takes file names, paths, mime types and raw text and stores it in cache. If I make a request to a file with that path and name, a service worker responds with that raw data.
Here is the very basic service worker response code:
self.addEventListener("fetch", async event =>
event.respondWith(caches.match(event.request))
);
This system works fine for HTML, CSS, JS and probably other files, but not for PNGs. I keep getting the image not found image:
I have checked that the correct mime type is being sent and the correct data is stored in cache. I have tried putting the data in cache with the text I find in notepad after opening the PNG, and the text result of a fetch request to an actual PNG file, using the .text() method.
Here are partial images of both:
Notepad++:
Fetch:
This data in the images is put into cache with this code:
cache.put(
rawFileText,
new Response(
"filePath/example.html",
{
status: 200,
headers: new Headers({
"content-type": "image/png" + "; charset=utf-8",
}),
},
),
);
More background info:
This is for a web code editor I am working on. When I want to run code in the editor:
website1 will create an iframe with website2 as source
website1 post messages all the file names, paths, mime types and raw text containing code, images, etc. (by raw data I mean whatever you would see if you opened the file with notepad)
then the iframe (website2) stores the file names and data as cache
when a request is made to any file stored in website2's cache, the service worker responds with whatever data is under the file name
The reason I use 2 different websites is to avoid conflicts with the editor website's files, local storage, and everything else. There could still be conflict with the second website's cache and service worker but that isn't a problem in my case.
I have an HTML form with a file upload input. The form data is stored in a FormData() object so I can send it to the server using AJAX.
What I'm trying to do is access the FormData() values so I can modify the file contents that appear in the request. I have been monitoring the requests in Web Developer Tools -> Network.
If I'm uploading a .txt file or image, I want to be able to read its content, modify it and append it to the FormData().
My code so far is able to show the File object but I have no clue how to access the contents.
for( var pair of myFormData.entries() ){
/* pair[1] is the file object inside the FormData */
console.log(pair[0], pair[1]);
}
Thank you.
I have a requirement to download a file from a url, then POST it to another site via single js call.
Use case:
User enter a file URL then click Re-Upload button
Conditions:
The file will be either audio/wav, audio/mp3, or a zip file with multiple wav and mp3
I need to POST using multipart/form-data
Questions:
How do I create multipart/form-data request via js manually?
Correct me if I am wrong, but I think I need to store the file content into an input field once I download it.
How to encode this file content into a string that will comes up as byte[] when uploaded?
I need to download file from javascript. I send json with $.post, Rails server generates xls file and sends it back with send_data. Response has nex headers:
Content-Disposition:attachment; filename="preflist.xls"
Content-Transfer-Encoding:binary
Content-Type:application/ms-excel
How can I download this file after post request?
As I understand it you need to trigger normal browser file download after posting data to the server.
There are two ways of doing this:
After success of post you redirect your browser to an URL where the posted file is located
If the only source of the file is on the response of the post you will have to use the FileReader API, though that is not supported by all browsers. You combine reading the file from the result of the post with readAsDataURL(). The result of this is something you can combine with a hyperlink and the download attribute:
Then use javascript or jQuery to click that hyperlink.
http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api
Hope this helps!
I'm trying to save the result of a XMLHTTPRequest to a PDF file.
I am communicating with a server I am calling to get a chunk of data formatted as PDF data.
I'm using XMLHTTPRequets to log into the server, then make a search request which in return creates a PDF which is streamed back to me though the XMLHTTPRequest.
I need to save that result as a PDF so I can later open it in Acrobat.
When I save the response text to a file the result is not a valid PDF. The request is doing something to the stream which makes it invalid as a PDF.
I have no control over that server so I cant make it send back a link to a temporary valid PDF file.
Is there a way around that ?
Is there a way to encode that stream into a valid PDF file ?
I am using Javascript for that application.
Thanks
Erez
what you could do is return from your http server an xml file like the following:
<resp><![CDATA[YOURPDFSTREAM]]></resp>
and them retrieve the RESP node to build your pdf file.
Don't forget to encode your stream in the desired encoding format as well.