I'm using jansy bootstrap to replace the asp.net FileUpload. I've successfully retrieved the file using HttpPostedFile with the help of this answer:
HttpPostedFile image = Request.Files["myFile"];
Now, how do I allow multiple files to be selected? With the asp.net FileUpload it was simply adding AllowMultiple="True" parameter and then in the code behind I simply looped through:
foreach (var image in FileUpload1.PostedFiles)
{...}
How do I do this with a custom control? THis is my current html (which is the first Image Upload Widget example):
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" id="myFile" name="myFile"></span>
Remove
</div>
</div>
You can add multiple attribute and set its value to multiple to allow select of multiple files
<input type="file" id="myFile" name="myFile" multiple="multiple">
Related
I have a <form> where I am using Vue.js and Quasar, and submits in as a HTML form in asp .net core 3.1
The problem is when I am using Quasar Uploader (https://quasar.dev/vue-components/uploader).
The functionality works fine, but when I submit the form (post i C# and .net core).
I cant get the the file in the controller.
As you can see from this example: https://codepen.io/cbrown___/pen/GRZwpxw
When the Uploader is rendered it does not have the attribute name. From the example above you have this input:
<input tabindex="-1" type="file" title="" class="q-uploader__input overflow-hidden absolute-full">.
I guess that is why I cant get it from my Controller. How can I solve this when I am using .net Core 3.1 to submit this form?
And I see no good solutinos in letting people upload files through my API before the record is created.
Is it a option here I do not see?
EDIT:
The <input> is on the plus-icon. So by using inspect elements you should be able to see that no name occurs.
EXAMPLE CODE:
HTML
<div id="q-app">
<div class="q-pa-md">
<div class="q-gutter-sm row items-start">
<q-uploader
url="http://localhost:4444/upload"
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
color="teal"
flat
bordered
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
label="Upload files"
color="purple"
square
flat
bordered
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
label="No thumbnails"
color="amber"
text-color="black"
no-thumbnails
style="max-width: 300px"
></q-uploader>
</div>
</div>
</div>
JS:
new Vue({
el: '#q-app'
})
If any body else need this I ended up with using this:
:name="'file_description[' + index + ']'"
That way each one got one name...and from another array I knew how many file_description it would be.
I have a code like this in my aspx page:
<div class="container">
<h3 class="my-5 h2">Tasks List</h3>
<div class="form-group w-75">
<label for="lastmonth">Enter Tasks:</label>
<textarea class="form-control" id="lastmonth" rows="7"></textarea>
</div>
</div>
But the text area does not seem to change even if I give or .I want to increase the textbox to occupy 3/4th of my page. Right now, it is only 1/4th. I even did the below change in my Site.css but it doesnt seem to change.
input,
select,
textarea {
max-width: 100%;
}
You can easily achieve by setting cols and rows as attributes instead of using bootstrap
Try this:
<textarea class="form-control" id="lastmonth" cols="30" rows="10"></textarea>
I am attaching the screenshot for your reference:
I am experiencing a very strange behavior. I am doing a simple ASP .NET application that will upload a file to the server.
I have a simple form that does this:
<form class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="files" class="col-md-3 col-sm-4 control-label">Bestand *</label>
<div class="col-md-9 col-sm-8" ">
<input name="file" type="file" id="file" required />
<span >#ViewBag.TheMessage</span>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-sm-8 col-md-push-3 col-sm-push-4">
<input type="submit" class="btn btn-primary" value="Versturen" />
</div>
</div>
</form>
The strange thing happens with the POST, 9 of 10 times this POST goes to test.com instead of localhost. I sniffed it with firebug to discover this. The firebug looks like this:
The Controller.cs looks like this, and it's working fine when post reached:
[HttpPost]
public ActionResult Index(HttpPostedFileBase file)
{
ViewBag.TheMessage = "Thanks, an e-mail will be sent shortly";
if (file.ContentLength > 0)
{
ViewBag.Message = "Your application description page.";
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
file.SaveAs(path);
}
return View();
}
Another strange thing is that if I just use an empty format cshtml file only with:
<form method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
<input type="submit"/>
POST woks fine every time.
Thanks.
Check to see if you have any Javascript that is changing your forms action attribute. I would start by looking at onload, onsubmit, or on your submit buttons onclick method. If you're using jquery be sure to check your $(document).ready () function. This really could be anywhere in your js though so make sure you look everywhere.
Another culprit could be that you have a base tag in your html that looks something like <base href="http:www.test.com /> which will change all of your relative urls to go that base location
<div class="thumbnail" style="height: 70px; background-color: #EEEDED">
<div style="font-weight: bold;font-size: 20px;text-align: center">
#Html.Label(exam.ExamName,new{#style="cursor: pointer;color: #FF8627 "})
</div>
<div style="font-size: 15px;text-align: center;color: #505050">
#Html.Label("Total Tests: " + exam.TestInfoes.Count(), new{#style="cursor: pointer"})
</div>
</div>
I have above HTML block, I want to put this whole block in tagin my mvc4 application.
We can do it using maually writing whole block in between tag but I also want to pass some value in the link which will be created for tag
<a href="~/Exam/SingleExam/" + some value from my model>
how do we do it ?
Also How can we achieve this using ActionLink ?
You can do this by using Partials or Editor/Display Templates
To render the partial you can use:
#Html.RenderPartial("partialname", model);
An article can be found here:
http://www.codeproject.com/Tips/617361/Partial-View-in-ASP-NET-MVC
To use templates you can use a custom defined Html.DisplayFor template.
There is an article about the subject here:
http://www.hanselman.com/blog/ASPNETMVCDisplayTemplateAndEditorTemplatesForEntityFrameworkDbGeographySpatialTypes.aspx
The main thing about the templates is that the template must mach the name of the class of the object.
With both methods you can pass your model.
I hope this helps.
well I created link like this
<a href="~/Exam/SingleExam/#exam.Id">
<div class="thumbnail" style="height: 70px; background-color: #EEEDED">
<div style="font-weight: bold;font-size: 20px;text-align: center">
#Html.Label(exam.ExamName,new{#style="cursor: pointer;color: #FF8627 "})
</div>
<div style="font-size: 15px;text-align: center;color: #505050">
#Html.Label("Total Tests: " + exam.TestInfoes.Count(), new{#style="cursor: pointer"})
</div>
</div>
</a>
Instead of using action link I just used html tag & passed id using #exam.id which created proper url for me.
Im using asp.net/c# weborms. I've added recaptcha to the form and used what is on their site. It needs a custom look hence it's like this:
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
<div>Get another CAPTCHA</div>
<div class="recaptcha_only_if_image">Get an audio CAPTCHA</div>
<div class="recaptcha_only_if_audio">Get an image CAPTCHA</div>
<div>Help</div>
</div>
<script type="text/javascript"
src="http://api.recaptcha.net/challenge?k=your_public_key">
</script>
<noscript>
<iframe src="http://api.recaptcha.net/noscript?k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
what do i need to do in the button_click method in the code behind iof the form to check if the words eneterd by the user is correct. same for audio.
Thanks
Why don't you use the control that is delivered with reCaptcha? Here is the control and a quickstart.
reCaptcha Quickstart & Control
Like other validations you just need to check if(Page.IsValid) in behind code. just note that you have to add recaptcha control in your code and then add your customs them.
<recaptcha:RecaptchaControl ID="recaptcha" runat="server" PublicKey="your_public_key"
PrivateKey="Your_private_key" Theme="custom" />
<div id="recaptcha_widget" style="display:none">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
...