https://github.com/kosso/mediadrop
Provides a simple interface to drag and drop a single image, audio or video file onto the browser and read the information from it and providing the data for uploading somewhere. Also provides audio waveform and video thumbnail capability.
https://github.com/kosso/mediadrop
audio drag-and-drop html5 image thumbnail video waveform
Last synced: 4 months ago
JSON representation
Provides a simple interface to drag and drop a single image, audio or video file onto the browser and read the information from it and providing the data for uploading somewhere. Also provides audio waveform and video thumbnail capability.
- Host: GitHub
- URL: https://github.com/kosso/mediadrop
- Owner: kosso
- Created: 2016-12-05T18:53:06.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-05T22:21:51.000Z (over 9 years ago)
- Last Synced: 2025-04-07T23:47:08.952Z (about 1 year ago)
- Topics: audio, drag-and-drop, html5, image, thumbnail, video, waveform
- Language: HTML
- Homepage: https://kosso.github.io/demos/media_drop/index.html
- Size: 8.79 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MediaDrop
A simple example HTML + JS file which provides an interface to drag and drop a single **image, audio or video** file onto the browser and read the relevant information from it (filesize, dimensions, duration) and provide the data for uploading somewhere (eg: via XHR). Also provides audio waveform and video thumbnail capability for those file types.
***No JavaScript dependencies.***
Supports : (most) `jpg`, `gif`, `png`, `mp3`, `wav`, `m4a`, `ogg`, `mp4`, `m4v` and `avi` files.
#### [DEMO](https://kosso.github.io/demos/media_drop/index.html)
- Image files do nothing but ready the file info for whatever you need.
- Audio files will automatically create an audio waveform PNG file.
- Video files allow the user to to choose a frame and create a thumbnail image.
------
Author : @kosso : December 2016
License : Attribution 3.0 Unported (CC BY 3.0) : https://creativecommons.org/licenses/by/3.0/