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.
Related
What my extension does - is posts one blog post to several sites.
The sites accept image uploads via <input type="file"/>.
What I'd like to do is have the User upload the image once into the extn UI, and then have the extn programatically\automatically post that image in several blog posts.
My extn already has an image available as base64 string. I want to supply that image to the site, without having to select image manually from disk.
Is that somehow possible with Chrome extensions APIs?
No, it's not possible. Because a 'select file' window belongs to the OS and chrome extension has zero control over it.
What I have found though, is that I can achieve what I need by turning my base64 string into a Blob, and then send it as a part of FormData object in the http request. Works just fine.
Here's a working example:
// Create blob.
const url = "data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...";
const blob = (await fetch(url)).blob()
// Create form data.
const formData = new FormData()
formData.append('file', blob, 'image.jpg')
// Send blob to a server that expects a file
fetch('https://server.url', {method: 'POST', body: formData})
Good Afternoon,
Scenario: I am having pdf's file on local system and when user click the button, I want it to get downloaded. But after getting download the file on opening shows corrupted. While posting this query I notice the file which is getting download is of 1KB and original file size is 28KB. I didn't understand why ?
I am creating the excel file at backend and saving at user location as due to huge data it is taking a lot of time so once file is created, the user can download the file.
Below are the codes of JS .
function download() {
var filename="output.pdf";
var element = document.createElement('a');
var fileloc="C:\\ebooks\\PDF\\abc.pdf";
element.setAttribute('href','data:text/plain;charset=utf-8, ' +
encodeURIComponent(fileloc));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
}
Original file is good. Please correct me what I am doing it wrong .
The data: scheme URL you are creating resolves to a plain text document (not a PDF) containing the text C:\ebooks\PDF\abc.pdf.
You are saving this file with a .pdf extension so when you try to open it, your PDF reader tries to read it as a PDF (which it isn't).
If you want to save the contents of the file at the path you specified then you need to:
Have the user select the file using a <input type="file"> (because JS is not allowed access to files on the user's disk unless they select them explicitly and generating the URL using the FileReader.readAsDataURL() method.
If you are creating the file on the server, as you said, then there is no need to construct a data: scheme URL, you can just use the https: scheme URL that points to the file on the server.
Does changing a JSON file with JS acutally affect the JSON file or does it only change the JSON file in temp memory?
Code
user.properties[0].firstName = "Jane";
This is from Replacing a property value in JSON.
Edit
I am not using a server to develop my website, but will be using one when I post it.
That would only affect the json in memory, you would then need to write the changes back to the filesystem for it to update the file contents.
I'm trying to use the JSSoundRecorder(https://github.com/daaain/JSSoundRecorder) for recording a file on my website. I would like to send the resulting wav along with a form where I add more info. Is there a way to save the Blob in my form? So far I can only find a way to directly send the blob to the server using a Ajax request. Is there a way to put the result of the recorder in a hidden file or another smart solution?
You won't be able to upload it as a file [1] (via <input type="file">) with a form, but you could try to base64 encode it and submit it via <input type="text">. You'd then have to decode it on the server before writing it to a file. This JSPerf has a few different methods of converting a Blob to base64: http://jsperf.com/blob-base64-conversion
[1] How to set a value to a file input in HTML?
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.