Transferring a file from an input to an iframe JavaScript [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am working on a project : I need to extract the text of a PDF file and put this text in a "div".
For the moment I managed to do it by using the tag <iframe>.
But it works only when I know the path of the PDF File like for instance : src="nameofthefile.pdf" or src="folder/nameofthefile.pdf"... And now I would like to have the same result but when this PDF file is uploaded by an extern users in front-end.
So I think about the tag <input id="input" type="file"> but when I used it alone with my PDF I manage but the text is still encoded ...
So here are my questions (sorry for this four questions ... :P)
0) Firstly is it easy to decode a PDF text so that I can use only the <input> tag ?
1) If not can we get back a file in input and stock it in an iframe ? (thanks to javascript)
2) If the answer to the second question is "no" does it exist a way to upload a PDF file in an iframe and to give to this frame a special "src"attribute. Or is it possible to define dynamically the attribute "src" (like in day-to-day language : "if a user uploads a PDF file, my programm is able to know that the PDF is at this precise place and so it can extract the text" ?
3) Or last question : is it possible to upload a file thanks to the tag <iframe> by using only javascript or maybe JQuery but no AJAX or PHP? If not which method I should work on it ?
(I don't really want to use backend technologies like PHP^^)
To sum up about my code : I integrated the code from https://github.com/hubgit/hubgit.github.com/tree/master/2011/11/pdftotext into my project. But you need to know the src of the PDF ...
Thank you.

I don't really know if you can "extract" the text out of a PDF. But i think the part with the "special" src attribut would be the easyest way to use php.
<?php
$file = //Some Code for choosing the newest file in a directory;
echo '<iframe src="',$file,'"></iframe>';
?>

Related

Custom HTML,CSS,JS,PHP Pages in Wordpress [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I am new to Wordpress. I am used to make websites from scratch.
I am currently working on a wordpress template (Astra).
I need to make a custom page using HTML,CSS,JS,Php from scratch and add it to my wordpress pages.. How can I do it?
I've google it and saw many approaches but didn't get anyone of it.. Some suggested to make a Parent/Child related pages but I don't know ..
Can I just put a .php file in the directory and make a link between it and wordpress pages?
How can I link css/js pages with them also ?
Simply Create a .php file with all the html css JS and php code. on Top add comment inside your file
<?php
/* Template Name: Custom Page HTML */
and then create a new page and Select new created Template and publish that page.
you can create this file inside your theme folder.
I would suggest creating a normal page in wordpress then in the back end editor you can edit the html raw. I usually use my JavaScript inside my html. As for the css you can edit that by going to the page you created when logged in, then clicking customize. There should be a additional css option where you can edit the styling.

Accessing HTML <textarea> data and store them as file [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have following task:
I need to gather information from multiple <textarea> tags, format them a bit and save on hard drive preferably in CSV format.
Important note no. 1: that data source HTML document is a file on my local hard drive, it's not hosted on any server (this file is a product of export from some database management tool).
Important note no. 2: only script language engine available is python
I already do some effort on preparing some python script that embed CSS stylesheet links and JavaScript links into this HTML file to use and some jQuery library functions for displaying purposes.
Now, on specific action (i.e. "save" button click) I need to:
Search for filled <textarea> tags (jQuery job?)
Format them and glue in single variable preferably (jQuery as well)
Display "save as" dialogue
Save file on hard drive
Well as far as I know, JavaScript is not allowed to manipulate files on machine file system, so for writing file this should be some server-side script, is that correct?
Should this save script be triggered by "save as" button? (realized as submit form button)? If yes, can I run firstly some JavaScript function (gathering textarea data and format them) and later save this in file?
How this kind of data can be passed to this server-side script?
Thank you for all kind of help and advice.
EDIT:
I see that some users already point <a> tag with download attribute, but there is one additional issue: we have to assume IE as web browser, which by default does not support download attribute.
The correct answer was posted as a comment instead of as an answer for some reason. Code courtesy of gabrielperales:
JavaScript:
$(function(){
function toCSV(text){
var str= 'data:application/octet-stream;charset=utf-16le;base64,';
str += btoa(text);
return str;
}
$('#editor').on('change', function(){
$('#download').attr('href', toCSV($(this).val()));
});
});
HTML:
<textarea id="editor"></textarea>
<br/>
<a id="download" href="" download="file.csv">Download</a>

Is there a way to reduce copy pasting in html/css for content which every page contains? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
What I mean is that when creating multiple pages currently I always have to copy paste the header, navigation and footer boilerplate. And while it isn't all too hard to do(can basically copy-paste an emmet line and have it handle everything). I was wondering if there is a way where I wouldn't have to do that be it server side or as a plugin/addon for sublime text.
The current idea I have is to perhaps create a server side js which I could then possibly import on every page, though I know almost no js to pull that off.
Any suggestions?
In Html5 you can use the object tag to include a file.
Basically you create a single file containing your header and the common code that goes on each page.
Then on every page of your site you add
<object name="includedfile" type="text/html" data="page.inc"/>
where you need the content to appear.
Edit:
Check also jquery if you prefer to use javascript. There are easy functions to achieve the same result like:
$.get('test.html')
.success(function(data) {
$('div.content').html(data);
});
Where test.html is the page that you want to load and div.content is the place where you want to put the loaded code.
The only answer which works pre HTML5 is to learn PHP and/or install a system which allows you to use page templates. Most web servers have PHP installed.
Your page would then look something like this:
<?php
include "header.php";
?>
<!-- your html page code here -->
<?php
include "footer.php";
?>
At this point I would recommend you move into a more robust web language. Here are some options.
Ruby on Rails (yay!)
PHP
ASP.NET (yech)
You will definitely want more of the powerful features once you begin working on more complex websites.

Javascript download contents of a element [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Download textarea contents as a file using only Javascript (no server-side)
Basically I have a live html editor in javascript and I want to add the ability for the user to click a button or link and download their html document. My idea was just to download the file with the contents of the textarea element, but I can't seem to find out how.
I do have php if any server-side things are needed, it doesn't have to be strictly javascript but I want an option to do this. Thanks! And please comment because sometimes my questions can be rather confusing :|
Well there is an another simple way to do this on the client side itself, i believe that will be a best fit for you because, the html editing is done on the client side and you dont need any server data.
http://pixelgraphics.us/downloadify/test.html
the above component lets us download a content from the client side and WYSIWYG editor is a DIV with a Contenteditable true attribute which allows editing, so you can get the html content and pass it on to this component for client side download

Cycling through documents in a backend archive [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm building a website which will show comics.
I'd like to store each image in a backend file, and then have the site access those files and display them on the front end. I do not want to create a new page for each image.
Basically like this:
Similar to what you'd see here:
http://doctorcatmd.com/2011-01-10/doctor-cat
or
http://xkcd.com/1004/
I'd like to know how I can achieve this. Do I need to learn a querying language? Or do I have to actually create a new page for each file I'd like to show...? Any advice would be helpful.
Thanks!
You don't have to create a separate file containing HTML for every image, doing that is unnecessary and complete overkill. Instead, on the server-side you can generate the page based on a predefined template and insert content wherever you like. You can do this using a server-side scripting language such as PHP.
As far as determining what to insert (in your case an image), that's typically done using parameters from the client, usually in the form of as HTTP GET variable. They're (usually) the key-value pairs you see at the end of a URL after the question mark (eg. http://example.com/article.php?id=3454).
A very basic example of a PHP script that could do what you want is as follows.
<html>
<body>
<?php
$images = array(
1 => 'peanuts.jpg',
2 => 'dilbert.png',
3 => 'phantom.png'
);
echo '<img src="/images/"' . $images[ $_GET['id'] ] . '">';
?>
</body>
</html>
A URL like http://example.com/comics.php?id=2 would show a page with the dilbert.png image on it.
Just off the top of my head, one way you could do this is to use PHP and set up a template page, and then use a query string to determine which comic to show. Something like:
<div id="comic">
<?php
$comic_id = htmlspecialchars($_GET["comic_id"]);
?>
<img src="<?php print $comic_id?>"/>
</div>
In this case your comic ID would be the name of the file and your URLs would look like http://www.example.com?comic_id=comic1.png
This way you have one .php file as the template, but you can have it show whichever image you'd like.
Of course it would require more code to write the pager, which would need to know what the first, previous, current, next, and last comics are. That would require some sort of mapping mechanism for listing and ordering them. You could use a backend MySQL database for that, or something lighter.

Categories