In javascript, I read the file data by binding the on-change method to the file input and saving the file data into another input using the following code
$("#release_cover_custom").on('change', function (evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
$("#release_cover_custom_data").val(e.target.result);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
});
why i use the above code?, to store the image data, because i have a form where i provide settings for the email template that would be sent later and there i have to provide the background image to be used inside the email, i need to preview the email with all the settings and along with the background image provided to upload before saving the form or uploading the image, so i read the image data, save it to an input and then open a modal window to preview email and post all the necessary variables there including the image data which is then used in the following way inside the css to apply the background-image like below in my php view file
background-image:url('" . $background_image . "') !important;
Now i want to do the achieve the same thing via php, means if i have the image saved to a path and i want to read the image data and use it in the same way i did using javascript to futher pass it to the css property,
i tried to use base64_encode(file_get_contents('path/to/file'))
but the encoding seems to be different for the image data, as the background image is not shown should i be using some other method to achieve it in php.
#quagaar reply (on the question) helped me solve the problem and replaced the following
$background_image=base64_encode(file_get_contents('/path/to/file'));
with
$background_image='data:image/png;base64,'.base64_encode(file_get_contents('/path/to/file'));
and everything works fine as expected.
EDIT:
between i was dealing with images only and if you are working with Images only and you need mime type (e.g. for headers, or like my case), then this is a fast and reliable technique:
$file = 'path/to/image.jpg';
$image_mime = image_type_to_mime_type(exif_imagetype($file));
It will output true image mime type even if you rename your image file.
Related
What I'm trying to accomplish
[x] 1) User fills out form
[x] 2) User adds images to form through "drag & drop (html5)" or by "click to choose images"
and a preview is displayed on the page. (done)
Here it's easy to add code to trigger an upload of theese images to the server but I don't want that just yet.
[x] 3) Users clicks "add me & my desk" --> Create user account if doesn't already exist
[x] 4) Desk is added, and a connection to the right user is added as well.
[x] 5) Create a folder with the same name (id) as the desk_id.
::::THE QUESTION::::
6) -->> now I want to upload those dragged and dropped, or selected images to that folder.
:::::::::::::::::::
I've gotten this far with the information I found here: http://www.html5rocks.com/en/tutorials/file/dndfiles/ (the actual page really rocks!9
I know about this awesome solution: http://blueimp.github.com/jQuery-File-Upload/
But it's overkill for what I'm trying to do, and I happen to be so proud that I've got everything else working, and I really do think I'm so close.
words and expressions that keep coming up: read blob, check array blob, read from sandbox, canvas.toDataURL()
I feel that the answer is here: http://www.html5rocks.com/en/tutorials/file/xhr2/
AND / OR HERE http://www.html5rocks.com/en/tutorials/file/dndfiles/ Or HERE /
http://www.html5rocks.com/en/tutorials/file/filesystem/ (under "Duplicating user-selected files"), OR HERE http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/
You could say I'm at the next step after this: Preview an image before it is uploaded
but perhaps I could get a push in the right direction? :)
Of course I've had a look at these:
HTML5 Pre-resize images before uploading
facebook js api - HTML5 canvas upload as a photo
Currently displaying preview from DND files like this:
for (var i = 0, f; f = uppladdadeFiler[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb preview" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('listImages').insertBefore(span, null);
var span2 = document.createElement('span');
span2.innerHTML = ['<img class="thumb inside" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('huvudbilden').insertBefore(span2, null);
};
})(f);
$('#valdaBilder').show();
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
I will give you some inputs which I hope will lead you in the right direction. Please note that I am not providing an off-the-shelf working answer because of two reasons - 1. I am just too lazy:) and 2. from what I can see you are smart enough to figure it out once you get the gist of it... so here goes:
First thing to do is have a button named, say, 'Upload Files' and attach a fn to it like uploadFiles(). Now this function will look something like below:
function uploadFiles()
{
var file = files[0];
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if (xhr.readyState==4 && xhr.status==200)
alert(xhr.responseText);
};
xhr.open('POST', '/upload.php', true);
xhr.setRequestHeader('X-FILE-NAME', file.name);
xhr.send(file);
}
Ok, so the explanation:
var file = files[0];
The files object array should be something that you create in your drag and drop eventlistener functions, which will be file objects representing the files you dropped into the dropzone. Usually you create them so: files = event.dataTransfer.files; which creates a FileList object named files In the example I am only considering the first file in the dropzone - hence files[0]
I guess the rest of the code is pretty self-explanatory. One thing to note is:
xhr.setRequestHeader('X-FILE-NAME', file.name);
xhr.send(file);
As you can see we are sending out raw binary data content to the server. So the post operation is writing into the server stream with raw binary data of what the file contains. This is an important point because this affects how the server is able to read this posted data.
Server side upload.php:
I am just going to read the first 1000 bytes of the uploaded file and print it back into the client (which, based on the javascript code above, will alert it into the browser)
<?php
$streamHandle = fopen("php://input","rb");
$streamContent = fread($streamHandle,1000);
echo $streamContent;
?>
Many people get confused on how to read content at the server side and think about using $_POST, or $_FILES, but if you are sending data using X-FILE-NAME, then you have to read it by opening a handle to php://input which is the standard input stream of the running php process.
Once you have read the stream, it is only a matter of fwrite-ing it into a new file in whatever directory you want to.
Like I said, this is not a turn-key solution that you can just copy-paste into your particular code, but I hope this helps you in looking in the right direction for file uploads using HTML5's drag and drop and the file API provided by Javascript to support it.
I am developing a site using Zend PHP framework. On a page I have a chart created with Google Chart API - https://developers.google.com/chart/. I would like to add a button to allow the user to download the chart as a PDF file (essentially convert the chart to an image and embed it in a PDF).
I have been able to convert the google chart to an image using a javascript function that generates the image data string - http://www.battlehorse.net/attach/topics/charts/google_charts_to_image.html
function getImgData(chartId) {
var chartContainer = document.getElementById(chartId);
var chartArea = chartContainer.getElementsByTagName('iframe')[0].
contentDocument.getElementById('chartArea');
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
}
I have also downloaded a free PHP class to handle generating the PDF - http://www.fpdf.org/
I have been able to use an ajax function to pass the image data string to a zend controller. I can then save the image locally and use it to build a PDF file and save that locally too.
//store the image locally
$data = substr($image,strpos($image,",")+1); //removing the "data:image/png;base64," part
file_put_contents ('downloads/'.$title.'.png', base64_decode($data));
// create PDF document
$pdf = new FPDF();
$pdf->AliasNbPages();
$pdf->AddPage();
$pdf->Image('downloads/'.$title.'.png',10,6,30);
//destroy the local copy of the image
fclose('downloads/'.$title.'.png');
unlink('downloads/'.$title.'.png');
//save the PDF document
$pdf->Output('downloads/'.$title.'.pdf');
I am now stuck because I cannot find a way to present the PDF file for downloading. I need to use an Ajax request to generate the PDF as the image data string is too long for a standard URL. So I think I need to redirect the user to the download link for the file after it has been generated (and then delete it again afterwards).
Does anyone know how I can serve the file for download, if I enter the file path into my browser I get a path not found error (e.g. "MyApp/public/downloads/myChart.pdf"). I have read in a few places how to set the header and body of the response in the controller but nothing has worked so far.
Whe you are generating the download link. Why don't you replace yourpath/public with domain.com? Assuming that ur PDF is generated In the directory public/downloads/blahblah
Possibly the next step would be lik
$path = 'downloads/'.$title.'.pdf';
Header("Location: http://domain.com.$path");
Now when the user calls this script file , using Ajax, the PDF will be generated and the location will be transferred to pdf's path!
I have seen some PHP scripts for uploading files and images but didn't find them to be what I need.
Basically I have a form: http://jsfiddle.net/MwnSn/11/ and the textarea section at bottom, I would like to add an attach image/file so that when a user chooses a file or image from their computer it creates into someform of URL in the textarea so then the user can submit form and the viewer just puts the url in their address bar to download the file or view the image...I know there could be a way to download this image or file into my webhost and let the user get the url to download or view it directly but that might be annoying an unreliable because I would need to create a cron job to clean that mess up weekly....
Any ideas on what I could do?
Working Example
Yes, when the user adds the file, using http://api.imgur.com/examples:
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "6528448c258cff474ca9701c5bab6927");
// Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
// Big win!
// The URL of the image is:
document.getElementById('TextAreaId').innerHTML = JSON.parse(xhr.responseText).upload.links.imgur_page;
}
// Ok, I don't handle the errors. An exercice for the reader.
// And now, we send the formdata
xhr.send(fd);
}
I draw something with html5-canvas. then i want to save it, and when the page is loaded again, I want to load the image I saved back to the canvas. I succeed with saving the data into a file in the server, but for some reason it's a strange file that can't open by ant software, and ofcourse not by my canvas. I save it as png base64, but i tried other things that didn't work.
javascript code:
function save(){ //saves the canvas into a string as a base64 png image. jsvalue is sent to the server by an html form
var b_canvas = document.getElementById("a");
var b_context = b_canvas.getContext("2d");
var img = b_canvas.toDataURL("image/png");
document.classic_form.jsvalue.value = img;
}
// opens the image file and displays it on the canvas
var canvas = document.getElementById("a");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "backpicture.png";
img.onload = function() {
context.drawImage(img, 0, 0);
};
php code:
<?php
$str=$_POST['jsvalue'];
$file=fopen("backpicture.txt","w");
if(isset($_POST['submit']))
fwrite($file,$str);
fclose($file)
?>
it creates the file, but shows nothing on the canvas when I load the page again.
I also tried to use Canvas2Image.saveAsPNG(), but it still didn't work.
can you please help?
thanks!
In order to save the file properly you need to decode the base64 data (and save as png):
file_put_contents('backpicture.png', base64_decode($str));
This:
.toDataURL("image/png");
Will give you something like this:
image/png;base64,iVBORw0K...[base64encoded_string]...
As #Variant said, you need to base64_decode it, but, ignoring "image/png;base64,"
This should work:
file_put_contents('backpicture.png',base64_decode(substr($str,22)));
I want let user to upload images to server add some info (like description, tags) about each image.I use Uploadify to upload multiple images.
I wonder if it is possible to show thumbnails of the images (while the user enters the additional info about each image) before the images are actually uploaded to the server.
I want user to have the following experience:
Select multiple image files
Immediately after that enter additional information about each image while seeing images thumbnails
Press Upload Files button to upload images to server, and go to drink coffee...
I found this script, but I think it also uploads the file before displaying the image thumbnail.
I would appreciate any help !
If you could enforce an HTML 5 capable browser you could use the file-api
Example: http://html5demos.com/file-api
Sure it is possible. Use the FileReader object to get a data URL (or use File.url if you are sure the Client implements it.) and assign it to an new Image()object. Then you can insert the image into DOM.
As an alternative to the standard-based HTML5 APIs, you can use a plugin such as Flash or Browserplus.
There is actually a ready-made application which might do exactly what you want. It's called Plupload. You can upload your files / images using a variety of "runtimes", and do client-side image resizing before uploading. I guess you can hook a thumbnail preview somewhere in there, in certain runtimes.
Otherwise, you can try building what you want from scratch, using the HTML5 / Gears / BrowserPlus / etc. APIs.
I'm pretty sure flash and java can both do it. Flash would require certain (obvious) security precautions (ie, you can do this for any file, it must be selected by the user).
Meanwhile java would show a security popup.
Xavier posted this solution on another thread, and I tried to improove it to work with multiple file inputs. I hope it helps.
$("body").on('change', 'input:file', function(e){
for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {
var file = e.originalEvent.srcElement.files[i];
var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
img.width = "50";
reader.readAsDataURL(file);
if($(this).next().hasClass('image_place')){
$(this).next('.image_place').html('').append(img);
}else {
$(this).after('<div class="image_place"></div>');
$(this).next('.image_place').append(img);
}
}
});
It scans all file inputs in the document body and reads the image using the FileReader api. If it finds any images, it creates a div called "image_place" where he puts the image. If there's already a image inside, the script replaces the image.