quagler's avatar

dropzone.js not uploading image

I'm using dropzone.js. When I remove the following JS code, it uploads the image no problem, but if I keep the JS code there (which I need), it returns the following error, even though I selected an image to upload:

{"success":"false","errors":{"file":["The file must be an image."]}}

JS code:

Dropzone.options.formNewPost = {
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    maxFilesize: 3,
    dictDefaultMessage: "",
    previewsContainer: ".dropzone-previews",
    thumbnailWidth: 50,
    thumbnailHeight: 50,
    clickable: "form#form-new-post #image",

    init: function() {
        var myDropzone = this;
        var form = $("form#form-new-post");

        this.element.querySelector('button[type="submit"]').addEventListener("click", function(e)
        {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });
    }
}

HTML code:

<form action="{{ url('create/post')}}" class="dropzone" id="form-new-post">
    <div id="message" class="form-group">
        {{ Form::textarea('message', null, array('class' => 'form-control', 'placeholder' => 'Type your message...')) }}
        <ul class="post-extras">
            <li id="link">Link</li>
            <li id="image">Image</li>
        </ul>
        <div class="form-error"></div>
        <div class="dropzone-previews"></div>
    </div>
    <div class="form-group form-button">
        <div class="pull-right">
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
        <div class="clearfix"></div>
    </div>
</form>

Laravel code:

public function createPost()
{
    $rules = array(
        'message' => 'required',
        'file' => 'image|max:3000',
    );

    $validator = Validator::make(Input::all(), $rules);

    if ($validator->fails())
    {
        return Response::json(array(
            'success' => 'false',
            'errors' => $validator->messages()
        ), 400);
    }
    else
    {
        $file = Input::file('file');

        if ($file)
        {
            $extension = $file->getClientOriginalExtension();
            $destinationPath = public_path() . '/uploads';
            $filename = str_random(12);

            $upload_success = Input::file('file')->move($destinationPath, $filename . '.' . $extension);

            if (!$upload_success)
            {
                return Response::json(array(
                    'success' => 'false',
                ), 400);
            }
        }

        return Response::json(array(
            'success' => 'true'
        ));
    }
}

Why does it work without the JS code but not with it?

0 likes
4 replies
quagler's avatar

I just removed uploadMultiple from the JS, and it uploads fine, but the problem is, I can't upload multiple files now. What can I do?

lancebutler2's avatar

i would be interested to know what the output of

dd($file)

Is it an array of files? If so, instead of if($file), you're probably looking for something like foreach($files as $file)....assuming $files = \Input::get('file'); returns an array of files.

davidfaux's avatar

As @lancebutler2 has noted you'll be receiving an array of files in the post so you'll need to loop through them all

NoorDeen's avatar

you did not add

<form enctype="multipart/form-data">

to handle files

Please or to participate in this conversation.