dropzone.js is an open source javascript library that you can easily use it for make a nice drag and drop or your web site.
In the official web page of dropzone.js you can find a good explanation and list of tutorials. For PHP developers, there is a nice Complete PHP tutorial by startutorial.com
and Tutorial for Dropzone and Lavarel (PHP) written by Maksim Surguy.
In this tutorial I am showing how you can instal and use and enjoy dropzone.js library with your Codeigniter framework.
based on the plugin docs: Dropzone.js works in :
- Chrome 7+
- Firefox 4+
- IE 10+
- Opera 12+ (Currently disabled for MacOS because their API is buggy)
- Safari 5+
For all the other browsers, dropzone provides an oldschool file input fallback.
1. Download and Upload dropzone.js sources
All you need is a Download folder in github. Download it, rename it to dropzone and put in the assets (or public) directory.
2. make a folder for uploaded files in public directory. as
/public/assets/upload/
3. Make a controller dropzone as
class Dropzone extends CI_Controller {
public function index()
{
$this->load->view('dropzone-view');
}
}
4. make a dropzone-view for this controller.
5 . reference the dropzone in the dropzone-view file
<link href="/assets/dropzone/css/dropzone.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/assets/dropzone/dropzone.js"></script>
6. add form in the body as
<form class="dropzone" action="/dropzone/upload"></form>
then dropzone-view should be like
<html> <head> <link href="/assets/dropzone/css/dropzone.css" type="text/css" rel="stylesheet" /> <script src="/assets/dropzone/dropzone.js"></script> </head> <body> <form action="/dropzone/upload" class="dropzone" ></form> </body> </html>
7. add upload method in dropzone controller as
function upload()
{
if (!empty($_FILES))
{
$tempFile = $_FILES['file']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . '/uploads/';
$targetFile = $targetPath . $_FILES['file']['name'];
move_uploaded_file($tempFile, $targetFile);
// save data in database (if you like!)
}
}
and it is done.
your files should be like :
Hi! I viewed your tutorial and no worked for me, no upload ¿Why?
Please, help me ¡Thanks!
Hi Ivonne, you should provide me the error message. it can be anything.
I have the same problem as Ivonne, no uploads made and I don’t get any error! I did echo ” . print_r($_FILES, true) . ”; inside the controller but the $_FILES seems empty
Hello Saeed, works great but now I want to resize the images using some of the libraries own codeigniter. How I can do this? Please, help me ¡Thanks!
I don’t know what are you going to use … but you have a $_FILES in your controller and you can play with it as you want. resize, re-create, make different sizes,…
If I print_r($_Files) in the controller, I get array() but all of the files get uploaded to the destination folder. Thoughts?
it handles multiple uploads,
but often misses some of the files.
any one noticed that?
Do you have a JEE (Spring MVC) example by any chance? I am having trouble in uploading the files to the server side. I get the message “Server responded with 405 code”. Server logs tell me the “java.lang.IllegalArgumentException: No input byte array specified] with root cause”. Ideally my html code is below:
View you Submission
And serve side i have a controller which retrieves the values from the form bean “fileUploadForm” which is mapped to FileUploadForm.java and has below params:
private String fileName;
private String fileSize;
private String fileType;
private byte[] bytes;
Eventually the issue is the “fileUploadForm” is never populated from the UI on drag and drop of the files into the HTML. However the server call is made on the drag and drop.
Any idea if you have come across JEE side issues? Please share if so.
regards,
Sai.
my code is like following but not working, Please Help:
form page code:
function dropzone(){
var res = jQuery.parseJSON(jQuery.ajax({
type:’POST’,
url:’/dropzone_fileupload’,
data:{},
async:false
}).responseText);
}
remaing code is same as your download pack.
How can i save in database . Please help me
i used ur dropzone code its really great. thank u sir.. but after upload image ,i need window should refresh automatically.. please help me..
i used ur dropzone code its really great. thank u sir.. but after upload image ,i need window should refresh automatically,where i need to add refresh code?.. please help me..
Hai dude, i think I got error on the view, it shows nothing even I used the code from your download link.
Please help 🙂
thanks