Upload file with DropZone #3299 | Support Center

20summers created 7 years ago

I have created document upload functionality.

I can create the record correctly, but wanted to add dropzone.js as the means by which I upload the document see image: [https://goo.gl/photos/ZSVgZCJrHDTBFnBC6])

The ideas is that you populate the Name and Category fields, then drag and drop a file. The file gets submited automatically and gets replaced with a DocumentId (once saved in the database), and then the user clicks save.

My Issue: my _createOrEditModal.js has the following code:

$(".dropzone").dropzone({
    url: "/App/Documents/UploadDocument/",
    uploadMultiple: false,
    paramName: "file",
    parallelUploads: 1,
    maxFiles: 1
});

I keep on getting a code 400 error when it tries to upload the file (it does not even go into the controller). I have spent a number of hours on this and cannot figure out whats going on.

Here is my controller code:

public ActionResult UploadDocument()
        {
            try
            {
                var documentFile = Request.Form.Files.First();

                //Check input
                if (documentFile == null)
                    throw new UserFriendlyException(L("File_Empty_Error"));

                byte[] fileBytes;
                using (var stream = documentFile.OpenReadStream())
                {
                    fileBytes = stream.GetAllBytes();
                }

                var documentFileObject = new BinaryObject(AbpSession.GetTenantId(), fileBytes);
                _binaryObjectManager.SaveAsync(documentFileObject);


                return Json(new AjaxResponse(new {id = documentFileObject.Id}));
            }
            catch (UserFriendlyException ex)
            {
                return Json(new AjaxResponse(new ErrorInfo(ex.Message)));
            }
        }

7 Answer(s)

ismcagdas created 7 years ago

Support Team

Hi,

Can you check Logs.txt file under your web project for error details ? Probably you need to add anti forgery token to dropzone request.

$(".dropzone").dropzone({
    url: "/App/Documents/UploadDocument/",
    uploadMultiple: false,
    paramName: "file",
    parallelUploads: 1,
    maxFiles: 1,
    headers:{
        "X-XSRF-TOKEN": abp.security.antiForgery.getToken()
    }
});

Thanks.

0

20summers created 7 years ago

Awesome - Thanks - that was the trick :D
0

mdonogma created 7 years ago

are you able to share a working sample of this - i'm new to ASPZero and trying to create an upload form with custom fields on same form,

20summers created 7 years ago

Here is my code that I used...

_createorEditModal has the following :

<div class="row">
        <div class="col-md-12">
          
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        Drag n' drop uploader
                    </div>

                </div>
                <form id="upload-widget" method="post" class="dropzone" enctype="multipart/form-data" required>
                </form>
                
            </div>
          
        </div>
    </div>

_CreateOrEditModal.js has the following: you will see it returns the saved documents Id

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
        url: "/App/Documents/UploadDocument/",
        uploadMultiple: false,
        paramName: "file",
        parallelUploads: 1,
        maxFiles: 1,
        headers: {
            "X-XSRF-TOKEN": abp.security.antiForgery.getToken()
        },
        success: function (file, response) {
            $('#form').append('<input type="hidden" name="DocumentId" value="' + response.result.id + '" />');
        }
    });
});

the Document controller:

[HttpPost]
       [AllowAnonymous]
        public ActionResult UploadDocument()
        {
            try
            {
                var documentFile = Request.Form.Files.First();

                string ext = Path.GetExtension(documentFile.FileName);

                //Check input
                if (documentFile == null)
                    throw new UserFriendlyException(L("File_Empty_Error"));

                byte[] fileBytes;
                using (var stream = documentFile.OpenReadStream())
                {
                    fileBytes = stream.GetAllBytes();
                }

                var documentFileObject = new BinaryObject(AbpSession.GetTenantId(), fileBytes);
                _binaryObjectManager.SaveAsync(documentFileObject);

                

                return Json(new AjaxResponse(new {id = documentFileObject.Id }));
            }
            catch (UserFriendlyException ex)
            {
                return Json(new AjaxResponse(new ErrorInfo(ex.Message)));
            }
        }

0

mdonogma created 7 years ago

rock star ! thank you so much for this.
0

ismcagdas created 7 years ago
Support Team

Thanks @20summers :)
0

AstarIT created 4 years ago

That works very well, Now what about ot save the files in a folder intead the database? any idea will be grantly appreciated. Thnak you

Have an answer to this question? Log in and write your answer.