I am creating an Image manipulation tool in the browser, and I want people to be able to select an Image folder to use as a directory to work from, and I would like those images to be available for editing and displaying in a HTML canvas.
How can I have the user select a folder on their computer and load all the images from inside it?
What about handling Dropbox, Box, Google drive as well as File, Folder and Drag & Drop. If you are interested take a look to this: http://extract.autodesk.io/ - This sample does not work with images, but 2d/3d models, but it is not different than images, change change the file filters accordingly.
Source code is posted here: https://github.com/cyrillef/extract-view.and.data.api
Where to start:
Install Flow.js - https://github.com/flowjs/flow.js
https://github.com/cyrillef/extract-view.and.data.api/blob/master/www/index.html#L195 for the HTML portion
https://github.com/cyrillef/extract-view.and.data.api/tree/master/www/js
upload-flow.js - using the flow.js library for local file
loaders.js - to handle dropbox, box, google driver, etc...
https://github.com/cyrillef/extract-view.and.data.api/tree/master/server
flow-node.js - the Flow.js Node.js implementation
file.js - the server routing for Flow file
You also got it in PHP, if you do not want Node.js
https://github.com/cyrillef/extract-php-view.and.data.api
Related
I have this scenario to reproduce an HTML implementation for 100+ images of different names.
myPackageDirectory
- index.html
- some_name.png
- script/css files
Currently, I have to manually do the following
pick each image file from pool,
place it into the
packageDirectory, then
rename it to static img.png, then
package(zip) the iteration.
I wish to skip renaming part from xyz.png --> img.png by something like <img src="*.png" /> kind of thing.
"Client-side method"
I've used python to automate iterations, but am looking for some html/js way to pick file just by extension
It seems you want to obtain a list of file names on the server with the .png extension.
If your server allows directory listing, you can do this with client side JavaScript. Otherwise, you'll need a server side solution.
See the answers here: Easiest way to get list of files in the server directory
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'm trying to add the adding of images into with the editor, with drag 'n drop.
I wanted to update CK editor anyway, so after some reading I created a new CKeditor download via the package building, including the plugin uploadimage -
http://ckeditor.com/addon/uploadimage
When I try to drag 'n drop an image in it, I'll see a green bar saying upload succesful and for less then a second I see the image in the editor.
Then a red bar is showing. saying:
'HTTP error occurred during file upload (404: File not found).'
I have this in the ckeditor config.js:
config.uploadUrl = '/upload/';
As I assumed this was the path were the images are uploaded. The folder is created and for testing I have set its permissions to 777.
As this is not working I assume I did something wrong here, or that I'm missing something in the configuration. But via the documentation I don't see what it might be.
I hope someone can point me in the right direction.
On a side note, I do not need/want a file browser. A little context -> this editor will be used by logged in users. I do not want one user be able to see images from the other and the input text in only used once, so no need to find earlier images as for this particular use the user will only use this editor once for setup. This is why I tought the uploadimage plugin would fit best for my needs.
Kind regards,
Martijn
Based on the documentation of ckeditor:
The uploadUrl setting contains the location of a script that handles file uploads of pasted and dragged images
This is not the folder in your server that you want to upload the files to. This should be the script that handles the submit of the file that should be uploaded, and this script is the one who handle the saving of the file in the relevant folder on the server.
This plugin only covers the client side (what happen in the browser) and not the server side (which you need to implement by yourself).
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)
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.