Apache .htaccess directory index with html5 video - javascript

I know the .htaccess file can do all forms of magic. I have folders that have video files in them and would like clicking the file to open them within a html5 video tag in the same browser window. What would be the easiest way to accomplish this?
It's important to note that I do not have access to server side scripting. I assume that the following should be possible in one way or another:
Read the names of the files in the current directory from the DOM, since the filenames are listed in the HTML generated by Apache.
Add some form of event handler to the filename links.
Use jQuery or whatever to generate an overlay div with the video tags when a file is clicked.
I couldn't find anything that works directly with google, but I assume I'm not the first one that tries to do something like this.

You can use jQuery to do a AJAX GET request and get the Apache Directory Listing. You can put this list into a container and add some custom events on the links, for example.
Something like this:
$.get("/dir/with/apache/listing/", function(data) {
var directoryListing = $(data);
// Add to a container or something
$("#VideoList").append(directoryListing);
$("#VideoList a").on("click", function(ev) {
ev.preventDefault(); // Stop default action (download)
alert($(this).attr("href")); // Video link
return false;
});
});
Please note that AJAX requests only work on the same domain. It would also require you to create some sort of a page to put this script on.

Related

Replace all src/href references to include a site root directory in jquery

Suppose i have loaded some html data from ajax.
The ajax returned an an html form.
The issue arises when loading the resources in the loaded data. Let me elaborate..
For example, the ajax may receive a script tag referenced to "/script.js". But since my page would be on (let's say) a separate domain the browser wouldn't recognize the url "/script.js". So what I'm looking to do is replace all of the links like "/abc.xy" to be linking to the domain form which i'd be loading the resource originally..
So, all references like "/abc.xy" would be changed to "www.domain.com/abc.xy"
How would i achieve this? (if it is even possible)
function resolve(old,new){
[...document.getElementsByClassName("*")].forEach(el=>{
if(el.src){
el.src=el.src.replace(old,new);
}
if(el.href){
el.href=el.href.replace(old,new);
}
});
}
Use like this:
resolve("http://original.com/","http://new.com/");

Is it possible to retrieve text files from HTML app directory without HTTP request or <input>?

I'm working on an HTML/javascript app intended to be run locally.
When dealing with img tags, it is possible to set the src attribute to a file name with a relative path and thereby quickly and easily load an image from the app's directory. I would like to use a similar method to retrieve a text file from the app's directory.
I have used TideSDK, but it is less lightweight. And I am aware of HTTP requests, but if I remember correctly only Firefox has taken kindly to my use of this for local file access (although accessing local images with src does not appear to be an issue). I am also aware of the FileReader object; however, my interface requires that I load a file based on the file name and not based on a file-browser selection as with <input type="file">.
Is there some way of accomplishing this type of file access, or am I stuck with the methods mentioned above?
The browser will not permit you to access files like that but you can make javascript files instead of text files like this:
text1.js:
document.write('This is the text I want to show in here.'); //this is the content of the javascript file
Now call it anywhere you like:
<script type="text/javascript" src="text1.js"></script>
There are too many security issues (restrictions) within browsers making many local web-apps impossible to implement so my solution to a similar problem was to move out of browsers and into node-webkit which combines Chromium + Node.js + your scripts, into an executable with full disk I/O.
http://nwjs.io/
[edit] I'm sorry I thought you wanted to do this with TideSDK, I'll let my answer in case you want to give another try to TideSDK [/edit]
I'm not sure if it's what you're looking for but I will try to explain my case.
I've an application which allow the user to save the state of his progress. To do this, I allow him to select a folder, enter a filename and write this file. When the user open the app, he can open the saved file, and get back his progress. So I assume this enhancement is similar of what you are looking for.
In my case, I use the native File Select to allow the user to select a specific save (I'm using CoffeeScript) :
Ti.UI.currentWindow.openFileChooserDialog(_fileSelected, {
title: 'Select a file'
path: Ti.Filesystem.getDocumentsDirectory().nativePath()
multiple: false
})
(related doc http://tidesdk.multipart.net/docs/user-dev/generated/#!/api/Ti.UI.UserWindow-method-openFileChooserDialog)
When this step is done I will open the selected file :
if !filePath?
fileToLoad = Ti.Filesystem.getFile(scope.fileSelected.nativePath())
else
fileToLoad = Ti.Filesystem.getFile(filePath)
data = Ti.JSON.parse(fileToLoad.read())
(related doc http://tidesdk.multipart.net/docs/user-dev/generated/#!/api/Ti.Filesystem)
Please note that those snippets are copy/paste from my project and they will not work without the rest of my code but I think it's enough to illustrate you how I manage to open a file, and read his content.
In this case I'm using Ti.JSON.parse because there is only javascript object in these files but in your case you can just get the content. The openFileChooserDialog isn't mandatory, if you already know the file name, or if you get it from another way you can use Ti.Filesystem in your own way.

Embed external webpage inside html without iframe/ajax

I am working on Phonegap application and basically I want to embedd an external webpage inside my html page, yes for me various options are available. I tried with <iframe> method, but I am getting below error:
Refused to display 'https://xyz.com' in a frame because it set 'X-Frame-Options' to 'DENY'
Since I don't have control over the server side, loading an webpage inside an iframe is ruled out.
I also tried with ajax method:
$.ajax({
crossOrigin: true,
url: 'https://xyz.com',
success: function(data) {
$( '#bodyFrame' ).html(data);
}
});
It works fine, but the biggest problem is it doesn't render CSS/Javascript, it only displays plain html.
I tried with <link rel="import" href="https://xyz.com"> now I am getting cross-domain issue.
My question is, is there a way to display an external website inside an HTML page with correct css and js rendering (I don't have control on this part on server side) without IFrame/embed/object tags? I searched lot of questions on SO, most of them tell to use ajax but this have css issue. Can anyone help me in this?
Well, I think that you have at least few options.
Do like I just did for my project where I need to be able to show whole pages offline: load the HTML for that page, iterate through it (with regular expressions) to find out all resource links (JS, CSS, images) and download those (store to file system). Once downloaded, change the URL to URI of your local file on initial HTML. After that show that HTML for user.
Few special things to mention about this way in no particular order:
Implement cache of your own to speed this up.
Use blacklisting for URLs that you don't want to download.
caolan's Async.js library is just great for this.
For CSS resources you need still to download images within it and change the links to those too.
Images can be converted just to Base64 representation inside HTML for less callbacks to handle.
This way you can use the iframes.
This is pretty much related to first one but go through the HTML on your success callback and get all the links for JS and CSS and use technique described here to reload those for you.
Here is summary of that method:
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref);

Chrome extension: move downloaded file to input field

I am trying to migrate images with a small chrome extension i have built. the extension consists of 5 files:
popup.html - the plugin html document
Has some html buttons
also has script link to my settings.js file that listens for the image downlaod button to be clicked and send a message to my content script : run.js to find the images
run.js - content script ( has access to the webpages DOM ).
This script recieves the message from run.js which then finds all the images names and image links i want to download. It puts them into an object and sends them via message to the backgorund script : bootstrap.js
bootstrap.js - runs the background page and has access to the chrome api.
var Downloads = [];
chrome.extension.onMessage.addListener(function(request, sender, sendResponse)
{
if(request.message.method == 'download'){
for( var d = 0; d <= request.message.imageLinks.length; d++ ){
chrome.downloads.download( {url: request.message.imageLinks[d],
filename: request.message.imageName[d]}, function(id){
});
sendResponse('done');
}
}
});
This all works fine and dandy. It loops through the images and downloads them.
What i need to be able to do now is: Take the images i just downloaded, and insert them into the file upload fields on the other website (which i have open in another tab) which have the same field names ect..
I see chrome has a
//Initiate dragging the downloaded file to another application. Call in a javascript ondragstart handler.
chrome.downloads.drag(integer downloadId)
At first i thought this might work since you can manually drag the downloaded image into the html file upload field without having to click and select the file. But i can't find any documentation / examples on it.
Does anyone know it is possible to get accomplish this with javascript / chrome api?
First you need to access the content of the files you downloaded.
For that, you need to add a permission to file://*in your manifest file.
Then you can loop through your downloaded files with chrome.downloads.search for instance and get each file's path in the system (DownloadItem.filename property). For each file, make a GET XMLHttpRequest to the url file://{filepath} to get the file's content.
Once you have that content, you can convert it to a DataUrl and programmatically add the file to the FormData of your form (not the actual inputs though, just the FormData submitted in the end). See this answer for this part.

check if folder exists in the root jquery

I'm trying to load an image to a div background using the following file structure in the root.
WebContent --
|
zharaimages --
|
[ItemID] --
|
Image.jpg
This is done by jQuery and the file structure is inside the root. The ItemID folder is dynamic and I have to check whether the path exists using jQuery and if the path is not valid, I should go to a default path to fetch the default image. How can I check the path is valid using jQuery. I'm hoping to this can be done without an ajax call.
Can any one help me on a tutorial or an API I can use for this!
UPDATE
The files are on the server. The concept I have is that I have 100s of item elements & I want to load an image for each item element. The images are saved in the server ( a local host ) and the folder hierarchy is divided using the item ID as shown. What I want to do is check whether the image file exists before appending it to the background of the item element div. Is this possible. This is a web application developed using spring.
In simple way you cannot. It is because JavaScript cannot access folders on server side. The only way you could try to check is to invoke $.get in which you pass url to image and handle error if image does not exist. You cannot try to get only folder because if folder listing is disabled you will always get error
you can bind error handler on your image tag, and if error receive you can load your default image.
$('#imgElementID').error(function() {
$(this).attr('src', 'images/DEFAULT.JPG');
});
without hitting URL you cannot get to know if image exist or not

Categories