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 :  Simple Digital Clock Timer with date using C# and asp.net

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.

Recommended For You.

Laravel Check and uncheck all checkbox using jquery
Today, We want to share with you Laravel Check and uncheck all checkbox using jquery.In this post we will show

Add a Comment

Your email address will not be published. Required fields are marked *