file upload using drag drop - javascript

I want to upload and download files using drag n drop between user computer and web browser. How can I do it ASP.NET/AJAX or JS/JQuery?

Take a look at plupload

Also see http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

Related

tinymce - image/file upload default to images

I have copied the image plugin to customize it upload video, which is working fine.
but when I select upload - it defaults to selection of image files, I tried searching everywhere, but couldn't find,how I can change this to type mp4 or of type video files.
TinyMCE has the Media plugin which allows you to natively upload video and audio files. It should work without any customizations to the Image plugin, thus - safer. However, to be able to upload something other than images, you will need to add a file_picker_callback that will handle uploads.

HTML input file capture=camera for multiple files

I'm trying to make a mobile web application (both for IOS and Android) that lets the user upload some pictures, either by choosing them from the library or by taking them with the device camera.
I'm using this input <input type="file" accept="image/*" capture="camera" multiple>. It works great, it opens the camera and it lets me choose to use the photo or to try again, but the multiple attribute doesn't work. I can only take one photo per time.
Am i missing something? Maybe the multiple attribute is not supported?
Just remove,
capture="camera"
then it will open on gallery directly and allow multiple selection.
I think it actually is impossible to take multiple pictures with the camera this way before uploading, and that it's only possible to upload multiples with the file browser.
You will need to use JavaScript and the MediaStream functionality, pretty much writing a quick camera app yourself. It works but there are a few pitfalls with how manufacturers report sensors etc.

Dropzone.js no longer uploading multiple imgs to website on Android

Up until about a couple weeks ago, my web app was working great on desktop and mobile, using dropzone.js as a drag and drop means of uploading images. Now suddenly on my Android device things have changed.
When it was working:
Member hit the upload button and was prompted to select which app to use to select the images for upload. Typically default app was "Gallery" which doesn't allow for multiple selections, but when Google Photos was selected, multiple images could be selected and all images selected would upload. With a tool tip I was able to advise users on Android to use Google Photos vice Gallery.
Now
Same scenario, including being able to select multiple images to upload. However, when the "Done" button is pressed to initiate the upload, only the first image selected uploads.
Multiple uploads work as expected on desktop and iOS but for whatever reason something has changed with Android and/or Google Photos that for the life of me I can't figure out.
fiddle
For those of you willing to take the time to help out, please try it on both your desk top and Android device to see the difference in behavior.
Also note that the .js included with the fiddle is for reference only and is being driven by the same file externally.
Please note the above fiddle doesn't actually upload the images anywhere, but it is the exact behavior I am having issues with. The upload part of the script and db management is separate from this issue.
The actual structure when all located together is to have the following script:
<script src="js/dropzone.js"></script>
Thanks
Here is what I tried
I've updated a bit the code.
https://jsfiddle.net/_jserodio/dgq50zc3/10/
Here is what I tested
In Android 5.0 it works with Google Chrome.
But It didn't work with Firefox and/or Lightning browser.
It's not supported for Android 4.x and bellow
http://caniuse.com/#feat=input-file-multiple

Html file upload file with drag and drop support

I would like to create a file-upload field where users can just drag and drop a file onto a certain area in the browser window.
Does this work with all modern browsers?
thanks!
I found this plugin quite nice:
http://valums.com/ajax-upload/
The page has a live demo where you can drag and drop a file that gets uploaded.
Unfortunately, it only works in Chrome and Firefox, other browsers have to press a button!

Image uploading that doesn't fail

Is there a plugin out there that will take an image that is uploaded and resize it to a smaller size so it doesn't fail in the upload process. Basically I have a need for an avatar and the users are uploading various images that are huge from their digital cameras and they tend to be about 2mb or bigger which causes the script to fail... Is there a jQuery plugin that can help me out? I kind of want if to work like the Facebook uploader where it doesn't fail. Any ideas?
By the way this a ColdFusion script, but my expertise is not in ColdFusion so I was hoping jQuery could help.
Javascript cannot resize images. For that you'll need Flash or java.
Flash upload image resize client side
Or you could do it in PHP and use GD to resize images. Don't need active x or flash or anything else but notepad and a php enabled server.
There are some JS scripts that do this for you, but they usually use Flash in the background to do the resizing.
Checkout SwfUpload or PlUpload.
As mentioned you can't resize images client-side.
I've successfully used IglooLabs jquery Plugin (http://www.igloolab.com/jquery-html5-uploader/).
I edited their plugin to do client-side file size (<2MB) and type (jpg, png etc) checks before allowing upload. I can provide edited plugin if you want...
On Upload to the server you can then do an image resize using two lines of code e.g.
<cfimage action="resize" height="" width="750" source="/img/image_to_resize.png" destination="img/resized.png" overwrite="yes" name="resized_image">
(Be warned thought that ColdFusion has a bug resizing some jpeg images. Best to convert to .png first)

Categories