I upload a file using the file from the browser using the file type input. I have a system, where I receive that file on the client side read the binary of it and then convert it to base64 (using btoa), do some more stuff as part of my system and then the system uploads it to the remote Apache server as a Multipart request.
When I download the file, I do the reverse, parse the response, get the raw string, convert it to base64, send that string to client side and convert that base64 string into binary again (using atob) and save the file using octet-stream type using Blob constructor and the createObjectURL method. The file is saved on the disk, so no problem here. When I open the file it's content is unreadable.
I did some research and compared my base64 during upload with the base64 during the download part and I see that the base64 string gets corrupted in the download process.
So, for example, I am just making up the strings, but the intent is to show what is happening
Upload base64:
UIABvcfce+tre2df
Download corrupted base64:
UIABvcfDuuuvvv55rrre2df
You would see as shown above ce+t is changed to Duuuvvv55rr.
And therefore, my question - How to remove the mutation (or corruption) from a base64 string?
I tried a lot of search on stackoverflow and other online platform with direct or indirect references but somewhere it is not working.
I have a piece of client side code that exports a .docx file from Google Drive and sends the data to my server. It's pretty straight forward, it just exports the file, makes it into a blob, and sends the blob to a POST endpoint.
gapi.client.drive.files.export({
fileId: file_id,
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
}).then(function (response) {
// the zip file data is now in response.body
var blob = new Blob([response.body], {type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"});
// send the blob to the server to extract
var request = new XMLHttpRequest();
request.open('POST', 'return-xml.php', true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onload = function() {
// the extracted data is in the request.responseText
// do something with it
};
request.send(blob);
});
Here is my server side code to save this file onto my server so I can do things with it:
<?php
file_put_contents('tmp/document.docx', fopen('php://input', 'r'));
When I run this, the file is created on my server. However, I believe it is corrupted, because when I try to unzip it (as you can do with .docx), this happens:
$ mv tmp/document.docx tmp/document.zip
$ unzip tmp/document.zip
Archive: document.zip
error [document.zip]: missing 192760059 bytes in zipfile
(attempting to process anyway)
error [document.zip]: start of central directory not found;
zipfile corrupt.
(please check that you have transferred or created the zipfile in the
appropriate BINARY mode and that you have compiled UnZip properly)
Why isn't it recognizing it as a proper .zip file?
You should first download the original zip, and compare its content to that what yhou receive on you server, you can do this e.gg. with totalcommander or line "diff" command.
When you do this, you will see if your zip is change during transfer.
With this information you can continue searching WHY it is changed.
E.g. when in you zipfile ascii 10 is transformed to "13" or "10 13" it could be a line ending problem on the file transfer
Because when you open files in php with fopen(..., 'r') it can happen, that \n signs are transformed when you are using windows, you could try to use fopen(..., 'rb') wich enforces BINARY reading a file without transfering line endings.
#see: https://stackoverflow.com/a/7652022/2377961
#see php documentation fopen
I think it may depends by that "application/x-www-form-urlencoded". So when you read the request data with php://input it saves also some http property, so the .zip it's corrupted. Try to open the .zip file and look at what there is inside.
To fix, if the problem is what I said before try to change the Contenent-type to application/octet-stream.
I would suggest using base64 to encode the binary data into a text stream before posting, I've done this before and it works well, using url encoding for binary data isn't going to work. Then on your server you base 64 decode to convert back to binary before storing.
Once its in base64 you can post it as text.
Well, to me it is not a ZIP file. Looking at the Drive API you can see that application/vnd.openxmlformats-officedocument.wordprocessingml.document is not zipped, like application/zipis. You should handle the file as an DOCX, i think. Have you tried that?
You are sending a BLOB (binary file) using "Content-type", "application/x-www-form-urlencoded" with no url encoding applied on the BLOB... so, the file that PHP receive is not a ZIP file, it's a corrupted one. Change the "Content-type" or apply url enconding to BLOB. You can get a better idea looking at MDN - Sending forms through JavaScript. This questions should help too: question 1, question 2. You must send the file properly.
I'm currently working on a Ionic project. We want to transfer Files using authentication, so I do a request to the server with my session token in the header and then the server returns a piece of JSON code. This JSON contains the file type (.png, .docx, etc) and a base64 string of the file.
When I write this base64 string to a file I get the exact same string in the file. However, if I use the atob() function to decode it, I get a corrupted file. When I open this file in notepad, I can see that more than 99% of the file is the same as the original. Only a few characters are different. Does somebody know a solution to this?
The File is uploaded via a web portal to the PHP framework. When we use the PHP code to get the file and decode the base64 string to a file, it works just fine. (PHP framework returns in UTF-8).
$http({method: "GET", url: "PATH TO SERVER" + students[y].id + ".json"}).then (function(result) {
$cordovaFile.writeFile(cordova.file.externalCacheDirectory, fileName + result.data.data.data(filetype), result.data.data.base64, true).then(function(res) {
console.log(res);
});
})
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.
I'm using FileReader.readAsBinaryString to upload a file using a multipart/form-data POST request to a server.
The file gets sent and the server receives and saves the file.
When I try to open the file on the server I get messages saying that it is corrupted (png images) or I see a blank document (in the case of a pdf). Obviously something is going wrong.
Is there some other encoding that needs to be applied to the data returned in event.target.result in the FileReader.onload handler? Am I missing something else?
Thanks
Try using FormData instead of reading the file as a binary string and constructing the multipart/form-data request manually. See my response here:
HTML5 File API readAsBinaryString reads files as much larger, different than files on disk