We Keep Coding

Using Chrome Extension to change <input type="file" accept="/image*"> to enter URL instead of user chosen image file

I am developing extension that automatically takes information from the website and opens up another website with a form and fills it with information from the original website. It works flawlessly so far but I would also like to automatically upload images from the original website to the website that has the form.
In the website that has the form there is this HTML element:
<div id="input_area">
<input type="file" accept="image/*" name="image" size="20" id="image"
onchange="blocket.apps.newad.click_extra_images(this);" style="left: -154px; top: 16px;">
</div>
On click it triggers file selector where you can choose the image file. I was planning to skip this whole file selector thing and try to upload the image from URL instead, since images can be found as URLs from the original website very easily. I am trying to avoid privacy and security issues too by uploading image straight from URL instead of users machine.
Is this possible somehow? The page that contains the form is https://www2.tori.fi/ai/form/1?ca=16.
Just select the first option in the first page (Under KOKO TORI) to get to the form. There you should find the element.
https://imgur.com/a/jyb4nBE <- picture of the element where uploading happens.
Thanks for your knowledge and effort! <3
Edits:
I managed to edit the input type to "hidden" and change value for the input before uploading (leading to error). Uploading can manually be triggered using:
var event = new Event('change');
document.getElementById("image").dispatchEvent(event);
However I can't find a way to attach URL to be uploaded. I also read about "blob". Blob is apparently way to fetch data from a URL. However I have no clue how to attach blob (or the file) to that input. I also tried to but the URL as a value for uploading but it lead to error in page.

The question is not very general, but you should not try to get the image address while the user uploads it but after the upload as you said.
As the whole page gets reloaded after upload, you could try to see if element "img_0" (img_1, img_2... etc.) exist. Then save the source or download the file.
if(document.getElementById("img_0")) {
var image_url = document.getElementById("img_0").src;
saveImageURL2DB(image_url);
}
You have to trim the actual url a bit as they are using lots of redirects. The actual image thumbnails are like this url
<img id="img_0" src="https://img.tori.fi/image/thumbs/30/100001.jpg" alt="">
which redirects to this url (image filename stays the same)
https://images.tori.fi/api/v1/imagestori/images/100001.jpg?rule=thumbs
And you can get medium or full image by these urls
https://images.tori.fi/api/v1/imagestori/images/100001.jpg?rule=medium_660
https://images.tori.fi/api/v1/imagestori/images/100001.jpg?rule=big
It think blob datatype in your database does not have anything to do with this, unless you want to save the actual image file to database (instead of just using tori.fi's image files.

Refreshing a particular div content using javascript / jQuery

I have a JQuery div element. It displays a picture on the screen. The image is stored in the device memory and is being replaced in continuous interval (with same file name)
Once the image is displayed It's stuck there, I want it to load the latest image ( saved on the memory) by itself when ever I visit this div back in any given time.
Im using javascript to develop this App.
Any little help is appreciated.
[update]
This is my code, just the standard way to display the image.
<img src="/storage/emulated/0/Images/1.png" width="128" height="128">
The image 1.png will be replaced in regular intervals. I want this to be updated on the screen.

What you get from sdcard is a FILE_URI object such as (file://storage/emulated/0/Images/1.png) or you get DATA_URL object which is just the Base64 converted string of above.The html img tag accept FILE_URI and DATA_URL directly.

Since cordova camera plugin just allow user to select a image to view/edit or click a image then we can use cordova file plugin to create a functioning gallery app.
add cordova file plugin to your project:
cordova plugin add cordova-plugin-file
Then create a handler to provide you the path of the images(Syntax):
window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function
(dirEntry) {
console.log('file system open: ' + dirEntry.name);
var isAppend = true;
createFile(dirEntry, "fileToAppend.txt", isAppend); }, onErrorLoadFs);
For details of this plugin:https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file/
You can download test gallery app showing images from DCIM/Camera folder(default) into html img tag onto user screen:
https://drive.google.com/open?id=0B8vJcyO8_PK9R1k4STUyaEJQS1k

Why does the Responsive File Manager add random number to the img url?

I am using this file manager with tinymce to allow me to upload images to my website. The problem is that when I upload an image then use tinymce to add the image to my post the image appears with a random number at the end of the url.
Example:
If the image uploaded has the url
mysite.com/imgs/image.png
Then when I add the image to my post the image appears like this
<img src="mysite.com/imgs/image.png?1472141410397">
Where does the question mark and random number come from and does anyone know how to disable it?

How to display a pdf file on tool tip using jquery

I have a link as:
PDF
I want to set a tooltip for this link and in tooltip display the same pdf file.
That means i want to display the contents of testpdf.pdf file in tooltip when mouse over the link.
I searched that for in google, but there have no link siutable for me.
There have a lot of model for image ,text in tooltip.
How can I do this?
Anyboady have any solution?

Displaying a PDF generally involves launching a browser plugin, such as Adobe Reader, which has its own menu bar, toolbar, and so on. Cramming that into a small space like a tooltip probably isn't very practical.
You'd be better off rendering a thumbnail image — maybe use a PDF library on the server for this — and showing that in the tooltip.

You can try pdf.js
It renders PDF files onto canvas..
But in my opinion it is not a good solution at all, when the PDF is big, it will take some time to load it into the tooltip..Better is to create a thumbnail on the server and display it as a standard image..
Here is how to do that with PHP

I think that requires the browser to have a plugin to display PDF inline instead of downloading it. Once this is ensured, you can set the target of your tooltip to the URL pointing to PDF. What tooltip library are you using, btw?

HTML5 Canvas Example Screenshots

I have come across html2canvas thanks to a previous question of mine. What I am confused about is how could I implement it to do the following:
Create a live thumbnail of a live website.
When the live thumbnail is clicked it loads a bigger image of the website.
What would be the best way to feed the uri's into the script?
All images will have specific hxw set in the image tag or the css for the specific class.

If the website you are trying to create a thumbnail for is different from the actual page the user is on, you'll need to first download the HTML of the page to your server (same origin), after which you can wrap it inside an iframe and create a screenshot of that.
The screenshot generated will be 1:1 size with the actual site, so to create a thumbnail you'd have to resize the screenshot.
The script doesn't accept HTML, url's or anything else except for DOM elements as an input for rendering a page. As such, the only way you can generate a screenshot using the script is to have it either load on the page where you want the screenshot to be generated or load the page within an iframe (under same origin, so you'll need to download the source through a proxy if you use cross-origin).