Drag n Drop File Upload using dropzone.js and Codeigniter

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.

upload - dropzone.js

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 :

files - dropzone.js

13 thoughts on “Drag n Drop File Upload using dropzone.js and Codeigniter

      1. Lykos

        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

        Reply
  1. Ivonne

    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!

    Reply
    1. Saeed Pourali Post author

      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,…

      Reply
  2. Sai Palavalli

    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.

    Reply
  3. Dharampal

    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.

    Reply
  4. sindhuja

    i used ur dropzone code its really great. thank u sir.. but after upload image ,i need window should refresh automatically.. please help me..

    Reply
  5. sindhuja

    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..

    Reply
  6. Dzulfikar

    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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *