Call Laravel function from javascript/Ajax - Dropzone.js & Laravel

Question

Hi I have a form which is using dropzone.js as below,

<form method="post" action="{{url('/example/fileupload')}}" enctype="multipart/form-data" class="dropzone" id="dropzone">

        @csrf

        <input type="submit">

    </form>

I am using below code to configure dropzone.js

<script type="text/javascript">
        Dropzone.options.dropzone =
         {
            maxFilesize: 12,
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 5000

};
</script>

Its working on front-end means it shows images uploading in just dropzone view. I want to ask how can I call my laravel controller function from here. That function has all the logic for renaming the image files and saving it in database. The function (named fileupload) should be called after I click the submit button. I have already created the routes as below,

//just output the view with dropzone area
    Route::get('/example','exampleController@show'); 

 //fileupload function contains all the logic of renaming and saving image iles
    Route::post('/example/fileupload','exampleController@fileupload');

Imran Khan · Accepted Answer · 2020-04-29 13:13:33Z

0

Dropzone will automatically call your form action as soon as files are dropped at the dropzone. You do not need a submit button to submit the files to a server. You can verify this by opening Chrome browser DOM inspector and go to Network tab then drop files on the dropzone you will see some requests in the network tab. Your form may look like this.

<form method="post" action="{{url('/example/fileupload')}}" enctype="multipart/form-data" 
                  class="dropzone" id="dropzone">
    @csrf
</form>

You can rename files before sending to the server but it is not required.

<script type="text/javascript">
        Dropzone.options.dropzone =
         {
            maxFilesize: 12,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
               return time+file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 5000,
            success: function(file, response) 
            {
                console.log(response);
            },
            error: function(file, response)
            {
               return false;
            }
};
</script>

On the server side you can store files like below.

use App\ImageUpload;

public function fileupload(Request $request)
    {
        $image = $request->file('file');
        $imageName = $image->getClientOriginalName();
        $image->move(public_path('images'),$imageName);

        $imageUpload = new ImageUpload();
        $imageUpload->filename = $imageName;
        $imageUpload->save();
        return response()->json(['success'=>$imageName]);
    }

answered Apr 29, 2020 at 13:13

Imran Khan

3583 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daraz Pk Over a year ago

thanks for replying irfan. So in javascript we don't need to call fileupload function?

Imran Khan Over a year ago

No you can not call fileupload directly from Javascript but instead dropzone makes a post call for you to fileupload function. Javascript can make ajax calls to server side routes or urls and this is how server side code is called from client side.

Collectives™ on Stack Overflow

Call Laravel function from javascript/Ajax - Dropzone.js & Laravel

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related