Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

drop-component

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

drop-component - npm Package Compare versions

Comparing version
0.0.1
 to
0.1.0
+34
example.html
<html>
<head>
<title>Drop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
padding: 50px;
}
#drop {
width: 300px;
height: 300px;
border: 1px dotted #ddd;
}
#drop.over {
border: 3px dotted #ddd;
}
</style>
</head>
<body>
<div id="drop"></div>
<script src="build/build.js"></script>
<script>
var drop = require('drop');
var el = document.querySelector('#drop');
drop(el, function(e){
var items = e.items;
items.forEach(function(item){
console.log(item);
});
});
</script>
</body>
</html>
+3
-2
component.json

@@ -5,3 +5,3 @@ {

"description": "drag and drop uploads with a single event per drop",
"version": "0.0.1",
"version": "0.1.0",
"keywords": [

@@ -15,3 +15,4 @@ "drag",

"component/classes": "*",
"component/events": "*"
"component/events": "*",
"component/normalized-upload": "0.0.1"
},

@@ -18,0 +19,0 @@ "development": {},

+5
-0
History.md
0.1.0 / 2013-04-26
==================
* refactor with normalized-upload module
0.0.1 / 2013-04-25

@@ -3,0 +8,0 @@ ==================

+26
-146
index.js

@@ -6,4 +6,5 @@

var classes = require('classes')
var events = require('events')
var normalize = require('normalized-upload');
var classes = require('classes');
var events = require('events');

@@ -14,3 +15,3 @@ /**

module.exports = Drop
module.exports = Drop;

@@ -27,11 +28,11 @@ /**

function Drop(el, fn) {
if (!(this instanceof Drop)) return new Drop(el, fn)
this.el = el
this.callback = fn
this.classes = classes(el)
this.events = events(el, this)
this.events.bind('drop')
this.events.bind('dragenter')
this.events.bind('dragleave')
this.events.bind('dragover')
if (!(this instanceof Drop)) return new Drop(el, fn);
this.el = el;
this.callback = fn;
this.classes = classes(el);
this.events = events(el, this);
this.events.bind('drop');
this.events.bind('dragenter');
this.events.bind('dragleave');
this.events.bind('dragover');
}

@@ -46,4 +47,4 @@

Drop.prototype.unbind = function(){
this.events.unbind()
}
this.events.unbind();
};

@@ -55,4 +56,4 @@ /**

Drop.prototype.ondragenter = function(e){
this.classes.add('over')
}
this.classes.add('over');
};

@@ -64,4 +65,4 @@ /**

Drop.prototype.ondragover = function(e){
e.preventDefault()
}
e.preventDefault();
};

@@ -73,4 +74,4 @@ /**

Drop.prototype.ondragleave = function(e){
this.classes.remove('over')
}
this.classes.remove('over');
};

@@ -82,128 +83,7 @@ /**

Drop.prototype.ondrop = function(e){
e.stopPropagation()
e.preventDefault()
this.classes.remove('over')
this.prepare(e, this.callback)
}
e.stopPropagation();
e.preventDefault();
this.classes.remove('over');
normalize(e, this.callback);
};
/**
* Prepare the event for callback.
*
* @param {Event} e
* @param {Function} fn
* @api private
*/
Drop.prototype.prepare = function(e, fn){
e.items = []
var items = e.dataTransfer.items
this.items(e, items, function(){ fn(e) })
}
/**
* Process `items`.
*
* @param {Event} e
* @param {Array} items
* @param {Function} fn
* @return {Type}
* @api private
*/
Drop.prototype.items = function(e, items, fn){
var pending = items.length
for (var i = 0; i < items.length; i++) {
var item = items[i]
// directories
if ('file' == item.kind && item.webkitGetAsEntry) {
var entry = item.webkitGetAsEntry()
if (entry.isDirectory) {
this.walk(e, entry, function(){
--pending || fn(e)
})
continue
}
}
// files
if ('file' == item.kind) {
var file = item.getAsFile()
file.kind = 'file'
e.items.push(file)
--pending || fn(e)
continue
}
// others
(function(){
var type = item.type;
var kind = item.kind;
item.getAsString(function(str){
e.items.push({
kind: kind,
type: type,
string: str
})
--pending || fn(e)
})
})()
}
}
/**
* Walk `entry`.
*
* @param {Event} e
* @param {FileEntry} entry
* @param {Function} fn
* @api private
*/
Drop.prototype.walk = function(e, entry, fn){
var self = this
if (entry.isFile) {
return entry.file(function(file){
file.entry = entry
file.kind = 'file'
e.items.push(file)
fn()
})
}
if (entry.isDirectory) {
var dir = entry.createReader()
dir.readEntries(function(entries){
entries = filterHidden(entries)
var pending = entries.length
for (var i = 0; i < entries.length; i++) {
self.walk(e, entries[i], function(){
--pending || fn()
})
}
})
}
}
/**
* Filter hidden entries.
*
* @param {Array} entries
* @return {Array}
* @api private
*/
function filterHidden(entries) {
var arr = []
for (var i = 0; i < entries.length; i++) {
if ('.' == entries[i].name[0]) continue
arr.push(entries[i])
}
return arr
}
+3
-2
package.json
{
"name": "drop-component",
"description": "drag and drop file uploading with a single drop event",
"version": "0.0.1",
"version": "0.1.0",
"keywords": ["upload", "file"],
"dependencies": {
"classes-component": "*",
"events-component-2": "*"
"events-component-2": "*",
"normalized-upload": "0.0.1"
},

@@ -10,0 +11,0 @@ "component": {

+24
-0
Readme.md

@@ -19,2 +19,5 @@ # Drop

The `e.items` array contains `File` objects for file uploads,
and regular objects for string related drops.
```js

@@ -32,2 +35,23 @@ var drop = require('drop')

### File
Dropping files results in `File` objects with the following properties. When
file(s) are uploaded via dropping a directory the `.entry` property is populated
which allows you to reference `item.entry.fullPath`.
- `kind` "file"
- `lastModifiedDate`
- `name` filename
- `size` file size
- `type` mime type
- `entry` `FileEntry` object
### Item
Dropping strings or urls results in objects with the following properties:
- `kind` "string"
- `type` mime type
- `string` value
# License

@@ -34,0 +58,0 @@ 

-34
test/tests.html
<html>
<head>
<title>Drop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
body {
padding: 50px;
}
#drop {
width: 300px;
height: 300px;
border: 1px dotted #ddd;
}
#drop.over {
border: 3px dotted #ddd;
}
</style>
</head>
<body>
<div id="drop"></div>
<script src="build/build.js"></script>
<script>
var drop = require('drop');
var el = document.querySelector('#drop');
drop(el, function(e){
var items = e.items;
items.forEach(function(item){
console.log(item);
});
});
</script>
</body>
</html>