Drag and drop using HTML5 - javascript

I am working on HTML5 & I am a newbie in it.
I am working on a program which does the following :
I want to drag & drop files on a button.
User will be able to see all drag dropped files.
There needs to be a button to upload files.
After uploading, a progress bar should pop up on which there will be cancel upload & skip (if dont want to upload specific file) button.
Kindly let me know how can I do the same.
Thanks in advance.

if you know a little jQuery you can use jQuery UI droppable/dragable : http://jqueryui.com/demos/droppable/

Here are pretty simple examples for everything you asked : files from input tag, files from drag&drop, printing files names and showing a progress bar. I enjoy that website that makes it easy with the 'new' html5 features.

Related

CSS - Sliding in text

I have a website an I am trying to replicate the 'sliding in' of text as shown here:
https://tictail.com/
When the user starts to scroll, the text on that page slides in from the left.
I've tried taking a look at the JavaScript files that are being loaded but no use.
My application is using AngularJS, so it would be nice to stick with this librabry, rather than having to us jQuery and jQuery ui.
Thanks
Ended up using this plugin.
Is really easy to import, just a CSS file and .js file.
http://jackonthe.net/css3animateit/

Basic Tiny MCE File Manager

I need a super-simple file manager (preferably in classic asp but not a deal breaker) that I can add to Tiny MCE v3.
It doesn't need to upload, show images or other media, just documents such as .pdf, .doc, etc.
I just need to allow the user to click a browse button beside a the link input box which will open the file browser window to the specified folder (always the same one), click the required file, the details of which will populate the input box.
I've seen a few as recommended elsewhere on Stack but these are either image/media only or I'm not bright enough to make them work properly.
Thanks in advance.
I forgot to update this question.
I found a TinyMCE/CKEditor plugin that really did the trick. It's called (surprisingly) PDW File Browser for TinyMCE and CKEditor and can be found at http://sourceforge.net/projects/pdwfilebrowser/.
It has a good range of different features and is really easy to modify (it has to be because it's me doing the modifications).
Definitely worth checking out.

blueimp multiple file uploader

I'm using the blueimp multiple file uploader and everything is working great. However in some cases i have to use a single file upload. Is there a option of some sort that i can trigger to disable the multifile part of the plugin?
It is important that the flow doesnt change. So that i can keep using it but just easily can disable multiple files.
I do want to mention that i dont want to give an error if the maxx file number is exceeded. I just want to disable multiple files all together.
Any help would be greatly appreciated.
That’s easy, just remove the multiple attribute on the input element.

Adding Uploading/Scanning screen to website

i am currently trying to add a uploading/scanning screen to my file upload site, (just to be clear i need the 'design' part of it, like actually displaying the box not anything to do with the scanners, or implementing the scanners, just a box that says scanning with a scanning gif next to it). Pretty much my site allows people to upload files which scans them and then displays the result. All the scanners are up and working but i am trying to add this scanning page. I want it to look a bit like this when you upload a file - www.virustotal.com
How would I be able to do this? You don't have to be very specific just like what programming languages, or any examples of code, to help me, i don't really know where to start.
Sounds like you are looking for a modal overlay or dialog.
There are tons of libraries out there that can do this, including YUI and JQuery UI/Plugins.
See my question.

Trigger Show event of file upload dialog

i want to show file upload dialog on click of a button thats not the part of input[type="file"] how can i do this?
Basically i want to stylize the file upload control of html.
Alternate way to style file inputs using JavaScript but no Flash:
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
I'm pretty sure there is no way to do this for security reasons.
You may be able to do it using a Flash-based uploader like SWFUpload. It obviously needs Flash installed and functions in a slightly different way than normal file uploads.
two days ago i was dealing with the same thing. I spotted uploadify
it allows you to have custom button for upload and ability to style your progress bar. it makes an ajax call to a php script. it also has loads of options from restricting file types/sizes/etc.
pretty happy i found it. same as pekka said this one also uses a flash gateway to do this.
document.formname.file.click() works but not in Opera i am still searching the net to solve.

Categories

Resources