How do you get html files in dropbox to open in a new window as an application, rather then opening it in the preview window. AgileBits the creators of 1Password for mac have a html page that they upload to dropbox and when open on dropbox's website it opens in a new tab and runs directly from your dropbox as an application.
I have tried a number of things and have not been able to recreate this, nor can I find any documentation on dropbox that says how to do it. If I take there html file and copy it, it works as expected. If I copy the content of the html into a new file, it only opens in a preview window. If I rename there file it no longer works, I search around for hidden .files and messed around with those but none of them seem to affect anything.
It might be just me but I think your question is phrased badly, however if I understand you correctly you want to essentially HOST a webpage/site from DropBox.
This is still possible, despite them phasing out the public folder in Aug 2012.
New accounts registered after this date need to manually enable the public folder by going here: http://www.dropbox.com/enable_public_folder
Inside the Public folder you can store almost anything (including HTML files) that can be accessed directly with an absolute URL.
You want to open the https://dl-web.dropbox.com/get/*folders*/*file.ext*?_subject_uid=*9999999*&w=*abcdefghijklmnopqrstuvwxyzABCDEFGHIJK123456789* link for a non-public folder file (rather than the https://www.dropbox.com/home/*folders*?preview=*file.ext* link). This is actually the link for the anchor tag for the file in the file list on the web, but clicking on most opens the files in preview mode (still not sure why ones named "1password.html" are exempt). To open the non-preview link you can Shift-Right-Click, to get the browser right click menu instead of the Dropbox one, and just chose "Open in new tab/window".
Using the 1password.html file as a guide it looks like you can load separate scripts/files using ajax. They embed all CSS and images in the HTML file (images using base64).
Edit: It looks like Dropbox provides special functionality to 1password. Other non-public pages can not load scripts/data from the same folder tree (error 403). Even renaming the 1password.agilekeychain folder and breaks its functionality.
Related
I am working on a project, and i want to know if there's any way to change content of a html file like images, text, etc. with javascript (without any framework) by clicking on elements of another html file.
In general the browser will prevent you from editing the content of any file on your hard drive, or any page served from another domain/base url. However, if both files are in the same project as shown below, you can make temporary edits to one file from the other;
/http
|-index.html
|-template.html
|-hello.png
index.html can contain a <script> tag with the following
// first we open a popup showing the other page
let window_template = open("template.html","_blank")
// now we can do whatever we want in the popup window from the original index.html:
let new_img = window_template.document.createElement("img")
new_img.src = "hello.png"
window_template.document.body.appendChild(new_img)
This does not (and cannot) save any changes to "template.html".
To actually make changes to files, you need to run your own server. Then index.html can send a request to the server, and the server will have the ability to make edits on behalf of your browser-based app. Check out Node.js and the Express server library... I found it approachable enough as server frameworks go.
I am creating browser based video editing tool. I want a user to first download a ~70mb javascript file and store it somewhere on his computer. I want to link that file when my website is opened. How can I achieve that.
EDIT
What i meant is that there are various files like js1.js,js2.js... all sums upto 70mb . So i will offer a zip folder to download and only link js1 or js2 file etc depending on the effects user wish to apply
i am sorry to inform you but i think there is something really wrong with what you are trying to do.
A "solution" would be to just cache the javascript on the user's browser so any subsequent requests parse the cache instead of requesting the resource again from the server.
You should know however that if you are in need to download ~70mb of a javascript file you are doing something wrong. I have a whole web app project that when published the total size is around 60mb, all files required to properly run included, and its a damn big codebase in there.
I find it very hard to believe there is ever a need for a single javascript file to be that big, in any case maybe a simple caching should do the trick
That is actually done automatically. Once you add a <script> tag with a link to a local js file (also stored on the server) the file is loaded automatically.
See HTML <script> src Attribute for more information on that.
You can only reference to js files on the server. Files on the server could look like this:
index.html
somefancyjsfile.js
You can then reference from inside your html file to the js file via the <script> tag.
I'm not sure though if the size is not a bit too much...
I want to create a popup window that shows me all the files in a certain directory like ex a /functions directory. I want to be able to click a file in that directory, click ok, and store it's info in variables (not upload it), How would I do this?
I've tried using a form as:
<form action="" method="post" enctype="multipart/form-data">
But with that I can't specify a directory to open specificlly, I have to manually navigate to that directory.
I've tried using window.open()
window.open("file:///" + "home/user/Desktop/demo/functions");
I've tried using an onclick link mechanism:
<a onclick="file:///+ "home/user/Desktop/demo/functions"">Open folder</a>
None of these seem to work, any ways I could approach this problem?
In JavaScript, file handling gets a bit messy. The only way to grab the contents of a folder from JavaScript would be to connect to a server and have a serverside code in a different language relay the folder information back to JavaScript.
The only way I can think that we could be able to fake this result is by placing an index.html file inside of the target directory. This index.html file would then have the names of all the files in the folder within it. However, they would have to be manually plugged into the HTML file. (if you know how to use PHP, it can scan a directory and push the contents to the HTML file)
When a web browser has to navigate to a folder, it asks the server for an index file (usually this will be an HTML or PHP file). This index would then have the contents of the folder inside of it.
If the folder is indeed on the local computer, however, there is one final way we can do this...
If the page navigates to a folder using a window.location of something akin to file:///C://Users/USERNAME/Desktop/My%20Folder/, chrome (or whatever browser you are using) will navigate to the directory and display the contents of the directory. However, since you can't put JavaScript into this browser-generated index page, you won't be able to manipulate it.
The <input type="file"> is probably your best bet, but you can't set a default directory with it (at least not without some JavaScript voodoo, and even then there are security issues between the web and the local user).
I don't know why you would want to do that, anyway, since directory structures are going to be different between different users, and the specification of paths is different between different OS's.
Instead of doing this I will suggest you copy that picture in project/image folder after clicking the upload button.
Basically I have a django app that communicates with a chrome extension. I have a bunch of functionality that interfaces with normal HTML pages that's all done by the extension. I want to allow users to have the same functionalities for PDF files. I have a python script which translates the pdf file into an html page.
The problem I run into is when the pdfs are open locally within chrome.
Like the following file:///home/wcr5048/Downloads/sample_pdf.pdf
This is my current solution, it basically gets the html and replaces all the current html, which is just an embedded pdf, and replaces it with the converted pdf(html). But I run into an issue because the "url" isn't really a url, and therefore I can't append html to something that doesn't exist.
function convert_to_html(request) {
console.log('converting to html...');
document.getElementsByTagName('html')[0].innerHTML = request.data;
chrome.runtime.sendMessage({
detail: 'refresh'
});
}
What I don't want to happen is to download a file just like the pdf but one that's been converted into html. I would rather have everything happen automatically.
I only see two possible options:
I create a unique link for the converted pdf file for every user, and then send the raw html string to populate the corresponding view.
I somehow tell the extension to use a popup to cover the entire width of the screen, and then populate it with the data.
Are there any suggested solutions that would be a better fit, and if not, which would be a better solution.
Thanks for viewing
I'm using JQuery FileUpload in my web application. Things are working fine. Now i want to extend the behavior and get the folder name from uploaded file. Requirement is to get the folder name when user drop a file on page or select it through the file selection dialog. For this i tried to use callback "fileuploadchange" and "fileuploaddrop". Both worked and i was able to get the selected file collection i.e data.files but data.files[0] didn't contains any information about the source folder. Any idea on how this can be achieved ?
Thanks in advance.
You can only get info on what the user decides to "give" you, for security reasons. You might get that functionality by using some flash plugin, but with html/js you are not allowed into the users pc, not even folder names (thankfully)