Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a demo on how to use dropzone #11

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add a demo on how to use dropzone #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
db4737d
Add a demo on how to use dropzone
May 10, 2016
0bb106f
Update upload image script to better implementation
Jun 1, 2016
6bdb70c
Set file as second parameter of emit thumbnail
Jun 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions javascript/dropzone/demo/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
bower_components
!.gitignore
34 changes: 34 additions & 0 deletions javascript/dropzone/demo/UploadImage.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// This is just an example, change it to your specific needs
// This example is intended for images

<?php

namespace Frontend\Modules\Blog\Ajax;

use Frontend\Core\Engine\Base\AjaxAction;
use Frontend\Core\Engine\Model as FrontendModel;

class UploadImage extends AjaxAction
{
public function execute()
{
$files = array_map(
function ($file) {
$filename = md5(uniqid() . time()) . '.' . $file->getClientOriginalExtension();
$file->move(
FRONTEND_FILES_PATH . '/Profiles/acquisitions/source',
$filename
);
Model::generateThumbnails(
FRONTEND_FILES_PATH . '/Profiles/acquisitions/',
FRONTEND_FILES_PATH . '/Profiles/acquisitions/source/' . $filename
);

return $filename;
},
$this->get('request')->files->all()
);

$this->output(self::OK, $files);
}
}
19 changes: 19 additions & 0 deletions javascript/dropzone/demo/bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"name": "dropzone",
"homepage": "https://github.com/sumocoders/snippets",
"authors": [
"Mathias Helin <[email protected]>"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
17 changes: 17 additions & 0 deletions javascript/dropzone/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bower_components/dropzone/dist/basic.css">
<link rel="stylesheet" href="bower_components/dropzone/dist/dropzone.css">
</head>
<body>

<div id="dropzone">
<form id="my-awesome-dropzone" action="/target" class="dropzone"></form>
</div>

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="bower_components/dropzone/dist/dropzone.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
55 changes: 55 additions & 0 deletions javascript/dropzone/demo/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
(function() {

// Example of existing files
var item = {
"images": [{
"name": "image1",
"url": 'http://placehold.it/200x200',
"filesize": 1234
},
{
"name": "image2",
"url": 'http://placehold.it/400x400',
"filesize": 4346
}]
};

// Disable autodiscover
Dropzone.autoDiscover = false;
var $dropzone = $('.dropzone');
$dropzone.dropzone({
url: '/frontend/ajax',
params: {
'fork[module]': 'module',
'fork[action]': 'action'
},
uploadMultiple: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

das toch de default?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nee

addRemoveLinks: true,
// maxfiles can be set if needed
maxfiles: 3,
// Comma separated list of accepted file types
acceptedFiles: 'image/*, application/pdf',
// Set some events at init
init: function() {
var dropzone = this;

// example of how to show existing items
$.each(item.images, function(index, image) {
console.log(image);
var realfile = {name: image.name, size: image.filesize, accepted: true};
dropzone.emit('addedfile', realfile);
dropzone.emit('thumbnail', realfile, image.url);
dropzone.emit('complete', realfile);
// push this to the list so dropzone knows how many images are already uploaded
dropzone.files.push(realfile);
});

// example to block the upload if maxfiles is reached
dropzone.on('maxfilesexceeded', function(file) {
dropzone.removeFile(file);
$dropzone.find('.dz-max-files-exceeded').fadeIn('slow').delay(3000).fadeOut('slow');
});
}
});

})();