File upload with SQL insert

2 posts, 0 answers
  1. Attila
    Attila avatar
    18 posts
    Member since:
    Oct 2016

    Posted 03 Nov 2017 Link to this post

    Hello!

    I would like to upload a file to the server and also write some data into SQL database after the user fills a form with those metadata. I used the widget this way:

     

    @Html.Kendo().Upload().Name("docUpload").Async(a => a.Save("UploadFile", "Dokumentum", new { id = Model.Id }).AutoUpload(false)).Multiple(true).Events(ev => ev.Upload("onUpload").Error("onError").Success("onSuccess"))

     

    The widget first calls onUpload javascript that calls the action that stores the metadata in SQL (input parameter is json). This action returns empty content if successful, or content with the error message if fails.

    Either the first action was successful or failed, the widget calls the UploadFile action, that stores the file on the server (input parameter is HttpPostedFileBase). This action also returns with an empty content if it was successful.

    This is works perfectly. My problem is, that what if the metadata writing fails (because of some validation or anything) and the file will be copied to the server. Or the metadata writing is successful but the file store fails. I would like the widget returns successful message only if both are successful or error message if one of them fails (of course the other action shouldn't be executed).

     

    Here's the onUpload javascript:

    function onUpload(e){
     
    var json=new Object();
    json["json"]=JSON.stringify({...blah-blah});
     
    $.ajax({
    url: '@Url.Action("Save,"Controller"),
    async: false,
    type:"POST",
    data:json,
    dataType:'json',
    success:function(result){},
    error:function(error){}
    });
    }

    Thanks for your help

  2. Neli
    Admin
    Neli avatar
    64 posts

    Posted 06 Nov 2017 Link to this post

    Hi Attila,

    If the Ajax call in the upload method handler returns error, than the execution of the 'Save' action ( to avoid misunderstanding - in your example the name of the action is 'UploadFile') could be prevented.
    Take a note, that this approach may not work for large files, because it could take longer to the request to receive a response and in the meantime the 'Save' action could be executed.
    $.ajax({
    url: '@Url.Action("Save","Controller")',
    async: false,
    type:"POST",
    data:json,
    dataType:'json',
    success: function (result) {
    },
    error: function (error) {              
    e.preventDefault();               
    }
    });

    I would recommend to make all the validations in the 'Save' action. If the saving of the file fails for any reason, the 'error' event will be triggered. In case, the file is successfully saved, the 'success' event will be triggered.

    Note, that the status of the uploaded file depends on the result from the async.saveUrl method. The responses for the success are empty response or JSON string with 'text/plain' content encoding. Every other response is considered as failure. You could read more in the following article.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top