I have a function that uploads a CSV file into a server via form submission.
It is working well, but I need to support copy and paste of CSV file from the actual file location to the input element.
I tried to do this code from a stackoverflow answer (https://stackoverflow.com/a/50427897/9751944)
const form = document.getElementById("new_document_attachment");
const fileInput = document.getElementById("document_attachment_doc");
fileInput.addEventListener('change', () => {
form.submit();
});
window.addEventListener('paste', e => {
fileInput.files = e.clipboardData.files;
});
<form id="new_document_attachment" method="post">
<div class="actions"><input type="submit" name="commit" value="Submit" /></div>
<input type="file" id="document_attachment_doc" />
</form>
It is working on images. But when I try it on CSV and other files, I am getting an error saying that the clipboard does not have any content
ie.
The first FileList and File are for the test image while the second one is for CSV
Related
What I'm doing is triggering the download of a .txt file when the HTML button is clicked and the text in the file is a string typed in the HTML text field. But I don't know if I should use HTML or JavaScript code and I don't know how to code it.
I read the question and it's pretty much the same except that the text of the .txt file to download is a string typed into the HTML text field.
My code:
HTML code:
<form action="/a" method="POST">
<input
type="text"
value="String"
name="string"
/>
<input type="submit" value="Submit" />
</form>
How to trigger download of .txt file when HTML button is clicked? I would appreciate any help. Thank you in advance!
Depending on your file type, modify the type to fit, here's a list of MIME types https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
To download the file as html, modify the type to be text/html
<form action="/a" method="POST">
<input
type="text"
value="String"
name="string"
id="filename"
/>
<input type="submit" value="Submit" />
</form>
<script>
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
const string = document.querySelector("#filename").value;
const element = document.createElement("a");
const file = new Blob([string], { type: "text/plain" });
element.href = URL.createObjectURL(file);
element.download = "test.txt";
document.body.appendChild(element); // Required for this to work in FireFox
element.click();
});
</script>
I have a simple form on my webpage.
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input id="browse" type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
Now, my problem is when I browse and choose file to upload it shows which file I am going to upload.
But when I click on Choose file and browse again and this time if I change my mind mid way and hit cancel then old selected image also goes away.
On canceling it removes already selected image also.
Why does this happen and what to do if I want my old selected image to be selected after browsing again and canceling?
Thanks in advance!
Thanks to #Carlos , added this javascript
var input = document.getElementById("browse");
var selectedFile;
input.addEventListener('change', updateImageDisplay);
function updateImageDisplay() {
if(input.files.length==0) {
input.files = selectedFile;
}
else {
selectedFile = input.files;
}
}
and now it works fine! you can check here.
I want to upload a file without using the submit button. The file must be uploaded at the moment the user picks it from browse file window.
Now please do provide some ajax code or some jquery to upload the file and also how to delete the file.
Please provide the control view for this.
View>>>
<form action="FileUploadPost" method="post" enctype="multipart/form-data">
<label for="file1">Filename1:</label>
<input type="file" name="files" id="file3" />
<label for="file2">Filename2:</label>
<input type="file" name="files" id="file4" />
</form>
Controller>>>
[HttpPost]
public ActionResult Index(IEnumerable<HttpPostedFileBase> files)
{
foreach (var file in files)
{
if (file.ContentLength > 0)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(HttpContext.Server.MapPath("~/App_Data/Uploads"), fileName);
file.SaveAs(path);
}
}
return RedirectToAction("Index");
}
You can use JQuery file uploader control for your requirements.
It provides functionality to upload file with both "By Clicking on the button" and "Auto Upload".
Auto Upload : This functionality will upload file as soon as you select the file.
See Ajax File Upload for step by step implementation.
I am trying to create a file upload system. This file upload system works great for the mosot part. The problem comes in because there are multiple HTML elements on the page that have class file and multiple HTML elements that are upload-buttons. Right now file uploading works great only for the first HTML element that contains the upload text field and upload button only, all others fail to work (due to Javascript selecting the [0] object every time).
My question is, how can can I adjust the function below to cater to whatever upload container / button that was used?
Essentially what needs to happen is, if the user clicks on the nth upload button the functions array slots needs to be equal to n-1 somehow.
I appreciate any assistance with this problem.
Many thanks in advance!
$(document).on('click','.upload-button', function(){
var data = new FormData();
jQuery.each($('.file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
//Some more code...
});
HTML
<div class="input-text-field">
<input name="userfile" class="file" type="file" />
<input class="submit upload-button" type="submit" value="Upload" />
</div>
Use prev() to target just the previous .file element, and be aware that your code does'nt have a .file element, it has a #file element, and multiple ID's are invalid.
$(document).on('click','.upload-button', function(){
var data = new FormData();
jQuery.each($(this).prev('.file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
//Some more code...
});
html
<div class="input-text-field">
<input name="userfile" class="file" type="file" />
<input class="submit upload-button" type="submit" value="Upload" />
</div>
How can I show only XML files in a file input element?
I read about the "accept" attribute but also learned no browser actually support it. I found here some JS scripts but they didn't work well :-\
(I'm checking this server side as well but would like to do it client side too)
Thanks
The answer is pretty simple, you use the MIME type. So if it is an xml file you want, you just do:
<input type="file" accept="text/xml" />
If you want to see the full list of MIME types, check this site http://www.iana.org/assignments/media-types/media-types.xhtml
Not sure if you can do that, but at least you could use a callback function and check the input value for the .xml extension.
Snippet:
<script type="text/javascript">
function isXml(input)
{
var value = input.value;
var res = value.substr(value.lastIndexOf('.')) == '.xml';
if (!res) {
input.value = "";
}
return res;
}
</script>
<form method="post" action="">
<input type="file" name="myfile" id="myfile" onchange="return isXml(this)" />
<input type="submit" />
</form>