Skip to main content

DropzoneJS send additional data Multiple File Upload

Today, We want to share with you DropzoneJS send additional data Multiple File Upload Form using PHP.In this post we will show you , hear for Building a File Upload Form using DropzoneJS and PHP we will give you demo and example for implement.In this post, we will learn about Multiple upload with Dropzone and inividual input fields with an example.

DropzoneJS send additional data Multiple File Upload Form using PHP

There are the Following The simple About DropzoneJS send additional data Multiple File Upload Form using PHP Full Information With Example and source code.

As I will cover this Post with live Working example to develop Send additional params with the images, so Dropzone send additional data for this example is following below.

Building a File Upload Form using DropzoneJS and PHP

Include External jQuery and CSS

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script>

Configuring dropzones

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone", {
    url: "http://localhost:8000/create",
    paramName: "file",
    maxFilesize: 10,
    parallelUploads:10,
    maxFiles: 10,
    uploadMultiple:true,
    acceptedFiles: "image/*,application/pdf",
    autoProcessQueue: false,
    headers: {
        'Authorization': 'W3xx1Cabcdef12345'
    }
});

$("#form").validate({
    rules: {
        customer_name : {
            required : true
        },
        unit_id : {
            required : true
        },
        titles : {
            required : true
        },
        email : {
            required: true,
            email:true
        },
        comments: {
            required: true
        },
        'mfiles_value[]': {
            maxupload: 10,
            maxfilesize : 10
        }
    },
    messages: {
        comments: "Enter Describe your issue here in details",
        titles: "The titles field is required.",
        customer_name: "The Name field is required.",
        email: "Enter Your email.",
        unit_id: "Select Your Products.",
        'mfiles_value[]':{
           maxupload : "You can only upload a maximum of 10 images",
           maxfilesize : "File size must not be more than 10 MB"
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("id") == "comments") {
            //element.parent('div').prev().append(error[0]);
            $(".ck_edior_error").append(error[0]);
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function(form) {
         $("#loading").show();

         myDropzone.on("sending", function(file, xhr, formData) { 

                formData.append("unit_id",$('#unit_id').val());
                formData.append("comments",$('#comments').val());
                formData.append("titles",$('#titles').val());
                formData.append("supportable_id",$('#supportable_id').val());
                formData.append("type_id",$('#type_id').val());
                formData.append("supported_type",$('#supported_type').val());
                formData.append("product_id",$('#product_id').val());
                formData.append("product_email_address",$('#product_email_address').val());
                formData.append("product_url_full",$('#product_url_full').val());
                formData.append("product_website",$('#product_website').val());
                formData.append("stock_id",$('#stock_id').val());
                formData.append("email",$('#email').val());
                formData.append("customer_name",$('#customer_name').val());
                formData.append("sub_unit_id",$('#sub_unit_id').val());
                formData.append("path_url",$('#path_url').val());

        });

         myDropzone.processQueue();
         myDropzone.on('success', function(file, response){
                $("#loading").hide();
                 localStorage.setItem("message", response['message']);
                window.location = 'support.php';
        });

    }
});

public_html/memebrs-managements/routes/api.php

Route::POST('create', 'API\[email protected]');

LARAVEL TO UPLOAD FILE AND INSERT DATA INTO DATABASE

public_html/memebrs-managements/app/Http/Controllers/API/supportsController.php

supportsController.php
    public function store(Request $request)
    {
        //dd($request->all());

        $seceretKey = env('PRODUCT_API_KEY');
        $headers = $this->apache_request_headers();
        if(isset($headers['Authorization'])){
            $api_key = $headers['Authorization'];
            if($api_key != $seceretKey)
            {
                return $this->sendError('Auth failed.');
            }
            else
            {
                // for PRODUCT Details Inserted
                $products_check = DB::table('products_master')->where('product_id', $request['product_id'])->whereNull('deleted_at')->first();
                if (is_null($products_check)) {
                    DB::table('products_master')->insert([
                        'app_id' => $request['unit_id'],
                        'product_id' => $request['product_id'],
                        'PRODUCT_name' => $request['PRODUCT_name'],
                        'PRODUCT_secret' => $request['PRODUCT_secret'],
                        'PRODUCT_owner_name' => $request['PRODUCT_owner_name'],
                        'PRODUCT_owner_email' => $request['product_email_address'],
                        'product_url_full' => $request['PRODUCT_url'],
                        'PRODUCT_PRODUCTify_domain' => $request['product_url_full'],
                        'created_at' => date('Y-m-d H:i:s'),
                        'updated_at' => date('Y-m-d H:i:s')
                    ]);

                    $last_product_id = DB::getPdo()->lastInsertId();
                }
                else
                {
                    $last_product_id = $products_check->id;
                }
                
                $customer = DB::table('customers')->where('email', $request['email'])->whereNull('deleted_at')->first();

                if (is_null($customer)) {
                    DB::table('customers')->insert([
                        'email' => $request['email'],
                        'name' => $request['customer_name'],
                        'created_at' => date('Y-m-d H:i:s'),
                        'updated_at' => date('Y-m-d H:i:s')
                    ]);

                    $last_customer_id = DB::getPdo()->lastInsertId();
                }
                else
                {
                    $last_customer_id = $customer->id;
                }
                $support = DB::table('supports')->insert([
                    'email' => $request['email'],
                    'customer_id' => $last_customer_id,
                    'customer_name' => $request['customer_name'],
                    'product_website' => $request['product_website'],
                    'path_url' => $request['path_url'],
                    'titles' => $request['titles'],
                    'comments' => $request['comments'],
                    'supported_type' => $request['supported_type'],
                    'product_id' => $last_product_id,
                    'supportable_id' => $request['supportable_id'],
                    'stock_id' => $request['stock_id'],
                    'unit_id' => $request['unit_id'],
                    'sub_unit_id' => $request['sub_unit_id'],
                    'type_id' => $request['type_id'],
                    'created_at' => date('Y-m-d H:i:s'),
                    'updated_at' => date('Y-m-d H:i:s')
                ]);

                //$support  = supports::create($request->all());

                $last_insertd_id = DB::getPdo()->lastInsertId();
                $message = "Your support #".$last_insertd_id." has been created. One of our representative will get in touch with you soon.";

                /* File Attachments*/
                $time=time();
                $files = $request->file('file');
                $destinationPath =base_path()."/img/atteach/";
                if($request->hasFile('file')) {
                      foreach ($files as $file) {
                        $img=$file->getClientOriginalName();
                        $file_ext = $file->getClientOriginalExtension();
                        $file_size = $file->getSize();


                        $all_files_name [] = ['img_name' => $img];

            $support_attachments = DB::table('support_attachments')->insert([
                    'file_name' => $img,
                    'file_ext' => $file_ext,
                    'file_size' => $file_size,
                    'product_id' => $request['unit_id'],
                    'support_id' => $last_insertd_id,
                    'customer_id' => $last_customer_id,
                    'comment_id' => 0,  
                    'created_at' => date('Y-m-d H:i:s'),
                    'updated_at' => date('Y-m-d H:i:s')
                ]);


                        $upload_success = $file->move($destinationPath, $img);
                    }
                }

                /* End File Attachments*/
                return $this->sendResponse($last_insertd_id, $message);
            }
        }
        else
        {
            return $this->sendError('Sorry, Your Authorization faild.');
        }

    }
 

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  Get Current login Auth user details using Laravel 5.7

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about DropzoneJS send additional data Multiple File Upload Form using PHP.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]