I'm trying to upload files in ASP.NET core 3.1, but in my Post I'm not receiving the file.
That count = 0 is what I always get.
#cshtml
<input asp-for="app.FormFile" id="input-2" name="input2[]" type="file" class="file" multiple data-show-upload="true" data-show-caption="true">
#cshtml.cs
public async Task<IActionResult> OnPostAsync(List<IFormFile> files)
{
long size = files.Sum(f => f.Length);
foreach (var formFile in files)
{
if (formFile.Length > 0)
{
var filePath = Path.GetTempFileName();
using (var stream = System.IO.File.Create(filePath))
{
await formFile.CopyToAsync(stream);
}
}
}
// Process uploaded files
// Don't rely on or trust the FileName property without validation.
return Ok(new { count = files.Count, size });
}
In ASP.NET core 2.0 this worked fine! What's wrong?
The param name is files, but you're explicitly setting the input name to input2[], so they don't match up. ASP.NET Core isn't going to try to interpret that you've uploaded some files so you probably want them to go on this param. If it can't find something to bind the data to (by name), it's just going to discard it and move on.
The name should files so it matches up to the param name: name="files".
even if I pass the name it still came with count = 0 <input asp-for="Laudos.FormFile" id="files" name="files" type="file" class="file" multiple data-show-upload="true" data-show-caption="true">
You can try to specify an encoding type (enctype) of multipart/form-data for your <form> tag, like below.
<form method="post" enctype="multipart/form-data">
<input asp-for="Laudos.FormFile" id="input-2" name="files" type="file" class="file" multiple data-show-upload="true" data-show-caption="true">
<input type="submit">
</form>
Test Result
Related
I have two input tags for uploading images and tow variables(imgFile1,imgFile2) in data section . I'm sure imgFile1 gets correct value on my console but when I upload second image, this images's value goes to wrong variable. The images d57f0.... in the picture below supposes to be in imgFile2. Why does it happen ?? Thank you so much .
html
<div class="img-field-container1">
upload img
<input type="file" class="input-img-field1" #change="uploadFile" accept="image/*" ref="img1">
</div>
<div class="img-field-container2">
upload img
<input type="file" class="input-img-field2" #change="uploadFile" accept="image/*" ref="img2">
</div>
data () {
return {
imgFile1:'',
imgFile2:'',
}
methods: {
uploadFile: function () {
var img_file1 = this.$refs.img1.files[0]
this.imgFile1 = URL.createObjectURL(img_file1)
console.log(imgFile1)→ correct value in console
var img_file2 = this.$refs.img2.files[0]
this.imgFile2 = URL.createObjectURL(img_file2)
console.log(imgFile2)→ correct value in console but updated into imgFile1
}
I solved problem by wrapping correctly
I am using asp.net core 2.2 with dropzone js.
I am trying to submit a form along with the files contained in dropzone js.
I have an input file field (can be hidden or not hidden). I want to assign dropzone files to this field and submit it. But the Forms field is always null.
Here is the code:
MVC Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Add(ViewModels.Photo model)
{
var files = HttpContext.Request.Form.Files; // this is also empty
....
}
MVC Model:
public class Photo
{
...
public List<IFormFile> Files { get; set; }
}
HTML:
<form asp-action="Add" asp-controller="Photos" method="post" id="addForm" enctype="multipart/form-data">
<div class="dropzone">
<input asp-for="Files" type="file" multiple hidden/>
</div>
<button type="submit">Submit</button>
</form>
JS:
var e = "#addForm",
var t = new Dropzone(e, {
maxFilesize: 1,
acceptedFiles: ".png,.jpg,.jpeg",
uploadMultiple: false,
autoProcessQueue: false
});
t.on("addedfile", function (o) {
$("#Files").files = t.files;
})
You might use a different method signature of the action
[HttpPost]
public ActionResult Add(HttpPostedFileBase file)
{
//handle file.InputStream
}
This example shows uploading the files one by one: https://gillesleblanc.wordpress.com/2017/01/25/integrating-dropzone-js-into-an-asp-net-mvc-site/
I managed to get things working and it was a minor fix.
I changed below code
$("#Files").files = t.files;
to
$("#Files").files = t.hiddenFileInput.files;
t.files is an array of files being captured by dropzone where as t.hiddenFileInput.files is an FileList object of files being captured by dropzone.
The $("#Files").files is also an FileList object that's why t.files was not working due to type mismatch.
Now it submits form fields along with files with default submit mechanism.
In Asp.Net Core, it appears that they have done away with the Request.Content.ReadAsMultipartAsync functionality in favor of the IFormFile.
This makes uploading where you have an actual file a LOT easier, however, I have a use case where I need to upload a file to browser memory, process it, then send it as part of the multi-form data in the body. IFormFile cannot see this as there is no actual file to read. It only works if you have a filename property on the Content-Disposition and an actual file on the client to upload.
In my Asp.Net 4 app, I could read the mutlipart data in the body whether that was sent between boundaries or as an attached file.
How do I accomplish this in .Net Core?
What I figured out is that the multipart values are passed into the HttpRequest.Form as an array of key/value pairs. The "name" value on the body's multipart determines the name of the key.
I created a helper method that grabs both files and form values.
public static List<FileModel> GetFileModelsFromRequest(HttpRequest request)
{
var fileModels = new FileModels();
foreach (var formField in request.Form)
{
// Form data
var fileModelText = formField.Value;
... process and add to the FileModel list
}
if (request.Form.Files != null && request.Form.Files.Count > 0)
{
foreach (var file in request.Form.Files)
{
using (MemoryStream ms = new MemoryStream())
{
// File data
formFile.CopyTo(ms);
}
... process and add to the FileModel list
}
}
return fileModels;
}
I have done it this way. when I had to capture image from webcam and process (show that image in browser) it in browser memory and later on post that image using a form.
public IActionResult Index()
{
var files = HttpContext.Request.Form.Files;
if (files != null)
{
foreach (var file in files)
{
var fileName = file.Name;
}
}
return View();
}
I used a JS library Webcam.js to capture image from webcam and show that image on the same page. and once a user is satisfied with the image, s/he can upload the image to the server.
<!-- Configure settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#camera');
</script>
<!-- handle snapshot and displaying it locally -->
<script language="JavaScript">
function take_snapshot() {
// take snapshot and get image data
Webcam.snap(function (data_uri) {
// display results in page
document.getElementById('imageResults').innerHTML =
'<img src="' +
data_uri +
'"/>';
Webcam.upload(data_uri,
'/Default/Index',
function (code, text) {
console.log('Photo Captured');
});
});
}
</script>
<div class="panel panel-default">
<div class="panel-heading">Camera</div>
<div class="panel-body">
<div id="camera"></div>
<!-- A button for taking snaps -->
<form>
<input type="button" class="btn btn-success" value="Take Snapshot" onClick="take_snapshot()">
</form>
<div class="panel panel-default">
<div class="panel-heading">Captured Image</div>
<div class="panel-body">
<div id="imageResults">captured image will appear here...</div>
</div>
<br />
<br />
</div>
let me know if this is what you are looking for.
I'm creating a Google Web App (which is a HTML form) that will upload a file to a folder on My Drive. It's not required to have a file to upload, so there will be times where this input will essentially be "blank". The app works perfectly fine, except when you don't choose a file to upload. It spits out this error: "Exception: We're sorry, a server error occurred. Please wait a bit and try again." I have two files, the html file and the .gs file. Here's they are:
/* The script is deployed as a web app and renders the form */
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('FormFrontend.html');
}
/* This function will process the submitted form */
function uploadFiles(form) {
try {
/* Name of the Drive folder where the files should be saved */
var dropfolder = "Uploaded Files";
var folder, folders = DriveApp.getFoldersByName(dropfolder);
/* Find the folder, create the folder if it does not exist */
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropfolder);
}
/* Get the file uploaded though the form as a blob */
var blob = form.myFile;
var file = folder.createFile(blob);
var urlstr = file.getUrl()
/* Set the file description as the name of the uploader */
file.setDescription("Uploaded by " + form.ContactName);
/* Write response to spreadsheet */
var ss = SpreadsheetApp.openById("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")
var responses = ss.getSheetByName("Responses");
responses.appendRow([form.CompanyName, form.ContactName, form.PhoneNumber, form.Email, form.Date, form.Severity, form.Details, urlstr])
/* As long as there's no errors you should se the below text */
return "Form Submitted Successfully "
} catch (error) {
/* If there's an error, show the error message */
return error.toString();
}
}
<html>
<body>
<!-- This is the actual HTML form -->
<div id="theform">
<form id="myForm">
<p style="font-size:30px">Customer Form</p>
Company Name:
<input type="text" name="CompanyName">
<br>Contact Name:
<input type="text" name="ContactName">
<br>Phone Number:
<input type="text" name="PhoneNumber">
<br>Contact Email:
<input type="email" name="Email">
<br>Date:
<input type="date" name="Date">
<br>Overall Severity: (1 Lowest, 5 Highest)
<br>
<input type="number" name="Severity" min="1" max="5" value="1">
<br>Details:
<br>
<textarea name="Details" rows=10 cols=65></textarea>
<br>
<br>Additional File (Optional):
<input type="file" name="myFile">
<br>
<!-- The submit button. It calls the server side function uploadFiles() on click -->
<input type="submit" value="Submit" onclick="this.value='Submitting..';
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">
</form>
</div>
<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>
</body>
</html>
<!-- The function will be called after the Google Script has executed -->
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
If have tried putting an IF statement around the "/* Get the file uploaded though the form as a blob */" section that tells it to just set urlstr to nothing if form.myFile is blank, but it still fails (but if you choose an actual file, it still completes successfully). I haven't been able to get anything helpful to show up in the logger either.
I'm fairly new to Google App Script, so any help would be appreciated!
This is what ended up working. The .getContentType seems to always return "application/octet-stream" when it's left blank and checking to see if the returned content type is that specific one worked.
/* Get the file uploaded though the form as a blob */
var blob = form.myFile;
var contentType = blob.getContentType();
if (contentType != "application/octet-stream") {
var file = folder.createFile(blob);
var urlstr = file.getUrl();
/* Set the file description as the name of the uploader */
file.setDescription("Uploaded by " + form.ContactName);
} else {
var urlStr = "None given";
}
I'd check what is actually getting returned into the variable blob.
var blob = form.myFile;
Maybe check the type with JavaScript typeOf.
var whatsTheType = typeOf blob;
In this test function:
function testIt() {
var newTestFile = DriveApp.createFile('New Text File', 'Hello, world!');
var myBlob = newTestFile.getBlob();
var whatsTheType = typeof myBlob;
Logger.log('whatsTheType: ' + whatsTheType);
}
JavaScript typeof returns the type of the blob as an "object". If you check the typeof, and it's not an object, then the file wasn't uploaded.
Put in an if conditional check, rather than a "try/catch". The "try/catch" obviously isn't keeping the code from dying.
if (whatsTheType === "object") {
//Create the file
var file = folder.createFile(blob);
};
Alternatively, you should be able to check the value property of the file picker to return a name, if a file was uploaded. If there is no name for the uploaded file, then the user didn't use the file picker.
In a Create view which properly starts with a...
#using (Html.BeginForm("Create", "Song", FormMethod.Post, new { enctype = "multipart/form-data" }))
and among a few other fields has a...
<div class="editor-field">
<input type='file' name="SongFileUpload" id="SongFileUpload" onchange="readURL(this);" />
#Html.ValidationMessageFor(model => model.SongData)
</div>
ending with a
<p>
<input type="submit" value="Create" />
</p>
if I browse for and select a filename which contains a beginning and ending parentheses within the name... when I click on the "Create" button to submit it... when just running of the localhost server VS2010 provides... it just bops right over to the IE (v10) error of....
>This page can't be displayed
>
>•Make sure the web address http://localhost:63129 is correct.
>•Look for the page with your search engine.
>•Refresh the page in a few minutes.
At first I thought it might be because the filename began with an "#" symbol. but that's not it as I can select another filename that is similarly as long but does not contain the parentheses and it jumps into the
[HttpPost]
public ActionResult Create( )
Like it should and everything works as it should.
What the heck as going on here?
Below is the JavaScript for the "readURL( )" function.
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#SongMimeType').attr('value', input.files[0].type);
$('#SongData').InnerHtml = (e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
My guess is the JavaScript function is what might be blowing-up??
How would I fix it to handle this filenames with parentheses??