'Dropzone: Submit both form data and dropzone at once

I know there some questions like this, but they didn't answer questions exactly.

This is what I need,

  1. Upload files using Dropzone
  2. Save form data and uploaded image paths to DB

The problem is, How can I send both form data and dropzone files at the same time, like in the following official doc article.

I followed this Dropzone official docs Combine normal form with Dropzone

I tried this article and it worked. I could able to get both form data and files.But in this, the whole form is a Dropzone. I just need to make a Dropzone using a div.

Then I tried this approach,

  • Upload files first and get uploaded file paths as the response

  • Create hidden input by setting value as the file path received from a response

  • Submit the form

    But the problem is if I use this approach I have to upload files first. What if a request is broken when I'm submitting the form ?. No data will save, but there uploaded file on the server.

I'm hoping you guys can help me out to solve this. Thank you

phpcodeigniterfile-uploaddropzone.js


Solution 1:[1]

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

 formData.append("fieldname1", $('field-name-1').val());  

});

You could probably even automate this and do an $.each with every input of a #form but the basic logic is above.

The juist of this is outlined in the docs under the tab tips.

Solution 2:[2]

It is not necessary to append form data when sending. Check the documentation and use the headers property

example

var myDropzone = new Dropzone(".profile-image-upload",
    {
        paramName: "uploadfile",
        url: "/API/PeopleAPI/EditAsync",
        maxFiles: 1,
        headers: getData(),
        uploadMultiple: false,
        autoProcessQueue: false,
        maxFilesize: 20,
        acceptedFiles: "image",
        dictMaxFilesExceeded: "You can only upload 1 image",
        dictDefaultMessage: "",
    });

function getData() {
        var data = {
            //person
            UserName: $('#UserName').val(),
            AspNetUserID: '@Model.AspNetUserID',
            Roles: $('#UserRoles').val(),
            FirstName: $('#FirstName').val(),
            Email: $('#Email').val(),
            LastName: $('#LastName').val(),
            Gender: $('#Gender').val(),
            Password: $('#Password').val(),
            //address
            AddressLine1: $('#AddressLine1').val(),
            AddressLine2: $('#AddressLine2').val(),
            Town: $('#Town').val(),
            RegionID: $('#RegionID').val(),
            RegionName: $('#RegionID :selected').text(),
            City: $('#City').val(),
            CountyID: $('#CountyID').val(),
            CountyName: $('#CountyID :selected').text(),
            PostCode: $('#PostCode').val(),
          __RequestVerificationToken: $('[name="__RequestVerificationToken"').val()
        };
        return data;
    }

Solution 3:[3]

I don't think that it is possible. you have to upload file first and then db record will be added/updated. once your request is submitted to server, db record will be updated in nano seconds. So no need to worry. It is same as core php.

just for the safe side your web server and db server should be same for more efficient behavior.

if still you want more security, write a crone job, that will run in the end of the day and will unlink all the files from server those doesn't exist in db record.

Solution 4:[4]

var dropzone = $("#dropzone"),
	input = dropzone.find('input');

	dropzone.on({
		dragenter : dragin,
		dragleave : dragout
	});

	input.on('change', drop);
  
  function dragin(e) { //function for drag into element, just turns the bix X white
		$(dropzone).addClass('hover');
	}

	function dragout(e) { //function for dragging out of element                         
		$(dropzone).removeClass('hover');
	}
  
  function drop(e) {
		var file = this.files[0];
		$('#dropzone').removeClass('hover').addClass('dropped').find('img').remove();
		// upload file here
		showfile(file); // showing file for demonstration ... 
	}
#dropzone {
		position: relative;
		border: 5px solid #000;
		border-radius: 10px;
		color: #000;
		font: bold 24px/200px arial;
		height: 200px;
		margin: 30px auto;
		text-align: center;
		width: 200px;
	}
	#dropzone.hover {
		border: 4px solid green;
		color: green;
	}
	#dropzone.dropped {
		background: #222;
		border: 5px solid #444;
	}
	#dropzone div {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	#dropzone img {
		border-radius: 5px;
		vertical-align: middle;
		max-width: 95%;
		max-height: 95%;
	}
	#dropzone [type="file"] {
		cursor: pointer;
		position: absolute;
		opacity: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	#session_message_succ{
		text-align: center;
		color: #07bd07;
	}
	#session_message_err{
		text-align: center;
		color: #e2350e;
	}
	.container{
		text-align: center;
	}
	.meta_data{
		text-align: center;
	}
	.submit_div
	{
		display: flex;
		align-items: center;
		margin-bottom:15px;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="demoFiler" method='POST' id="demoFiler" action="upload/do_upload'" enctype="multipart/form-data">
		
		<div id="dropzone">
			<div>Drop your file</div>
			<input type="file" name="image[]" multiple />
		</div>
		<div class="container">
			
			<div class="submit_div">
				<input type="submit" name="save_form" />
			</div>
		</div>
	</form>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alex
Solution 2 Nicholas McIver
Solution 3
Solution 4 Crazy coder

Related Questions