How to convert array-buffer post content to original value? - javascript

Am exporting web page as PDF file by using JSPDF plugin,then send it as array-buffer datatype to backed,the problem is i can't convert the array-buffer to a PDF file again to use it as email attachment
This code is for exporting page as PDF and send id as array buffer to back-end:
var file = pdf.output('arraybuffer');
var data = new FormData();
data.append("data" , file); //pdf file generated from jspdf plugin
data.append("action" , 'action_name');
var xhr = new XMLHttpRequest();
xhr.open( 'post','ajax_url_to_backend', true );
xhr.send(data);enter code here
What i did in backend:
$data = $_POST['data'];
unpack("C*",$data)
I expect the output a PDF file ready to download or send it as attachment.

Related

How do I convert an ObjectURL to a DB Insertable BLOB

Sending PHP the retval of the Object URL created from an image (blob:http://...) and using PHP's base64_encode() along side with file_get_contents() returns an error claiming that there is no stream or file.
How about send url of image. then use file_get_contents('http://...') to get the image file content.
For example, your image url is http://example.com/test.jpg
JS
// if image is a link
axiso.post(url, {image: "http://example.com/test.jpg"})
// if image is file select from local, upload file
let data = new FormaData();
formData.append("image", this.files[0]);
axiso.post(url, data, {headers: {'Content-Type': 'multipart/form-data'}})
PHP
// get file content from image link
file_get_contents('http://example.com/test.jpg')
// get content from upload file
$name= "image";
file_get_contents($_FILES[$name]);

Attach a file to an input with javascript

I have an input to upload files
<input type="file" name="comment[video_file]" id="comment_video_file">
Is it possible to attach a file by JavaScript?
I have tried but it didn't work
let file = new File([videoBlob], "video.mp4", { type: "video/mp4" });
let element = document.getElementById("comment_video_file");
element.append("video", video);
If I console log the element after the append it looks like this
<input type="file" name="comment[video_file]" id="comment_video_file">
"video"
"[object File]"
</input>
It isn't possible to create a file and attach it to an HTML form input but using the FormData object you could send a generated file to the server as part of a post request.
Pulled from the MDN:
var formData = new FormData();
// JavaScript file-like object
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://example.com/submitform.php");
request.send(formData);
Which should get you the same result of a file generated by JS sent to the server.
MDN article on file inputs states:
You can set as well as get the value of HTMLInputElement.files in all modern browsers; this was most recently added to Firefox, in version 57
I tried setting input.files to a files property from a drag-n-drop files event and it worked. Though I'm not sure if it's possible to do it with a manually created File.
If this won't work, try sending an XMLHttpRequest with FormData with a file Blob, as advised in other answers/comments.

XMLHttpRequest sending .PDF to PHP and saving on server, results in some data corruption

I have a pdf file in the form of a blob, that I'm trying to send to php to have it saved locally to my webserver. Currently, if I use saveAs() to save the pdf locally, the pdf is readable and uncorrupted. However, once the data is sent as formdata through to my php script, it saves in a larger filesize which has data loss, and ends up not being able to be opened in adobe reader.
I've diffed the two pdfs next to eachother, and you can see that certian characters are just not getting copied over.
Diffed PDFs, Left is working PDF, right is corrupted
I'm reading the blob with FileReader, and appending the formdata with the result. Then I use XMLHttpRequest to send the data to my pdf, where it fwrites the file.
I'm ASSUMING this is an encoding error, but I just don't know enough about how files are encoded to do my own educated investigating.
function transferData(){
var data = new FormData();
var reader = new FileReader();
reader.readAsBinaryString(blobHolder);
reader.addEventListener('loadend',
function(){
data.append("data" , reader.result);
var xhr2 = new XMLHttpRequest();
xhr2.open( 'post', 'php/savefile.php', true );
xhr2.send(data);
});
}
<?php
if(!empty($_POST['data'])){
$data = $_POST['data'];
$fname = "serverGeneratedPDF.pdf";
$file = fopen("../upload/" .$fname, 'w+');
fwrite($file, $data);
fclose($file);
}
?>
Wanted to update this issue with how I got it to work.
I ended up sending the entire blob object over as formData, and not using FileReader. In my PHP file I then used the file_get_contents() function which finally saved the day. It was able to pull the hard "data" out of the blob that was sent over!!!
Updated Code:
JS:
function transferData(){
var data = new FormData();
data.append('sentBlob', blobHolder);
var xhr2 = new XMLHttpRequest();
xhr2.open( 'post', 'php/savefile.php', true );
xhr2.send(data);
}
PHP:
<?php
$data = file_get_contents($_FILES['sentBlob']['tmp_name']);
$fname = "serverGeneratedPDF.pdf";
$file = fopen("../upload/" .$fname, 'wb');//creates new file
fwrite($file, $data);
fclose($file);
?>
My "ah-ha" moment was figuring out two things:
My blob was sending to the $_FILES var instead of $_POST
Once the php handled the blob, using the '$_FILES[]['tmp_name']' was finally the way to get the raw binary data out of the blob (took me days to get to this point)
Hope this helps someone!

jQuery- Open pdf in new tab with file name

Im getting a pdf back from a databse as a blob object and want to display the pdf back to the browser with a file name.
I get the file back no problem and able to display in new tab, but file name looks like --> 64CB13D-ec93-48fa-a425-0b66n3fg
How can i force a file name?
function(response){
if(response.data && response.status==200){
var fileContent = response.data;
var file = new Blob([fileContent], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
window.open(fileURL, '_blank');
I think you can just use HTML for this purpose, see my answer here: Display PDF stream returned from controller using jquery in new window
And add, server-side, the following header:
Content-Disposition: attachment; filename="the-name-you-want.pdf"
See: https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Disposition

Can I set file name in blob data when I upload data to server using html5?

I use event.clipboardData to get image from clipboard, and then upload it server, code:
var items = e.clipboardData.items;
for(var i=0;i<items.length;i++)
{
if(items[i].type.indexOf("image")!=-1)
{
var blob=items[i].getAsFile();
var data = new FormData();
data.append("ImageFileField",blob);
_post2("url...",data);
}
}
NOTE: _post2() is a function using XMLHttpRequest to do upload works.
Above code work fine, the image from clipboard can upload to my server directly.
BUT I found a problem, the filename of image upload to server is fixed as "blob", can I modify the filename before upload to server?
This is the upload data detail:
Request Payload
------WebKitFormBoundaryW0NQVOkdrfkYGWV3
Content-Disposition: form-data; name="%%File.48257279001171c9.2c36671da7f1b6c9482575de002e1f14.$Body.0.3D8"; filename="blob"
Content-Type: image/png
------WebKitFormBoundaryW0NQVOkdrfkYGWV3--
According to FormData, you should be able to add a filename parameter to your data.append() call as follows:
data.append("ImageFileField", blob, "imageFilename.png");
i faced same problem that during upload, file name not a assign to multipart with blob object but after a lots of google and RND . i find simple and best approach for this problem.
let file = event.target.files[0];
this.fileName = file.name; // Like : abc.jpeg
this.croppedImage = file //blob object after cropping
const formData = new FormData();
formData.append('file',this.croppedImageSend,this.fileName);
this.http.post(url, formData, headersOptions)
if you want to modify the filename in the blob itself, just add a key called "name"
blob.name = "imageFilename.png"
After that your JS functions should be able to pick it up. I'm using jQuery File Upload and this works with it.

Categories

Resources