Asp.Net Mvc - File Upload with DropzoneJS Tutorial

With this project, you can add / delete pictures.

Table of contents

General info
Screenshots
Technologies
Code Examples

General info

You can make modern and effective projects by using jquery and dropzone libraries.

Screenshots

Technologies

.NET Framework 4.6.1+
.NET Standard 3.1, providing .NET Core support
Install latest version of Visual Studio : https://www.visualstudio.com/downloads/
Nuget DropzoneJS : https://www.nuget.org/packages/dropzone/
Nuget Microsoft jQuery Unobtrusive Ajax : https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/

Code Examples

Show examples of usage:

Dropzone.autoDiscover = false;
        $(function () {
            var dz = null;
            $("#mydropzone").dropzone({
                autoProcessQueue: false,
                paramName: "productpictures",
                maxFilesize: 1, //mb
                maxThumbnailFilesize: 1, //mb
                maxFiles: 5,
                parallelUploads: 5,
                acceptedFiles: ".jpeg,.png,.jpg",
                uploadMultiple: true,
                addRemoveLinks: true,
                //resizeWidth:128,
                init: function () {
                    dz = this;
                    $("#uploadbutton").click(function () {
                        dz.processQueue();
                        $(this).attr("disabled", "disabled");
                    });
                },
                success: function (file) {
                    var preview = $(file.previewElement);
                    preview.addClass("dz-success text-success");
                    setTimeout(function () {
                        dz.removeFile(file);
                        $("#refreshbutton").click();
                    }, 2000);
                },
                queuecomplete: function () {
                    $("#refreshbutton").click();
                    $("#uploadbutton").removeAttr("disabled");
                },
                dictDefaultMessage: "You can drag and drop your images here.",
                dictRemoveFile: "File Remove"
            });
            $("#refreshbutton").prepend('<i id="loading" class="fa fa-refresh fa-spin" style="display:none;"></i>&nbsp;')
            refreshProductPicture();
        });
        function refreshProductPicture() {
            $("#refreshbutton").click();
        }

fcetinkaya/Asp.Net.MVC_File-Upload-with-DropzoneJS-Tutorial

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages