The jQuery file upload plugin Dropzone.js supports maxFiles option. You can set simply desired number for file upload like this maxFiles:1. If you set one, then it will allow one file at a time. Further, you can call maxfilesexceeded function. It will delete the preview of the first file and add the new one.
Dropzon.js example:
<script type="text/javascript">
$(function () {
Dropzone.autoDiscover = false;
$("#dZUpload").dropzone({
url: "/PageUpload.ashx",
addRemoveLinks: true,
maxFiles: 1,
init: function () {
this.on("maxfilesexceeded", function (file) {
this.removeAllFiles();
this.addFile(file);
});
},
success: function (file, response) {
var fileName = response;
file.previewElement.classList.add("dz-success");
console.log("Successfully uploaded :" + fileName);
},
error: function (file, response) {
file.previewElement.classList.add("dz-error");
}
});
});
</script>
<div id="dZUpload" class="dropzone">
<div class="dz-defaultdz-message"></div>
</div>
Description: When user drag and drop the file, it will show an image preview about the file on the div class “dz-success”. You can hover on the image and view the file name and size. Here, I have returned the dropzone response file name using console.log, after saving the file into the server.
Post your comments / questions
Recent Article
- Your system's memory configuration has changed since it entered hibernation.
- Save image to client browser using jQuery?
- Get filename of image jQuery?
- How to get the image src using JavaScript?
- System.Net.Http.Formatting, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Net.Http.Formatting' with identity 'System.Net.Http.Formatting, Version=4.0.0.0
- Cordova Android build error "Cannot read property 'length' of undefined". An error occurred while running subprocess cordova.
- ERROR in The Angular Compiler requires TypeScript >=3.9.2 and <4.0.0 but 3.8.3 was found instead
- Code ENOLOCAL Could not install from "android" as it does not contain a package.json file.
Related Article