Add images from pc to page without using input file - javascript

How is twitter able to add images to a page without using the <input type='file>.
For example
I try to see their source code to get a better understanding on how they are able to do that but no luck yet on understanding how it is done it seems like they are able to do this without using the <input type='file'> if you guys can give me a link to a article or a code example on how this can be done. I will really appreciate that.

I just see that Twitter is using <div contenteditable="true"></div> with some style and script. Adding contenteditable attribute on element, allows you to edit directly inside the element and inserting an image from your computer too.
Read more about contenteditable change events and the rest is up to you. There are several ways to send data to the server without using <input> and <form> elements like using Ajax.
Here is the example https://jsfiddle.net/sxanyar/9zdjq4rv/

It's more complicated than just using an input instead. However, for the uploading part, you can use https://www.dropzonejs.com/.
DropzoneJS is an open source library that provides drag&drop file uploads with image previews.

You can search for more example drag n drop attachment.
Below is 2 familiar component is use for drag n drop.
https://bootsnipp.com/snippets/D7MvX
https://mdbootstrap.com/plugins/jquery/file-upload/

Related

Selenium: Getting ultimate href/link without clicking on it when it's a javascript call

I am webscraping a long table of html links (allowed under ToS). However, all the links are javascript calls (href="javascript:;") so using get_attribute() to get the link will not work. I don't want to actually click on all the links since it will download a large pdf file for each one
Is it possible to get the ultimate href/link that is called, without actually clicking the link and downloading the file?
Thank you!
Yes, but not easy - you need to take a look at javascript beyond those links, probably the links are generated dynamically.
The idea of doing this is described here
What does href expression do?
In short: in HTML for <a> to render correctly you need to set href, but sometimes there is no direct link or it's calculated somehow - so you need to look at javascript code which performs handling of those links - probably it's some click event listener you need to find

Multipage pdf - display specific page in html or js

I've seen there are few options to display a pdf file within an HTML page
cf.(among others) Recommended way to embed PDF in HTML?
Ok, what about if my pdf is multipage and I want to display a specific page ?
And only a specific page as if it was an image, meaning that the user can't scroll within the pdf.
Q) can I, and how to display a given page of a given pdf ?
imagine a kind of slide-show system, the aim would be to display within a <div> a given page of a given pdf according to the user's demand.
EDIT
ok I've been re-thinking this and actually my question should have been
How can I do exactly like in the previous/next exemple (http://mozilla.github.io/pdf.js/examples/learning/prevnext.html) if my project is hosted on a shared server on which I can't have an ssh access, install any packages or add librarie etc.
many thank's
This is entirely my personal opinion and it's your choice whether to use this way or not, but I would recommend having an iframe with the src set to the required PDF document. Then, add some HTML input buttons with their onclick attribute set to change the source of the iframe to include the parameter for the page number (#page=3). As an example of what I mean, take a look at the code sample below:
<iframe id="example" src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf"></iframe>
<input value="Page 5" type="button" onclick="document.getElementById('example').src='http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=5';" />
<input value="Page 1" type="button" onclick="document.getElementById('example').src='http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf';" />
Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.
Online demo: http://mozilla.github.com/pdf.js/web/viewer.html
GitHub: https://github.com/mozilla/pdf.js
This is probably the best way to do it with JavaScript/HTML5
(Access specific page)
http://mozilla.github.io/pdf.js/web/viewer.html#page=13
Regarding this example,I think that you should use the "View Source" feature in whichever browser you're using to get the HTML and JS for it, then add a JavaScript timer to trigger the onPrevPage(); and onNextPage(); JS functions.If you need help creating a JS timer using the setInterval function to change the pageNum variable, see the following link:http://www.w3schools.com/js/js_timing.asp

input type="file" using link in Jquery

Is it possible to emulate <input type="file"> and get a file browser using a link and jQuery?
I've tried to find a tutorial to do this, but a search on google doesn't show me any answers. Any help will be most appreciated.
Short answer: no.
file inputs let to browse your disk, etc to select a file. This can't be emulated with any other standard HTML/JS technique.
I've achieved similar in the past but its a bit of a hack:
Put a normal fileupload on the page.
Make it completely transparent(using opacity - don't change it's visibility to hidden)
Position your link under the file upload browse button.
When the user thinks they're clicking on the link, they will actually click the browse button.
Its horrible, but I don't know of another way.

jquery .html doesn't process certain tags and functions

At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div

Use CKEditor image plugin without the HTML editor

I'd like to use CKEditor's Image plug-in separately from the rest of CKEditor.
Basically I'm creating a simple tool to edit webpages. Some parts of the webpage will be HTML and thus require the full CKEditor. But some parts will be images, and I don't need the full HTML editor, just the Image plug-in.
Is this possible to do, and what would be the "cleanest" way to do so?
CKEditor doesn't provide an image browser by itself, so you must research how to use the file browser component that you have picked by itself.
If you're using CKFinder look at the standalone.html sample, like shown in the "enhancing html forms" here: http://ckfinder.com/demo

Categories