Upload tens of thousands of images via web interface - javascript

I have a task where it needs to be possible to upload thousands of images in one go via a web interface.
The user selects the folder and the upload begins.
What is the best way to manage this from a UI point of view? Current UI uploaders seem inadequate.
How can I manage uploading a folder of images (recursively) to the server?
Additionally, how can error handling occur for failed uploads?
Edit:
This is for a citizen science project for a museum. The people (curators) mass uploading photos of collections (usually photos of fossils) need a simple way of uploading them to the server - FTP etc aren't suitable. A method through the web UI is needed.

Related

Designing a website with basic upload and download functionality for live photos

I am looking to build a website that allows a user to upload multiple live photos at once, and then extracts the video files for the user to download them.
Do I need a full backend / S3 bucket here or can I keep it more lightweight with just html + js?
Basic assumptions would be less then 100 photos

How to get all files from a directory using ReactJs

I have a create-react-app application that has a page where it allows the user to select a .csv file to upload, this file has many columns, one of these columns is a path to a folder with a bunch of pictures.
I want to be able to access this folder and upload all this pictures using js on the client side, apparently all solutions involving the fs library do not work anymore as it's been removed from webpack.
Since the files are hosted in the client side, I need to be able to grab those files programmatically using the js running on the cliente browser, it needs to happen without the user interaction because that CSV file has thousands of lines (there will be thousands of paths to grabs the images from), so the user can't be manually opening the file browser and selecting a directory for each line of that csv file.
To be clear, the only user interaction allowed is the csv file upload, the rest needs to be handled automatically.
How can this be done? And if it can't be done, what would be a work around this issue?
Thank you.

Creating a web UI for an ftp file server that can archive folders as ZIP to download

I'm trying to create a file server to serve a bunch of files for download and have a web-based UI to search/filter and download the files.
Right now i'm using a basic FTP server and i'm planning to create a simple (flask+js) web app that will redirect me to the ftp url for the selected file so it can be downloaded. The web app is needed so I can create my own tagging and filtering system.
However, i'm having trouble finding out how to download whole directories and folders as a zip. Basically like how google drive can have a "Download as zip" function while still keeping the raw folder available for browsing.
Is there a way to do this?
This involves working with "blobs", a JavaScript way of dealing with streamable binary data.
I haven't tried this particular library myself, but there's an article here about using the JSZip library specifically for the kind of thing I think you're talking about: https://davidwalsh.name/javascript-zip

How to locate all images in a directory using jQuery

I'm developing an application which runs on a localhost server.! In this application I do ajax calls and get items from a local h2 DB! Using the response I create dynamic elements using jQuery. The elements use an item image as background and the requirement is that I should get the images from a local folder. ( The folder is created when the server is first started and the images are synchronized from a main server over the intranet. ) The folder hierarchy is shown below.
c:/----
|
zharaimages/ -----
|
[item id]/-----
|
[image].jpg
The image can contain any name for it but will be a jpg. How can I read the file system using jQuery to get the necessary image file when the item is dynamically loaded. I thought of this method but for that I can only read a file with a static name. I want to write a method where the image name can be anything.
clone.css('background-image','c:/zharaimages/' + items[i].itemId + '/image.jpg');
Any ideas or plugins are welcome.
Thank you.
update
This is a deployable application which uses an embedded jetty server. The folders are in the same computer as the application is!
Unfortunately a big NOOOOOO...
javaScripts cannot read or write files on users' computers (File API - not currently supported by many browsers - allows files to be read by scripts if the user specifically chooses to allow it),
though they can cause the browser to load remote pages and resources like scripts or images, which the browser may choose to cache locally.
They cannot create files on the server (except by communicating with a server side script that creates files for them).
You have to make a server request(many ways...) for the resources.
I'm not sure weather its possible with HTML5 or not
jQuery runs on the browser.
The files are on the server.
The only way that jQuery can read the files on the server is if it makes an AJAX call to the server, and your web server enumerates them.

HTML5 Synchronization Between User and Server

I am trying to create a HTML5 app that will allow an user to automatically upload files from a user's computer to my server (similar to Dropbox for Windows where file transfers are updated between computer and server in the background).
The user will have around 100+ .csv files in a single folder. The HTML5 app will ask the user to select the folder. Afterwards, the files will be uploaded to the server in the background.
Is this possible in HTML5 using WebSockets or FileStream? Any advice will be appreciated! Thanks.
You can achieve this by using JWebSocket framework.Visit https://jwebsocket.org/. it has got lot of plug-ins and one such plug-in is FileUpload plug-in.http://enapso.org/jwsForum219/posts/list/59.page.Hope this will help you.

Categories

Resources