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]);
Related
I have the following code that downloads an image from URL
let imageBuffer = await rp.get({
url: pictureUrl,
encoding: null
});
and i wanted to remove the image metadata from this file. Is it possible to remove the metadata without actually saving the buffer first into a file ?
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.
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
I'm working into a project to encrypt/decrypt files in JavaScript. To save the encrypted/decrypted file in disk, I'm using blob. All the process is working, the files get encrypted (and some tests show-me that decrypted too) correctly. And I can save even large files with the blob method (I was using URI data before, and it was causing browser crash errors when files size more than 1MB). But for some reason, I can't save the decrypted blob content into a file correctly. When it's a TXT file, I get this in the beginning of the file content:
data:text/plain;base64,
and it continues with the text content encoded in base64. I need it to be saved as original file, not in base64. When I decrypt an exe file, it's corrupted, so if I open it into some text editor, I get:
data:application/x-msdownload;base64,
Again, looks like the file is getting saved in base64 and with this header attached. Here's my code to create/save the content of blob (on decrypt routine):
reader.onload = function(e){
var decrypted = CryptoJS.AES.decrypt(e.target.result, password)
.toString(CryptoJS.enc.Latin1);
var blob = new Blob([decrypted]);
var objectURL = window.URL.createObjectURL(blob);
if(!/^data:/.test(decrypted)){
alert("Invalid pass phrase or file! Please try again.");
return false;
}
a.attr('href','' + objectURL);
a.attr('download', file.name.replace('.encrypted',''));
step(4);
};
reader.readAsText(file);
}
How can I save the files with the original content? And not header+base64 encode?
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.