DropzoneJS send additional data Multiple File Upload – Technology

DropzoneJS send additional data Multiple File Upload – Technology

In this post we will give you information about DropzoneJS send additional data Multiple File Upload – Technology. Hear we will give you detail about DropzoneJS send additional data Multiple File Upload – TechnologyAnd how to use it also give you demo for it if it is necessary.

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>

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

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 :

Another must read:  Laravel 6 Hello world example – PHP framework

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 onlinecode 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.

Hope this code and post will helped you for implement DropzoneJS send additional data Multiple File Upload – Technology. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

  +  15  =  20

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US