nafeeur10
1 month ago
229
4
Laravel

CSRF Token Mismatch in Dropzone.js

Posted 1 month ago by nafeeur10

I am trying to do an Ajax Request. Here, the above problem is showing!!

Route.php

Route::post('vendor/delete-product-image','[email protected]');

HTML:

<form action="{{url('vendor/add-product-images')}}/{{$prod_img_id}}" 
	method="POST"  
	enctype="multipart/form-data" 
	class="dropzone dropzone-area"
	id="dpz-single-file-p1"
>
	@csrf
	<input type="hidden" name="fileDropzone1" />
</form>

Js:

Dropzone.options.dpzSingleFileP1 = {
  paramName: "fileDropzone1", // The name that will be used to transfer the file
  maxFiles: 1,
  addRemoveLinks: false,
  headers: {
	'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
  },
  previewTemplate: 
	`<div class="dz-preview dz-complete dz-image-preview">
		<div class="dz-image">
			<img
			data-dz-thumbnail
			style="height: 188px;width: 178px;"
			>
		</div>
		<div class="dz-details">
			<div class="dz-size" data-dz-size></div>
			<div class="dz-filename">
			<span data-dz-name></span>
			</div>
		</div>
		<div class="dz-progress">
			<span class="dz-upload" data-dz-uploadprogress></span>
		</div>
		<div class="dz-error-message">
			<span data-dz-errormessage></span>
		</div>
		<a class="dz-set-default bg-danger" href="javascript:undefined;" data-dz-remove>
			<i class="fa fa-times"></i>
		</a>
	</div>`,
	init: function () {
		this.on("maxfilesexceeded", function (file) {
			this.removeAllFiles();
			this.addFile(file);
		});
	},
	success: function( file, response ) {
		obj = JSON.parse(response);
		$(file.previewTemplate).append("<span class='filenameofdropzone'>" + obj.filename + "</span>");
		console.log(obj.filename);
	},	
	removedfile: function(file) {
		var server_file = $(file.previewTemplate).children('.filenameofdropzone').text();
		var name = server_file; 
		//console.log(file);
		
		$.ajax({
			type: 'POST',
			dataType: 'JSON',
			url: 'vendor/delete-product-image',
			data: { name: name },
			success: function(data){
				console.log('success: ' + data);
			}, error: function(error) {
				console.log('Error: ', error.data);
			}
		});
		var _ref;
		return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
	}
};

Please sign in or create an account to participate in this conversation.