laundy · December 4, 2019 12:18
diff --git a/dropzone.blade.php b/dropzone.blade.php
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Dropzone Test</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet">
 </head>
 <body>
 <div class="flex-center position-ref full-height">
    <div class="content">
        <div class="panel-body">
            <form method="POST" enctype="multipart/form-data">
                @csrf
                <label for="pro_name">Name</label>
                <input type="text" class="form-control" name="pro_name" id="pro_name" placeholder="Enter product name">

                <label for="pro_price">Price</label>
                <input type="text" class="form-control" name="pro_price" id="pro_price" placeholder="Enter price">

                <label for="photos">Choose 5 Images</label>
                <div class="needsclick dropzone" id="document-dropzone"> // Display images preview

                </div>

                <input type="submit" class="btn btn-primary" value="Submit" id="btn"/>
            </form><!-- TODO -->
        </div>
    </div>
 </div>
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>

 <script>
    $(document).ready(function () {
        $("#btn").click(function (e) {
            e.preventDefault();
            var url = '{{ route('product.store') }}';
            var form = $('form')[0];
            var formData = new FormData(form);
            $.ajax({
                url: url,
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function (data) {
                    console.log(data);
                }
            });
        });

    });


    //This is how I get the preview(Dropzone)

    var uploadedDocumentMap = {}
    Dropzone.options.documentDropzone = {
        url: '{{ route('product.store') }}',
        maxFilesize: 10, // MB
        addRemoveLinks: true,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function (file, response) {
            console.log(file);
            console.log(response);
            $('form').append('<input type="hidden" name="document[]" value="' + file.name + '">')
        },
        removedfile: function (file) {
            file.previewElement.remove()
            var name = ''
            if (typeof file.file_name !== 'undefined') {
                name = file.file_name
            } else {
                name = uploadedDocumentMap[file.name]
            }
            $('form').find('input[name="document[]"][value="' + name + '"]').remove()
        },
        init: function () {
        }
    }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Dropzone Test</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet">
	</head>
	<body>
	<div class="flex-center position-ref full-height">
	<div class="content">
	<div class="panel-body">
	<form method="POST" enctype="multipart/form-data">
	@csrf
	<label for="pro_name">Name</label>
	<input type="text" class="form-control" name="pro_name" id="pro_name" placeholder="Enter product name">

	<label for="pro_price">Price</label>
	<input type="text" class="form-control" name="pro_price" id="pro_price" placeholder="Enter price">

	<label for="photos">Choose 5 Images</label>
	<div class="needsclick dropzone" id="document-dropzone"> // Display images preview

	</div>

	<input type="submit" class="btn btn-primary" value="Submit" id="btn"/>
	</form><!-- TODO -->
	</div>
	</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>

	<script>
	$(document).ready(function () {
	$("#btn").click(function (e) {
	e.preventDefault();
	var url = '{{ route('product.store') }}';
	var form = $('form')[0];
	var formData = new FormData(form);
	$.ajax({
	url: url,
	data: formData,
	processData: false,
	contentType: false,
	type: 'POST',
	success: function (data) {
	console.log(data);
	}
	});
	});

	});


	//This is how I get the preview(Dropzone)

	var uploadedDocumentMap = {}
	Dropzone.options.documentDropzone = {
	url: '{{ route('product.store') }}',
	maxFilesize: 10, // MB
	addRemoveLinks: true,
	headers: {
	'X-CSRF-TOKEN': '{{ csrf_token() }}'
	},
	success: function (file, response) {
	console.log(file);
	console.log(response);
	$('form').append('<input type="hidden" name="document[]" value="' + file.name + '">')
	},
	removedfile: function (file) {
	file.previewElement.remove()
	var name = ''
	if (typeof file.file_name !== 'undefined') {
	name = file.file_name
	} else {
	name = uploadedDocumentMap[file.name]
	}
	$('form').find('input[name="document[]"][value="' + name + '"]').remove()
	},
	init: function () {
	}
	}
	</script>
	</body>
	</html>