I'm trying to use dropdown js to load an image, but when I drag and drop that image, the page automatically reloads the data I had included in the form, what can I do there?
This is the page of the library link
and I'm trying to implement it in C # .Net
HTML
'
<form id="dropZoneForm" action="@Url.Action("FileUpload", "Campaign")" class="dropzone col-md-3">
@Html.AntiForgeryToken()
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
'
Driver '
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult FileUpload()
{
bool isSavedSuccessfully = true;
string fName = "";
try
{
foreach (string fileName in Request.Files)
{
HttpPostedFileBase file = Request.Files[fileName];
fName = string.Concat(Guid.NewGuid().ToString(), Path.GetExtension(file.FileName));
if (file != null && file.ContentLength > 0)
{
var originalDirectory = new DirectoryInfo(string.Format("{0}CampaignImages\", Server.MapPath(@"~\Uploads\")));
string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "tempimagepath");
bool isExists = System.IO.Directory.Exists(pathString);
if (!isExists)
System.IO.Directory.CreateDirectory(pathString);
var path = string.Format("{0}\{1}", pathString, fName);
file.SaveAs(path);
}
}
}
catch (Exception ex)
{
isSavedSuccessfully = false;
}
if (isSavedSuccessfully)
{
return Json(new { Message = fName });
}
else
{
return Json(new { Message = "Error in saving file" });
}
}
'
Javascript '
Dropzone.options.dropZoneForm = {
acceptedFiles: 'image/*',
maxFiles: 1,
addRemoveLinks: false,
dictRemoveFile: 'Eliminar',
parallelUploads: 1,
dictMaxFilesExceeded: 'Solo se puede cargar 1 elemento.',
init: function () {
this.on("maxfilesexceeded", function (file) {
this.removeAllFiles();
this.addFile(file);
//En caso de exceder el limite, queda sin clickearse
dropZoneForm.clickable = false
});
this.on("addedfile", function (file) {
//Elimina la primera imagén cargada, cada vez que se agrega una segunda
if (this.files.length > 1) {
this.removeFile(this.files[0]);
}
});
this.on("complete", function (file) {
//Los var, son para evitar errores de undefined
var xhr = new XMLHttpRequest();
var data = file.xhr.responseText;
var jsonResponse = JSON.parse(data);
$('#Imagen').val(jsonResponse['Message']);
});
}
};
'