In our web based application we allow users to upload files.
I wonder if after clicking browse button we can restrict the list of available files to be uploaded by file extension. *.zip for example. Just to give the user easier way to find, select and click the file name.
I guess there will be javascript base solution but can I do it without javascript?
NOTE: this questions is only about making the browse dialogue to display less files.
In theory, <input type="file" accept="application/zip"> should work. Sadly, no mayor browser supports it...
You can use JavaScript to allow zip files only, but they will still appear in the list.
Edit:
For restriction purposes, you could use JavaScript, but you'd still have to perform server-side verification (with PHP, for example).
For a more convenient dialogue, you could use a Flash or Java Applet solution.
Links:
Flash Uploader
JUpload
Both allow you to limit the file extensions (among many other customizations).
It is not possible to set a file extension filter for the file browse dialogue. The best you can do client-side is to pass the file name through a javascript function on submit, and parse the extension to see if it is legal before proceeding with the upload.
Always bare in mind that your users will still be able to upload any files they choose, no-matter what you try to do client-side. You should always have a server-side check to ensure people aren't uploading malicious scripts.
Related
My requirement is to show a panel where I list the local system directory, from where I drag and drop the files inorder to perform operations on it.
In HTML5 the FileSystem API is available , but most of the browsers are not supporting.
Is it possible by using input type as file? Like we browse and select a directory, then we can see the list of files and their details?
As the previous commenters correctly noted, this is not possible because it is considered a security hole. Think about a malicious script that could read out everything on your local file system just by visiting a web page.
You can however implement file drag-and-drop like this: https://github.com/moxiecode/plupload
My knowledge about Web technologies is very low and I just wanted to know if the following scenario would be possible with HTML5 and Javascript:
If I host an HTML file in Dropbox and send this link to seomeone, would it be possible that this HTML file creates a new file in my Dropbox? For exampe the HTML file is a form that one can fill out, can the HTML file create a text (.txt) file with the form content?
As far as I understand, the HTML file has to be hosted by a webserver and has to allow Javascript or PHP to achieve this. But maybe there is a way to just use an HTML file, a dropbox and a browser?
Any hints what topics I should study to achieve this goal?
On what I've understood from Dropbox, it does not directly show you the file contents in any manner. You can store files there, but the only thing you can see when opening a link that directs to the file, is the page which allows you to download the file to your own PC and save it.
This would seem like an impossible thing to achieve, in any cloud service like Dropbox it would seem. I would recommend you to just get the web hosting service, they are usually not that highly priced after all.
You could do this, but you shouldn't. To make this work, you'd have to use the Dropbox API to upload files, and you'd have to embed in your web page an access token for your account. That means anyone who looked at the source of your web page could get access to make changes in your account (e.g. delete all your files). So there's no safe way to do this without a server-side component (like PHP).
I'm developing a Chrome application where I want to do basic stuff with currently downloaded files(mostly I want to move them to a new location using an application or extension whichever is possible).
I'm able to get access to the image, audio, video file using the mediaGallery API of Chrome apps. Is there a possible way I can get access to and being able to move other format file from their current location to some other location using Chromium apps?
You certainly read the contents of any directory that the user has given you access to. And, once the user has done this, you can retain the entry so on subsequent executions you don't have to keep asking the user to select the directory. Then, once you have a file, you can use the file API to manipulate it.
This is in principle all the media API does, except that it comes with knowledge of some built-in media directories.
I would like to develop a browser plugin/extension (I'm not sure how they differ) for a particular (possibly new) file type. To be very explicit, I would like to visit a file, "foo.org", using my browser in something like Drop Box or Google Drive and have the browser treat the file as Emacs would treat an org-mode file. Eventually I would like to develop a full Emacs plugin/extension and be able to configure the browser to handle files with this plugin/extension based on the file extension or a file grokking heuristic.
Any solution that I develop will allow the editing to take place directly in the browser's tab area, i.e. a seamless solution (as opposed the useful but seamy Edit with Emacs solution referenced below). In the same way that Chrome recognizes a spreadsheet or word document and invokes the appropriate Google Docs tool, I would like to get an Emacs-lite editor handle the foo.org file. Another way to ask the question is: how do Google Docs tools get invoked within Chrome and perform the associated editing task. And are these tools open source?
You should consider building on Ymacs which is an Emacs-like editor in the browser.
For browser extensions, there is an experimental downloads api. However, it doesn't let you monitor downloads at the moment. This is planned for the future:
In the future, you will also be able to monitor and manipulate downloads.
However, you can probably just use some JavaScript and replace all links to *.org files with links that open in a tab running Ymacs. This should have the same effect--clicking a *.org link will open it in a new tab.
Take a look at content scripts and the tab api for documentation on how to inject a script into every page and how to open new tabs.
Take a look at Edit with Emacs , it should help you get (at least) part of the way there.
I wanted to ensure the documents I let user download are programmatically manipulated throughout program.
I came to know that File API does give Apps the opportunity to manipulate them. But how can we store the Files in the sandboxed location?
You cannot directly read or write anything to the file system. You always have to go through either the usual upload/save dialog, or rely on desktop drag-and-drop (you can drag files into most modern browsers, and out of Google Chrome, at least).
It seems you can't let the browser download the file directly into File API's sandbox now. You have to fetch the file by yourself in JavaScript and write it to a file through File API. If the file is from the same origin, you can just fetch it by XHR.