I'm creating a website and I'd like to allow users to upload multiple files while they navigate the website.
When the upload completes, it would be nice to have a Javascipt event triggered, to allow the user to specify additional info related to the uploaded files (eg. photo location, tags, etc)
anyway, the required features are:
multiple files allowed for a single upload operation
display an optional progress indicator (at least in the "x of y files uploaded" fashion)
doing it without tying the users to a single page
How can I implement these features?
Any suggestion is greatly appreciated!
Edit
In the event of using a popup window to handle uploads, how can I:
inform the user (on the "master" page) that the upload has completed, or that there have been errors?
(more important) pass the $_FILES array to the popup window? I'd like the user to be able to click "upload" on the main window, or anyway to make the upload start from the main window (eg dragging and dropping files on the main window).
Since navigating the site will switch pages and it's unlikely that there's a full ajax navigation on your site, maybe it could help to somehow upload the files in a second popup window. Not sure how (if) it could be implemented, though, but since you need to upload multiple files at a time I'm afraid you're bound to use flash.
EDIT
So the solution could look like this:
When a user clicks a "select files" button you pop out a new window where he'll be able to actually select files (via flash if multifile upload is necessary). And to notify of upload progress use postMessage. Though postMessage isn't going to work in IE in this case, but probably you could somehow send the message to the server and from the server back to the page.
Another crazy idea is not to use a popup window, but let the user select the files on the page she was first, but once the user selects the files make all the links on the page target=_blank to make any subsequent navigation happen in another tab. I know it's hacky and not exactly user-friendly, but probably could help.
In any case I would inform the user beforehand that a new window will appear in both scenarios.
EDIT2
And an even crazier idea. When the user selects the files and clicks a link create an iframe which will cover the whole page and hide the original page beneath it and make the links open in the iframe. But it looks even more hackish and it seems you'll have much trouble with it.
Related
I have looked a for a way of allowing a user to click a button that will allow them to save an image or pdf of the current page. The page always chnages and relys on user input, based on this , sequences are returned , colored in different ways. So any way that will allow the user to take a screenshot and download it or save page as image , via a button or link. Can anyone help??
That's not a just like "add the button", you'll need many lines of code on the server-side if you'll decide to do it on your own.
If you really want to add the button only, I'd suggest to use AddThis for this task, it offers hundreds of possibilites, also online PDF generating, sharing by e-mail, support for social network sites, etc etc
I have pages with photo thumbnails, let's say the script is thumbnails.php. Each icon has a link to popup.php?id=nnn that opens in a pop-up window to display a larger image and some info.
I don't want a user going directly to domain.com/popup.php?id=nnn to get the popup small content in a whole window or tab.
So this script first checks if the referrer is the page containing the thumbnails.
If not, descrption.php?id=nnn is opened. This page is designed to fit a regular screen with extended info.
I did in this way mainly thinking in web crawlers.
Is this a good practice?
Many projects that I have worked on over the last 18 months have gone away from opening new windows or tabs altogether. Instead they use the Jquery Dialog (modal mode) to display images, html descriptions, or other attribute information.
This allows the user to stay on the same page without the risk of causing them to bounce if they accidentally close the wrong window or tab, or they just forget to go back to your site via the original window.
I need help writing javascript (jquery?) for a web app to save a set of images to an IndexedDB and then load them into an html page.
I have two html pages, img.html that is just a listing of images in this format:
'image-id','base64-image'
and index.html, my main page that includes a series of image tags in this format:
<img name="imglist" id="image-id" img-src="">
I'd like the user to be able to click a button to load all of the images from img.html into IndexedDB and then click another button to read the images from IndexedDB and insert them into the appropriate image tag in index.html (the 'image-id' in img.html corresponds to the appropriate img tag id in index.html).
Also, is it possible to set a cookie (or some other method) that will cause the DB to be erased after a certain time period? I'd like to be able to force the user to re-load the images from the server about once a week.
I'm not great with javascript or indexeddb, so any help or examples would be great.
See the article titled Storing images and files in IndexedDB.
N.B. I just posted a similar question here, though it concerns the particular case of a cross-site request. If your requests are on the same site, the link above should be a perfect example for you to work by.
I have a classifieds website, and when posting a new ad, users may chose to upload pictures.
Currently, the form on the page submits to itself whenever a file is chosen, and then PHP uploads the actual file, which is then lastly displayed to the user.
I use javascript to set some hidden-inputs on the page, and then submit the form to itself:
if (action!='remove'){
document.getElementById("pic_nr").value=nr;
document.getElementById("total_pics").value=nr;
document.getElementById("pic_action").value='upload';
var form = document.forms['ad'];
form.action='new_ad.php';
form.submit();
}
Then in PHP, it processes and uploads the image (which takes some time) and after its done the image is displayed in the same form.
Now I need to have a progress bar of some kind, which shows the user that the server is actually DOING something.
Because uploading a standard 2,5MB file from a digital-camera takes some time (around 10s), and usually the user doesn't understand that "something is happening" in the background.
Is there any standard reliable, cross-browser solution to add a loading bar with either JS or PHP, or even maybe both combined?
Any tips and ideas are appreciated.
Thanks
This site seems to have a pretty comprehensive list of tutorials with various approaches. JQuery to me would seem to be the best option to go with as it usually is pretty reliable between browsers and platforms.
you could POST the form using AJAX and on firing the form POST load a "loading" spinner on the page until you get a postback with a status from the server.
I'm adding a link to a sample HTML5 script that does it with drag-n-drop...
http://craigslist.fatherstorm.com/dragndrop.php
I have a search page.
On clicking search it will show a jquery modal with processing image and redirect to results page.
I have download functionality also in the search page. If I select the download option,
the result may vary to 1 kb to 25 MB, and I can't put a timer to close the modal window.
Is there any way to find the download is prompted?
Or download is completed? So that I can close modal at that time!!
Just make a popup that disappears when the user click anywhere else, like on github.
It would probably be too much job doing what you requests that it is not worth it. Better just showing a dialog that the user can dismiss whenever s/he wants to.
Well, yes it would be possible to have a script that runs while the file is being served (PHP normally times out within 30sec) and have periodically AJAX-requests to see if download is completed (or aborted).