Ionic select multiple images or videos from gallery - ionic-framework

I'm developing a mobile application in Ionic Angular and I don't seem to be able to find a plugin that supports being able to select multiple pieces of media as well as both images and videos.
So far I've come across and tried two:
Ionic native camera
Unfortunately this plugin only has a getPicture() method which only allows for the selection of one item (image/video).
https://ionicframework.com/docs/native/camera/
Ionic native image-picker
Unfortunately this plugin does allow for the selection of multiple items with getPictures() yet it only selects images. This function supposedly has an option allow_video: true in its invocation parameters but I've tried this out yet videos don't show up in the gallery. There's also an open github issue since 2017 about this with no response.
https://github.com/Telerik-Verified-Plugins/ImagePicker
My question here is, does anyone know of an Ionic plugin that would allow me to open the gallery and allow the user to select multiple pieces of media - both images and video?
The returned result would preferably be a file URI for each selected item but that is not a necessity.
Thanks in advance!

Multiple files with the ionic plugin I am also unable to find but you can use Html file tag to get the desired type of files.
HTML code
<input type="file" multiple name="files[]">
TS code
files: FileList;
public testup(event){ files=event.target.files;}

Related

How to automate an Ionic form on an website?

There's this website with a form that I fill out every day with the same information is it possible to automate this? Using the dom I have found out they are using the Ionic framework and I have looked for an element but I can't find it. Also in console when I type document.getElementsByClassName("native-input sc-ion-input-md") but I get like a very long list of things.

Embedding YouTube Videos in Silverstripe - Strips Fullscreen and Rel=0

I'm trying to embed YouTube videos onto my Silverstripe site, using the page editor. We're having problems with two different ways of embedding.
Editor's Insert Media:
When I click the editor's "Insert Media" button I choose "From the web" and paste in the YouTube URL. However I need to hide related videos, so to do this we need to add "&rel=0" to the end of the URL. When I do this the "Insert Media" option doesn't work.
iFrame:
So instead I tried to use the embed code provided by Google. I went to he text editor and inserted it. The iframe works, however the editor strips off the "allowfullscreen" tag from the iframe - which means users cannot watch the video in full screen.
So I either have to show related videos, which I don't want to do. Or I need to block users from being able to watch it in full screen mode - which again I don't want to do.
We're running on Silverstripe 3.3.
Is there any way to stop Silverstripe from stripping the allowfullscreen tag? Or to have Silverstripe still process the YouTube URL if we put rel=0 on the end?
Alternatively, does anyone know if this has this been solved in 3.4, 3.5 or 3.6?
Before posting this I have done over 45 mins of thorough searching for an answer, including through Silverstripe forums (which are now discontinued), here on Stackoverflow and the Google group. Plus I worked my way through a number of the change logs of 3.4, 3.5 and 3.6 for anything related to iframes and YouTube, but was not able to find things specific to this problem.
The TinyMCE editor in a different CMS I use does not strip out the allowfullscreen tag from iframes. So it seems specific to Silverstripe's implementation of the editor.
Direct answer to your question would be to amend the tinymce config to include more attributes for the frame by setting the "extended_valid_elements"
https://docs.silverstripe.org/en/3/developer_guides/forms/field_types/htmleditorfield/#setting-options
Alternative way would be to introduce new shortcode : https://docs.silverstripe.org/en/3/developer_guides/extending/shortcodes/
Latter would be more user safe to some extend.

Is there a way to view all images loaded in the browser using Chrome Developer Tools?

I know that I am supposed to be able to see this in the "resources" tab -section of Chrome developer tools. Maybe I am not getting something, but I don't see any images listed in this section.
Does anyone know if / how this can be accomplished?
Open Google Chrome Console (F12)
Go to Network tab
Enable Filter, if it’s not enabled
Select the "Img" tag to filter for image requests
Refresh the page to see a list of all images as they are requested
DevTools -> Application tab -> Frames in the sidebar -> Images
Contains all the images.
Images are listed specific to each frame. Normally there is only 1 frame on the page. If the page uses the tag there will be others.
Expand "Frames" and then the first item listed (which is the page), below this is the category of images, as well as scripts and stylesheets. Note that the final item is the html of the page itself.
Another way is to use new resource-type filter is available in the Network panel (Chrome 87).
For images just type resource-type:image to focus on the network requests that are images.
Chrome Docs: https://developers.google.com/web/updates/2020/10/devtools#network-filters
If you want to download images :
https://chrome.google.com/webstore/detail/download-all-images/ifipmflagepipjokmbdecpmjbibjnakm
use site sucker app for mac or httrack website copier windows to get all contetn from page you want then select or sort data how you need ))
Hope i helped you ;)

Ionic adding pages

I just started using the ionic-framework and I know that with jQueryMobile you need to add the pages inside the same html with a page id and link to it.
But how do multiple pages work with the Ionic Framework?
On this example:
http://codepen.io/ionic/pen/AjgEB
I see that they use
<script id="file.html" type="text/ng-template">
Am I supposed to do it that way?
No. Normally, one adds the pages in separate files.
The above notation is just used for codepens or similar sites, where you can not add additional files into your online code.
You should take a look at an ionic starter app. Create one by writing
ionic start myApp
into your console.
This may be old post, but i created a tool with ability to generate ionic seed apps with all required pages. For ex., if you need a profile page for your app, using this tool, you can specify pages you need and it will generate the app with all necessary files and references in index.html.
Link for the tool:
http://ionic-sarav.rhcloud.com/#/ionicbuilder/home

Multiple layers of zones on a page google tv jquery ui lib

I'm using google tv jquery ui library to build app. I want to build multi page in one html file. I follow example : http://gtv-resources.googlecode.com/svn/trunk/templates/html-01/index.html, but it using 2 html files to switch between app. Please show me example code to manage multi page in one html file, thanks
If you'd like to do multi page web using single html, you could use layers. You should look at examples BuildPhotoPages or BuildVideoPages here:
https://developers.google.com/tv/web/lib/jquery/
Thanks.