Objective:
------------
Form data and image file submitted at button click or Form data is submitted without image file on button click.
Dropzone:
-------------
https://rawgit.com/enyo/dropzone/master/dist/dropzone.js
Prerequisites:
---------------
Dropzone Js file corrections(Check out my post below for corrections )
http://aspdotnetcake.blogspot.in/2016/01/dropzone-js-corrections.html
Scripts:
--------------
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://localhost:1202/code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="Jquery/bootstrap.min.js"></script>
<link href="Jquery/bootstrap.min.css" rel="stylesheet" />
<script src="js/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css" />
Script code:
------------------
Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
autoDiscover: false,
addRemoveLinks: true,
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 20,
url: "db_save.ashx",
addRemoveLinks: true,
maxFiles: 5,
maxFilesize: 5,
dictDefaultMessage: "Drag or click to add photos",
// The setting up of the dropzone
init: function () {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function (e, formData) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
}
else
{
alert("hi"); //Testing it with alert
myDropzone.uploadFiles([]);
}
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function (file, xhr, formData) {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
formData.append('title', $("input[name=title]").val());
formData.append('desc', $("textarea[name=description]").val());
});
this.on("successmultiple", function (files, response) {
alert(response);
});
this.on("errormultiple", function (files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
</script>
HTMLin aspx
-------------------
<form id="my-awesome-dropzone" class="dropzone">
<div>
<input type="text" name="title" placeholder="Title" />
<textarea name="description" aria-valuetext="" style="cursor: pointer; width: 100%;" placeholder="Description" ></textarea></br>
<button id="submit-all" type="submit" class="button3" style="cursor: pointer">Post</button>
</div>
<div>
<div class="dropzone-previews" style="border: 1px dashed blue;"></div>
</div>
<%--<input id="username" type="text" name="username" value="akash" style="display: none;" />--%>
<input id="username" type="text" name="username" value="<% =ServerValue %>" style="display: none;" />
</form>
db_save.ashx
------------------------
string constring = ConfigurationManager.ConnectionStrings["xxxxx_mdf"].ConnectionString;
//HttpFileCollection files = context.Request.Files;
string user = string.Empty;
string xx= string.Empty;
string xx= string.Empty;
string xx= string.Empty;
string xxxx= string.Empty;
string xxx= string.Empty;
string xx= string.Empty;
string xx= string.Empty;
string xx= string.Empty;
string xx= string.Empty;
string xx= string.Empty;
string xxxx= string.Empty;
int photos_count = 0;
user = context.Request["username"];
post_desc = context.Request["desc"];
string title = context.Request["title"];
string dirFullPath = HttpContext.Current.Server.MapPath("~/pictures/");
string[] files;
int numFiles;
files = System.IO.Directory.GetFiles(dirFullPath);
numFiles = files.Length;
numFiles = numFiles + 1;
string str_image = "";
foreach (string s in context.Request.Files)
{
string id = string.Empty;
id = DateTime.Now.ToString("yyyy_MM_dd_HH_mm_ss");
HttpPostedFile file = context.Request.Files[s];
// int fileSizeInBytes = file.ContentLength;
string fileName = file.FileName;
string fileExtension = file.ContentType;
context.Response.Write(status);
if (!string.IsNullOrEmpty(fileName))
{
context.Response.Write(status);
fileExtension = Path.GetExtension(fileName);
Guid g = Guid.NewGuid();
str_image = g + numFiles.ToString() + fileExtension;
string image_path = HttpContext.Current.Server.MapPath("~/pictures/") + str_image;
file.SaveAs(image_path);
Stream streamfile = file.InputStream;
//context.Response.Write(pathToSave_100);
//Start of post data
post_title = context.Request["title"];
post_title = post_title.Substring(0, post_title.IndexOf(','));
event_photo_path = "pictures/" + str_image;
event_photoname = file.FileName;
event_photoid = "xxx" + DateTime.Now.ToString();
event_photo_ext = fileExtension;
photo_hide_code = "0";
photo_username = "";
event_timestamp = DateTime.Now.ToString();
int event_like_count = 0;
photos_count = photos_count + 1;
//DB for photos
if (event_photoname != "")
{
try
{
{
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("insert into db_save values (@xxxx,@xxxxx,@xxxx,@xxxx)", con))
{
cmd.Parameters.AddWithValue("@xxx", );
cmd.Parameters.AddWithValue("@xxx", );
cmd.Parameters.AddWithValue("@xxx", );
cmd.Parameters.AddWithValue("@xxx", );
con.Open();
cmd.ExecuteNonQuery();
con.Close();
status = "ok";
context.Response.Write(status);
return;
}
}
}
}
catch (Exception ex)
{
context.Response.Write(ex);
}
finally
{
}//try catch complete
}//if event_photoname-->complete
}//if filename exists -->complete
}//For each complete
// If no image write code here below
