Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Image Upload using Dropzone

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 991
    Comment on it

    Hi All,

    This Blog will help you to use dropzone js and css to upload files in your project.

    You can get dropzone package from NUGET. Once Installed get the reference of it in your project, Below example will show it used in MVC Project. You can reference dropzone in your BundleConfig.cs

    bundles.Add(new ScriptBundle("~/bundles/dropzonescripts").Include(
                         "~/Scripts/dropzone/dropzone.js"));
    
    bundles.Add(new StyleBundle("~/Content/dropzonescss").Include(
             "~/Scripts/dropzone/basic.css",
             "~/Scripts/dropzone/dropzone.css"));
    

    In CSHTML Page:

    @using (Html.BeginForm("SaveUploadedFile", "Sample", FormMethod.Post, new { enctype = "multipart/form-data", id = "dropzoneForm", @class = "dropzone" }))
    {
    <div class="text-center">
        <div class="fallback">
            <input name="file" type="file" />
            <input type="submit" value="Upload" />
        </div>
    </div>
    }
    
    @section scripts{
    <script type="text/javascript">
        //File Upload response from the server
        Dropzone.options.dropzoneForm = {
            maxFiles: 1, // This can be used to make multi files upload
            init: function () {
                this.on("maxfilesexceeded", function (data) {
                    var res = eval('(' + data.xhr.responseText + ')');
                });
    
                this.on("complete", function (data) {
                    var res = eval('(' + data.xhr.responseText + ')');
                    var _this = this;
                    if (res.Message.StatusCode == "404") {
                        alert(res.Message.StatusDescription);
                        _this.removeFile(data);
                    }
                });
    
                this.on("addedfile", function (file) {
                    var removeButton = Dropzone.createElement("<button>Remove file</button>");
                    var _this = this;
                    removeButton.addEventListener("click", function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        _this.removeFile(file);
                    });
                    // Add the button to the file preview element.
                    file.previewElement.appendChild(removeButton);
                });
            }
        };
    </script>}
    

    SaveUploadedFile is a ActionMethod in Sample Controller which will be used to save the uploaded files.

    In SaveUploadedFile ActionMethod you will get the files as:

    HttpPostedFileBase file = Request.Files[0];
    

    Happy Coding and Happy Uploading......

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: