Is there any Jquery plugin that will restrict a HTML file uploader only to accept images - html

I saw a lot of file up loader plugins .I dont want to use the entire file upload plugin ..
Means , I am using my own code. But i didnt find a way to restrict the file type the uploader accepts .. How can i do that? . Is there any plugin which doing only this function ( I don't want to use a full file uploader plugin)

This requires HTML5, jQuery is not needed. I think it will be small enough to use pure JavaScript:
first you can set the accept attribute to image/*
after that you can use the File Api to read the first bytes for the magic number - image numbers demo
These are just some ideas. You can devise some heuristic to check the file type based on this.

Related

Seeking Guidance

I'm new with this and not certain what platform to use to achieve my desired outcome (i.e. php, javascript, etc.), but I'm a fast learner.
I add videos to my YouTube channel daily. After this I update two separate webpages where I manually embed the newest video URL.
Question:
I would like to automate this work process. What is the best approach (i.e. CSS, Javascript, PHP, etc.) that I can use to "get" the most current YouTube video URL and embed it into my webpage(s) automatically?
I hope I explained this properly. Let me know if you need any additional information. Thanks in advance for any guidance you can offer!!!
(1) Get link of latest video on your Channel:
You can request from Youtube, a Channel's feed using
https://www.youtube.com/feeds/videos.xml?channel_id=XXXXX
Where XXXXX is the channel's ID (as shown in browser's address bar).
The first entry in the XML document is the latest video.
Use Javascript Fetch API to load the XML or else have a JS function to call a PHP script that gives/reads back this XML document.
After correct loading, you'll have a String (text) copy of that same document existing in some variable that you put it into. The idea here is to edit the text by code (instead of highlighting and replacing the URL in a text editor). The code should find and replace the URL. The code should then save the edited text as a new HTML file (overwrite the old one using PHP)
With Javascript, either use its String functions to extract the URL or follow some tutorial about parsing XML to extract data.
(2) To update the webpages: (use PHP)
Option 1 is to load the old page and use PHP String functions to replace text of old link with latest new link. Then write the edited text as file (overwrite older HTML file)
Option 2 is to have a "template" document already stored as String in your code. Then simply replace (or add if needed) the URL of new video. Then have PHP save the text of String as an HTML file, overwriting the old .html.
Use this service, I think it will be the easiest way: https://latestyoutu.be/
You can find your channel ID by clicking Settings, Advanced, and Account Information and paste it into the site. (https://support.google.com/youtube/answer/3250431). This is probably the most hassle-free way of doing what it seems you want to.

File Input accept every type of file, but not video and image

I want to implement an HTML5 file picker <input type="file" ...> which accepts all kinds of files.
But it should let the user select image/* and video/* files.
To be more precise: I'm trying to disallow images and videos. Anything else should be allowed.
The only way I currently see is to define a set of accepted file extensions (and/or mime types), but I don't think it's feasible to add a list of hundreds of mime types just to prevent that the user can select image and video files. So that wouldn't be a satisfying solution.
I'd prefer a JavaScript free solution, if possible.
Hope this Below link will help you in resolving your problem basically you need to add accept attribute to your input element and add the file types as the value which you want the user to upload.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

Limit the allowed file size for <input type=file> in pure HTML (no JS)

There are several topics* about setting up a max file size for a input type=file, but there is apparently no pure-standard HTML way to do so (nothing in the HTML spec).
So, is there any pure-HTML way to set a max file size on a input type="file"?
Is there a request for such feature, like a maxsize="..." attribute to let the browser filter out the files the user can selected, or do we have to stick to Javascript File API for years (or ever)?
*Topics:
JS File API: Limit the size of an file upload (html input) or How to check file input size with jQuery?
HTML never-saw-that-in-any-standard: HTML Upload MAX_FILE_SIZE does not appear to work
This is not part of the HTML spec, so there is no "pure HTML" way to do this.
I could only find this mention from 2013 with no reaction. Couldn't find any mentions in https://github.com/whatwg/html/issues
Sounds like it's something you could suggest, see FAQ - Is there a process for adding new features to a specification? for the recommended way to suggest new features to the working group. Please post the link to the discussion here if you do bring it up.
Though since there's a JS workaround, I guess this won't be high on anyone's to-do list.

Localizing a Google Chrome Web App

I'm trying to add localization support to a Google Chrome Web App and, while it is easy to define strings for manifest and CSS files, it is somewhat more difficult for HTML pages.
In the manifest and in CSS files I can simply define localization strings like so:
__MSG_name__
but this doesn't work with HTML pages.
I can make a JavaScript function to fire onload that does the job like so:
document.title = chrome.i18n.getMessage("name");
document.querySelector("span.name").innerHTML = chrome.i18n.getMessage("name");
but this seems awfully ineffecient. Furthermore, I would like to be able to specify the page metadata; application-name and description, pulling the values from the localization files. What would be the best way of doing all this?
Thanks for your help.
Please refer to this documentation:
http://code.google.com/chrome/extensions/i18n.html
If you want to add localized content within HTML, you would need to do it via JavaScript as you mentioned before. That is the only way you can do it.
chrome.i18n.getMessage("name")
It isn't inefficient to do that, you can place your JavaScript at the end of the document (right before the end body tag) and it will fill up the text with respect to the locale.
Dunno if i understand exactly what you are trying to do but you could dynamically retrieve the LANG attribute (using .getAttribute("lang") or .lang) of the targeted tag and serve accordingly the proper values.

Working with Javascript and images in AIR's HTML component

I'm having the following problems using Javascript and img tags in the standard HTML component in AIR:
1- Javascript in the xml literal causes problems (even though it shows using them here: http://livedocs.adobe.com/flex/3/html/ProgrammingHTMLAndJavaScript_07.html#1032824
2- Using html.loadString(...<img src="/tmp/me.jpg" />...) does not show the image.
3- After wrapping the Javascript in CDATA tags it is still not accessible and returns an 'invalid function' error when trying to reach it.
The second 2 issues seem to go away if I save the html to a file and load it with html.load(file) instead of trying to read it as a string. Any suggestions to solve these issues?
I ended up saving the file to a temporary file and using html.load(tempfile).