Jasny file upload postedfile always null - jasny-bootstrap

Why is the PostedFile property always null even when a file is selected? The file upload appears to be working properly as far as allowing me select a file. But when the submit button is clicked that instantiates the code where the selected file is used, the PostedFile property is null.
This is my ascx code:
<div id="fileUploadDiv" class="row">
<div class="col-xs-12 push-left">
<div class="row">
<div class="col-xs-3 col-md-2 text-left form-group required label-wrapper">
<asp:Label
ID="Label1"
runat="server"
class="lblFileUpload"
Text="File to upload:"
CssClass="control-label"
EnableViewState="false" />
</div>
<div class="col-xs-9 col-xs-10 text-left">
<div class="fileinput fileinput-new input-group pull-left" data-provides="fileinput">
<div class="form-control" data-trigger="fileinput" style="max-width: 30em;">
<span class="fileinput-filename"></span>
</div>
<span class="btn btn-file">
<span class="fileinput-new">
<asp:Button
ID="Button4"
runat="server"
CssClass="button pink inline-narrow pull-right"
Text="Select File" />
</span>
<span class="fileinput-exists">
<asp:Button
ID="Button5"
runat="server"
CssClass="button pink inline-narrow pull-right"
Text="Change" />
</span>
<input
id="inputUploadFile"
runat="server"
type="file"
name="..."
accept=".jpg, .jpeg, .png, .eps, .pdf, .ai"
enctype="multipart/form-data">
</span>
<a href="#"
class="btn fileinput-exists"
data-dismiss="fileinput">
<asp:Button
ID="Button6"
runat="server"
CssClass="button pink inline-narrow pull-right"
Text="Remove" />
</a>
</div>
</div>
</div>
</div>
</div>
This is my c# code:
protected void btnAddUpdate_Click(object sender, EventArgs e)
{
...
byte[] fileData = null;
using (var binaryReader = new BinaryReader(inputUploadFile.PostedFile.InputStream)) //PostedFile is always null.
{
fileData = binaryReader.ReadBytes(inputUploadFile.PostedFile.ContentLength); //PostedFile is always null.
}
}

I found the issue. The file upload doesn't work asynchronously. The problem was solved by adding the following two lines of code to the OnInit method:
ScriptManager.GetCurrent(this.Page).RegisterPostBackControl(this.btnSave);
Page.Form.Attributes.Add("enctype", "multipart/form-data");
Where this.btnSave is the submit button on the page.

Related

Displaying photo after uploaded Using Ajax - Laravel

I need a help please
My question is : How can I display image after uploaded it in the same Page
I'm trying a lot of code , but nothing is worked for me
Here is blade code
<form action="{{ route('admin.user.store') }}" method="post" class="form-horizontal"
enctype="multipart/form-data" id ="upload_form">
#csrf
<div class="row justify-content-center">
<div class="col-xl-9">
<!--begin::Wizard Step 1-->
<div class="my-5 step" data-wizard-type="step-content" data-wizard-state="current">
<h5 class="text-dark font-weight-bold mb-10">User's Profile Details:</h5>
<!--begin::Group-->
<div class="form-group row">
<label class="col-xl-3 col-lg-3 col-form-label text-left">Avatar</label>
<div class="col-lg-9 col-xl-9">
<div class="image-input image-input-outline" id="kt_user_add_avatar">
<div class="image-input-wrapper" >
<img src="{{asset('assets/media/users/100_6.jpg')}}" width="120" height="120">
</div>
<label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
<i class="fa fa-pen icon-sm text-muted"></i>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" />
</label>
<span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
<i class="ki ki-bold-close icon-xs text-muted"></i>
</span>
</div>
</div>
</div>
<!--end::Group-->
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn" style="background-color:#3699FF">Submit</button>
Cancel
</div>
</div>
</div>
</div>
</div>
</form>
Try this: (For Preview)
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />

Partial view update on ajax POST redirecting to form's action method

