CODEWITHSUNDEEP
javascriptjqueryfile-io
Kavvson Empcraft
Kavvson Empcraft

Reputation: 443

Krajee file-input submit files on form submit

I am using this plugin for bootstrap to upload files which is stored in a form with submit button

http://plugins.krajee.com/file-input/

My question is - a) is there a method or something to either check if there are files in the dropZone that are still not uploaded and notify a user after he submits a form that he didn't uploaded the files

b) is there a method that will trigger the upload when the submit button is fired?

Now it looks like this - if I submit my form it wont upload the files and just pass the form, I have to manually click upload files then submit the form Maybe some of you came across this issue cause I am not able to figure it out myself due to poor documentation.

Upvotes: 3

Views: 7180

Answers (2)

Daniel
Daniel

Reputation: 413

Validation of required property for form based upload (non ajax) scenario, which will enforce files to be selected and required before upload. This scenario includes custom form submit and reset buttons for upload (and default upload and remove buttons are hidden). The upload will force a file to be selected and required - else a validation error as set in msgRequired will be shown.

Try it:- https://plugins.krajee.com/file-count-validation-demo#required-non-ajax-1

Upvotes: 0

Huda Shaaban
Huda Shaaban

Reputation: 21

I found a work around for this issue.

<input id="input-photos" name="Photos" multiple type="file" class="file-loading">
  1. Define a global variable in Javascript:

var formData = new FormData();

  1. Append the selected files to formData on filePreUpload action.

 $('#input-photos').on('filebatchpreupload', function(event, data, previewId, index) {
	var form = data.form, files = data.files, extra = data.extra,
		response = data.response, reader = data.reader;

	$.each(files, function (key, value) {
		if(value != null){
			formData.append("Photos", value, value.name);
		}
	}); });

  1. On form submission append all form fields and post the form through ajax.

$('#yourForm').submit(function() {
	$('#input-photos').fileinput('upload');
	var model_data = $("#yourForm").serializeArray();
	$.each(model_data,function(key,input){
		formData.append(input.name,input.value);
	});
	$.ajax({
		url: "@Url.Action("Save", "Home")",
		type: "POST",
		datatype: "json",
		data: formData,
		processData: false,  // tell jQuery not to process the data
		contentType: false,   // tell jQuery not to set contentType
		success: (function (result){
			window.location.href = '@Url.Action("Index", "Home")';
		}),
		error: function (xhr) {
			alert("Error: " + xhr.statusText);
		}
	});
	return false;
});

Upvotes: 2

Related Questions