I'd like to know if it's possible/advisable to build the following JPG uploader:
- use html5 drag-drop to select files for upload
- filter drop list to upload JPG files only
- use html5 to save upload list in local storage
- initiate html5 file uploads
And in case the uploads did not successfully complete, on reload of page:
- check local storage for list of uploaded files
- resume upload from last successful file.
Is it possible/What kind of user interaction is necessary to allow HTML5 to get a list of OS filepaths and initiate file uploads?
The idea is to make easy/reliable to upload say 500 JPGs.
Maybe these can help: https://github.com/valums/file-uploader and https://github.com/newbamboo/rack-raw-upload
[EDIT]
Now I use jQuery-File-Upload on all my projects
Related
I am wondering if I can have a webpage where I can tell it to grab my file and put it in a directory, such as: "http://example.ex/folder". Meaning the file I provided is put into the "folder" folder.
Overall process:
Button says: "Import file"
I select a file, and my file is "text.txt"
It takes my file "text.txt" and adds it to the local system/directory of the website.
You can do this using JQuery File Upload and then adding a backend service that captures the file and saves it.
For example, here is a repository that has a basic Python (Flask) server integrated with JQuery File Upload that will take an uploaded file and place it on the server:
https://github.com/ngoduykhanh/flask-file-uploader
I'd put the rest of the code here, but it is a lot - and requires HTML, JavaScript and a back-end language (like Python).
Here is the documentation on JQuery File Upload: https://github.com/blueimp/jQuery-File-Upload
As a word of caution, DO NOT TRUST ANYTHING UPLOADED TO YOUR SERVER. Meaning, do not put it out on the open internet without some sort of authentication or checks in place to make sure only files you intend are uploaded. Otherwise, people will find it and upload scripts turning your device into a Bitcoin miner, spam relay, or bot host.
Instead of doing it this way, why not use SFTP to upload it to your server to host? At least that way you can lock down access.
I am trying to figure out where and how does Chrome save local storage.
I found the following folder (in my home folder) that seems to contain the local storage:
\AppData\Local\Google\Chrome\User Data\Default\Local Storage
In this folder I see files that corresponds to different URLs (the files contain URLs in their names). For each URL I see two types of files:
LOCALSTORAGE file
LOCALSTORAGE-JOURNAL file
I am interested in local storage of one particular web site. For this web-site the LOCALSTORAGE file contains only 6KB and the LOCALSTORAGE-JOURNAL contains nothing (0 KB).
On the other hand, when I open the web site of interest in Chrome and then press F12 I see in the local storage 6 different URL and if I click on one of them I see key-value pairs.
So, what I see in the folder and in the Chrome development tool is not consistent. Why is that? How can one find content of local storage in the directories? Or is it impossible?
The file is in SQL Lite format. Install SQL Lite, then type the following commands:
cd %LocalAppData%\Google\Chrome\User Data\Default\Local Storage
sqlite3 *filename*
select * from ItemTable;
.quit
The ItemTable table contains key-value pairs, the semantics of which depend on the individual website.
see the description of localstorage file here
it says : The extension LOCALSTORAGE indicates an application support file created by the web browsers using WebKit, such as Google Chrome and Apple Safari. These files store browser settings or local data for a browser extension, and enables extensions to store a local cache of user data saved in an SQLite database format.
You can browse localstorage files by a sql-lite browser, such as the open source program called sql-lite database browser
There's a method by which you can drag files out of Chrome to your local file system. It's detailed here and works well: http://www.thecssninja.com/demo/gmail_dragout/
I have a HTML5 File Upload widget that I'd like to be able to drag a file into, one that's hosted on my server and a reference to which is embedded in the page.
The drag in doesn't seem to get a file in the event.dataTransfer list of files.
Is this possible to do?
File input allows user to access a local file from browser. Is it possible to load a local file given by file input, modify it and save it back to same local file? I know that HTML5 allows creating writeable filesystem, but basically it seems to be abstract directory.
For security reasons, I don't think the browser can overwrite the local file. Using the File-System API you could only copy the contents of the local file to the sandboxed File-System API directory(found under various obfuscated file names). All manipulation/saving would be done in AppData.
Perhaps displaying the modified image on the screen, right click, save-as to the given file location would also be suitable? (other than that I think you have to upload the image to a server and download it back again)
Is it possible to obtain file handles in HTML5 and store it as a blob in webDB for upload later?
(Upload selected images when the 3G network is available again, without re-selecting the files.)
The HTML5 will be loaded from the local client device and
action="http://.../insert.jsp"
be used to upload the files to the server.
Any help or ideas will be very useful.
C-:
Any File object can be converted to an URL.
It is simple to do by using object URLs as described by:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
(I still have to confirm that the URLs remain valid across sessions.)
And it does not remain valid across sessions in Chrome!