how to image upload using dropzone ?

What have you tried? It seems that you just copied this from somewhere and use that so far...

Here is a tutorial you can follow for Laravel: https://www.itsolutionstuff.com/post/laravel-6-dropzone-image-upload-tutorialexample.html

@bobbybouwmann sir i try this tutorial but when i try to submit using form in my html page design was change and try to return image null

Dropzone has pretty good documentation available, check it out: https://www.dropzonejs.com/#usage

For starters, in your demo, you would have to change the url so that it points to the right function in a controller.

@jeffreyvanrossum but in my case i done already but when i check in controller $request->file('file'); then null no image fetch

@bobbybouwmann @jeffreyvanrossum i m using multiple fields to store with image so how to upload image with image name so how can i do it

Your form looks correct, but the URL in dropzone itself is incorrect. Can you post what you have now?

@bobbybouwmann sir

here is my blade file code

<form action="{{url('dropzone/store')}}" method="POST" enctype="multipart/form-data">
{{csrf_field()}}
    <div class="dropzone dropzone-default dz-clickable" id="kt_dropzone_1">
                <div class="dropzone-msg dz-message needsclick">
                        <h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
                </div>
        </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

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

here is my controller

public function store(Request $request)
    {
        $image = $request->file('file');
        $avatarName = $image->getClientOriginalName();
        $image->move(public_path('images'),$avatarName);
     
        $imageUpload = new Image();
        $imageUpload->filename = $avatarName;
        $imageUpload->save();
        return response()->json(['success'=>$avatarName]);
    }

this is my js code

 $('#kt_dropzone_1').dropzone({
        url: "/store", // Set the url for your upload script location
        paramName: "file", // The name that will be used to transfer the file
        maxFiles: 1,
        maxFilesize: 5, // MB
        addRemoveLinks: true,
        accept: function(file, done) {
            if (file.name == "sign.jpg") {
                done("Naha, you don't.");
            } else {
                done();
            }
        }
    });