I have created 2 partial views called _ftpsetupDetails.cshtml and _ftpsetupedit.cshtml
On load of the index page i am loading details partial view onto the below div.
now the problem is on post to the controller after save i am returning the ready only mode detail partial view. But instead of loading the partial view or hit done method of ajax it is redirecing the page to /FT/Edit url with detail partial view html on it. How to make sure the page is not redirected? what am i doing wrong?
//Once user clicks on Save button the below code will post the form data to controller
$(document).on("click", "#updateFTP", function () {
$.post("/Ftp/Edit", $('form').serialize())
.done(function (response) {
alert(response.responseText);
});
});
//On page load i am loading the partialview container witih read only view
LoadAjaxPage("/Ftp/DetailsByOrgId", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
//On edit button click i am loading the same div container with edit partial view
$(document).on("click", "#editFTP", function () {
// $("#createUserPartialViewContainer").load("/Users/Create?organizationId=" + orgId + "&organizationType=" + orgTypeId);
LoadAjaxPage("/Ftp/Edit", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
});
<div id="ftpPartialViewContainer">
</div>
<!--Details HTML partial view code-->
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<div class="row">
<div class="col">
<label for="Name" class="control-label">Name</label>
<input asp-for="Name" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<label for="Password" class="control-label">Password</label>
<input asp-for="Password" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Edit" class="btn btn-primary" id="editFTP" />
</div>
</div>
</div>
</div>
<!--Edit HTML partial view code-->
#model MyProject.Models.Ftp
#if (this.ViewContext.FormContext == null)
{
this.ViewContext.FormContext = new FormContext();
}
#using (Html.BeginForm("Edit", "ftp", FormMethod.Post,))
{
#Html.ValidationSummary(true, "Please fix the errors")
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Pkid" />
<input type="hidden" asp-for="ConnectedTo" />
<input type="hidden" asp-for="ConnectedToType" />
<div class="row">
<div class="col">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary " id="updateFTP" />
</div>
</form>
</div>
</div>
}

Cannot get value from summernote ,when using ajax update

when i click edit button (i used modal bootstrap) all value exist except textarea with summernote.
if you input something(in summernote) and cancel it ,your value doesn't disappear ... it should be clear .
forgive me, my english so bad .
here is my modal form :
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Formulir Berita</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="id_berita"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-2">Tanggal penulisan</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
<input name="tgl" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text">
<span class="help-block"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Judul</label>
<div class="col-md-9">
<input name="judul" placeholder="Judul" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Penulis</label>
<div class="col-md-9">
<input name="penulis" placeholder="Penulis" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group" id="photo-preview">
<label class="control-label col-md-2">Gambar</label>
<div class="col-md-4">
(Tidak ada gambar)
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" id="label-photo">Unggah Foto </label>
<div class="col-md-7">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input">
<i class="fa fa-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-default btn-file">
<span class="fileupload-exists">Ganti Foto</span>
<span class="fileupload-new">Pilih File</span>
<input name="gambar" type="file" />
</span>
<span class="help-block"></span>
Remove
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Isi</label>
<div class="col-md-9">
<textarea name="isi" class="form-control" id="summernote" >
</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Simpan</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
</div>
</div>
</div>
</div>
i 've been trying some code :
$('#summernote').summernote('code');
$('#summernote').summernote('reset');// and for resetting modal while Add Data
it doesn't happen anything
my ajax function :
function edit_berita(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('sistem/berita/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data){
// $('#summernote').summernote('code');
$('[name="id_berita"]').val(data.id_berita);
$('[name="tgl"]').datepicker('update',data.tgl);
$('[name="judul"]').val(data.judul);
$('[name="isi"]').val(data.isi);
$('[name="penulis"]').val(data.penulis);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit data'); // Set title to Bootstrap modal title
$('#photo-preview').show(); // show photo preview modal
if(data.gambar)
{
$('#label-photo').text(''); // label photo upload
$('#photo-preview div').html('<img src="'+base_url+'upload/berita/'+data.gambar+'" class="img-responsive" >'); // show photo
$('#photo-preview div').append('<input type="checkbox" name="remove_photo" value="'+data.gambar+'"/> Remove photo when saving'); // remove photo
}
else
{
$('#label-photo').text(''); // label photo upload
$('#photo-preview div').text('(Tidak ada gambar)');
}
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
Text Area doesnot have value. jQuery .html() works in this case
$("textarea#summernote").html(data.isi);
Try to modify the summernote line like this :
$('#summernote').summernote('code', data.isi);
And to clear the content :
$('#summernote').summernote('code', '');
Please try this:
$("textarea#summernote").val(data.isi);
$( '[name="isi"]' ).val(data.isi);
$( '[name="isi"]' ).summernote();

MVC and Bootstrap 4: change style of generated button tag with DropDownListFor

In my ASP.NET MVC Core web app, I generate a dropdown via the following code in a .cshtml file:
<div>
#Html.DropDownListFor(x => x.SelectedType,
new SelectList(Model.Types, "TypeId", "Name"), "Select one...",
new
{
#class = "selectpicker",
data_show_subtext = "false",
data_live_search = "true"
})
</div>
I'm using the bootstrap-select library too, btw.
This generates the following HTML when I inspect the page in Chrome:
<div>
<div class="dropdown bootstrap-select">
<select class="selectpicker" data-live-search="true" data-show-subtext="false" data-val="true" data-val-required="Type is required."
id="SelectedType" name="SelectedType" tabindex="-98">
<!-- option tags omitted -->
</select>
<button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" data-id="SelectedType" title="X">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">X</div>
</div>
</div>
</button>
<div class="dropdown-menu " role="combobox">
<div class="bs-searchbox">
<input type="text" class="form-control" autocomplete="off" role="textbox" aria-label="Search">
</div>
<div class="inner show" role="listbox" aria-expanded="false" tabindex="-1">
<ul class="dropdown-menu inner show"></ul>
</div>
</div>
</div>
</div>
All is good. However, with Bootstrap 4 I find myself needing to change the btn-light class to btn-outline-secondary in the <button> tag.
How do I do this via the HtmlHelper DropDownListFor method?
I can of course do some post-rendering stuff in JS like
$(".dropdown-toggle").removeClass("btn-light").addClass("btn-outline-secondary");
...but that seems like a fallback option and it's not optimal.

how to pass data to modal dialog in laravel (Update method usinf modal box)?

I want to create a new post in my Database using modal box, and all works fine but when I use the button edit to update the post using modal dialog doenst work, I just want to take the cod('id') via a button from my view and pass to the modal.
the button code:
<a class="tip" id="test" data-toggle="modal" data-target="#myAlert2" title="Modifier">
and this is my code modal dialog
<div id="myAlert2" class="modal hide" id="modal-edit">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Modifier un espace de travail</h3>
</div>
<div class="modal-body">
<p>
<div class="form--field">
<label class="labgroupe">Sujet *</label>
<input type="text" name="sujet" id="sujet" value="" class="form--element" placeholder="Sujet..." >
</div>
<div class="form--field">
<label class="labgroupe">Objectif du groupe</label>
<input type="text" name="objectif" class="form--element" placeholder="Objectif..." >
</div>
<div class="form--field" >
<label class="labgroupe">Plan d'action:</label>
<textarea class="form--element textarea" name="textarea" placeholder="Description..."></textarea>
</div>
#endforeach
</p>
</div>
<div class="modal-footer">
<input type="submit" value="Validate" id="button2" class="btn btn-success">
<a data-dismiss="modal" class="btn" href="#">Cancel</a> </div>
</div>
Any help plz ?
you cannot use 2 id's on the same div
<div id="myAlert2" class="modal hide" id="modal-edit">
changed to
<div id="myAlert2" class="modal hide">
and use same id on data-target="#myAlert2"
Modal button:
On your script, add this:
$("#test").click(function () {
$('#id').val($(this).data('id'));
});
Then add an input in the modal called #id.
<input type="text" id="id">

Resources