0
votes

I have downloaded dropzone.js (saved in my /js folder), dropzone.css (saved in my /css folder) and the two supplied images (saved in my /images folder).

Using both of these tutorials (http://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php && http://maxoffsky.com/code-blog/howto-ajax-multiple-file-upload-in-laravel/) I have tried to make the most basic dropzone...

The relevant contents of my html file are as follows:

<script src="js/dropzone.js"></script>
<link media="all" type="text/css" rel="stylesheet" href="css/dropzone.css">
// Other html code
<form action="api/v1/upload" class="dropzone"></form>

My api upload method is then: (this code has been taken from the tutorial above as I am using Laravel)

$file = Input::file('file');
$destinationPath = 'tmp/'.str_random(8);
$filename = $file->getClientOriginalName();
$upload_success = Input::file('file')->move($destinationPath, $filename);

if( $upload_success ) {
    return Response::json('success', 200);
} else {
    return Response::json('error', 400);
}

However, when I use this code, I have the following issues:

  • The dropzone does not have the default text that the demonstration one does.
  • When I drag a photo in, it does upload it and save it to my tmp folder (so I know it is calling the correct method) but does not show a green success arrow as it does in the demo
  • Once uploaded, I do not get a button below the image allowing me to remove it

I have been through the documentation, but from what I can tell, these items should 'work out of the box'. Are these bugs I am experiencing, or are they settings I have failed to implement?

Many thanks

EDIT:

I have now sorted problem 3 - I didnt realise but this is an option that needed to be set. For those who have found this question, use the following script:

Dropzone.options.dropzone = {
    addRemoveLinks: true,
};
1
have you done this " if you want it to look as cool as my dropzone, you'll need to download the css/dropzone.css, images/spritemap.png and images/[email protected] as well from the downloads folder." - Trying Tobemyself
The demonstration page uses font-family:"brandon-grotesque",helvetica,sans-serif are you also using it? - Trying Tobemyself

1 Answers

0
votes

The addRemoveLinks does not take true/false values. Instead you can set it to the following three options:

dictCancelUpload, dictCancelUploadConfirmation and dictRemoveFile

Your code must look like this

Dropzone.options.dropzone = {
    addRemoveLinks: "dictRemoveFile",
};