I have a Web API method to upload file and return FileResult object that contains file path. How can I get the file path of uploaded file in dropzone (how to get response from Web API method)?

My dropzone:

module.directive("dzDirective", [
    'apiAttachment', function(apiAttachment) {
        return {
            restrict: "A",
            link: function(scope, iElement, iAttrs, controller) {
                iElement.dropzone({
                    url:"/api/1/FileTransfer",
                    uploadMultiple: false,
                    init: function() {
                        var myDropzone = this;
                        myDropzone.on("plete", function (file) {
                            DoSomething();
                        });
                    }
                });
            }
        };
    }
]);

My Web Api method:

[Route("api/1/FileTransfer")]
    public async Task<FileResult> Post()
    {
        if (!Request.Content.IsMimeMultipartContent("form-data"))
        {
            throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.UnsupportedMediaType));
        }

        var storageFactory = new StorageFactory();
        var streamProvider = new StorageProvider(storageFactory.Create(storage, tempContainer));
        await Request.Content.ReadAsMultipartAsync(streamProvider);
        return new FileResult
        {
            FilePaths = streamProvider.Files
        };
    }

FileResult Model

public class FileResult
{
    public IEnumerable<string> FilePaths { get; set; }
    public string Submitter { get; set; }
}

Thanks!

I have a Web API method to upload file and return FileResult object that contains file path. How can I get the file path of uploaded file in dropzone (how to get response from Web API method)?

My dropzone:

module.directive("dzDirective", [
    'apiAttachment', function(apiAttachment) {
        return {
            restrict: "A",
            link: function(scope, iElement, iAttrs, controller) {
                iElement.dropzone({
                    url:"/api/1/FileTransfer",
                    uploadMultiple: false,
                    init: function() {
                        var myDropzone = this;
                        myDropzone.on("plete", function (file) {
                            DoSomething();
                        });
                    }
                });
            }
        };
    }
]);

My Web Api method:

[Route("api/1/FileTransfer")]
    public async Task<FileResult> Post()
    {
        if (!Request.Content.IsMimeMultipartContent("form-data"))
        {
            throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.UnsupportedMediaType));
        }

        var storageFactory = new StorageFactory();
        var streamProvider = new StorageProvider(storageFactory.Create(storage, tempContainer));
        await Request.Content.ReadAsMultipartAsync(streamProvider);
        return new FileResult
        {
            FilePaths = streamProvider.Files
        };
    }

FileResult Model

public class FileResult
{
    public IEnumerable<string> FilePaths { get; set; }
    public string Submitter { get; set; }
}

Thanks!

• javascript
• angularjs
• asp-web-api
• angularjs-directive
• dropzone.js

Share Improve this question Follow asked Apr 8, 2014 at 15:54 ThuThu 13511 silver badge1010 bronze badges 3

• What is there in this callback file property myDropzone.on("plete", function (file) { – Chandermani Commented Apr 8, 2014 at 16:42
• That is actually the file with name is file name, not the FileResult type(contains file path) – Thu Commented Apr 9, 2014 at 20:55
• Yeah you are right. I just checked the callback myDropzone.on("plete", function (file).. and there is an attribute xhr in file that contains response from API post method. Thanks for your help! – Thu Commented Apr 10, 2014 at 8:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Just add this snippet to your dropzone initializer

 Dropzone.options.formUpload = {
    init: function() {
        this.on("success", function(data) {
            var response = $.parseJSON(data.xhr.response);
        });
    }
}