how to reset (clear) file input
If fileInputElement
is on its own in the form fileInputForm
, you can do:
window.fileInputForm.reset();
Otherwise for IE you'll have to replace the element with a clone:
fileInputElement.parentNode.replaceChild(
fileInputElement.cloneNode(true),
fileInputElement
);
How to customize input type=file?
You can’t modify much about the input[type=file]
control itself.
Since clicking a label
element correctly paired with an input will activate/focus it, we can use a label
to trigger the OS browse dialog.
Here is how you can do it…
label { cursor: pointer; /* Style as you please, it will become the visible UI component. */}
#upload-photo { opacity: 0; position: absolute; z-index: -1;}
<label for="upload-photo">Browse...</label><input type="file" name="photo" id="upload-photo" />
How to reset/clear file Input
You can use ref
to reset the file uploader value.
this.$refs.fileupload.value = null;
codepen - https://codepen.io/Pratik__007/pen/MWYVjqP?editors=1010
Angular File Upload
Here is a working example for file upload to api:
Step 1: HTML Template (file-upload.component.html)
Define simple input tag of type file
. Add a function to (change)
-event for handling choosing files.
<div class="form-group">
<label for="file">Choose File</label>
<input type="file"
id="file"
(change)="handleFileInput($event.target.files)">
</div>
Step 2: Upload Handling in TypeScript (file-upload.component.ts)
Define a default variable for selected file.
fileToUpload: File | null = null;
Create function which you use in (change)
-event of your file input tag:
handleFileInput(files: FileList) {
this.fileToUpload = files.item(0);
}
If you want to handle multifile selection, than you can iterate through this files array.
Now create file upload function by calling you file-upload.service:
uploadFileToActivity() {
this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
// do something, if upload success
}, error => {
console.log(error);
});
}
Step 3: File-Upload Service (file-upload.service.ts)
By uploading a file via POST-method you should use FormData
, because so you can add file to http request.
postFile(fileToUpload: File): Observable<boolean> {
const endpoint = 'your-destination-url';
const formData: FormData = new FormData();
formData.append('fileKey', fileToUpload, fileToUpload.name);
return this.httpClient
.post(endpoint, formData, { headers: yourHeadersConfig })
.map(() => { return true; })
.catch((e) => this.handleError(e));
}
So, This is very simple working example, which I use everyday in my work.
How to set file input value when dropping file on page?
Disclaimer: Correct as of December 2017 and for modern browsers only.
TL;DR: Yes, now you can!
*if you have a dataTransfer or FileList object
Previously, programmatically changing the files input[type=file]
field was disabled due to legacy security vulnerabilities, which are fixed on modern browsers.
The last of the major browsers (Firefox), has recently enabled us to set the files for the input file field. According to testing done by W3C, it seems that you can already do this on Google Chrome!
Relevant screenshot and text quoted from MDN:
You can set as well as get the value of
HTMLInputElement.files
in all modern browsers.
Source and browser compatibility, see MDN
The Firefox bugfix discussion thread has this demo you can test it out on, and here's the source if you want to edit it. For future reference in case this link dies, I will also include it as a runnable snippet below:
let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');
target.addEventListener('dragover', (e) => {
e.preventDefault();
body.classList.add('dragging');
});
target.addEventListener('dragleave', () => {
body.classList.remove('dragging');
});
target.addEventListener('drop', (e) => {
e.preventDefault();
body.classList.remove('dragging');
fileInput.files = e.dataTransfer.files;
});
body {
font-family: Roboto, sans-serif;
}
body.dragging::before {
content: "Drop the file(s) anywhere on this page";
position: fixed;
left: 0; width: 100%;
top: 0; height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
background-color: rgba(255, 255, 0, .3);
pointer-events: none;
}
button, input {
font-family: inherit;
}
a {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<h1>Drag and drop files into file input</h1>
<p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p>
<p>
<input type="file">
</p>
</body>
</html>
VueJS: Input file selection event not firing upon selecting the same file
We can add @click event and then clear the value of the file input
<template>
....
<input ref="imageUploader" type="file" accept=".jpg, .jpeg" @click="resetImageUploader" @change="uploadImageFile">
....
</template>
<script>
export default {
methods: {
resetImageUploader() {
this.$refs.imageUploader.value = '';
},
uploadImageFile() {
....
}
}
}
</script>
Related Topics
How to Replace Captured Groups Only
How to Convert a Plain Object into an Es6 Map
JavaScript .Queryselector Find <Div> by Innertext
Setting Multiple Attributes for an Element at Once with JavaScript
How to Disable JavaScript in Chrome Developer Tools
JavaScript Xmlhttprequest Using JSONp
Chrome Extension: How to Save a File on Disk
How to Use Command Line Arguments in Angularjs Protractor
How to Pass Parameters in Computed Properties in Vue.Js
Why Can't I Update Props in React.Js
What's the Difference Between Reflow and Repaint
Use $Http Inside Custom Provider in App Config, Angular.Js