Sending files to a controller via ajax using drag and drop

Question

User-921158202 posted

Hi, here the thing i want to implement in my web application :

in the backend , i want to give the user the ability to drop some (text/csv) file in some drop areas,

when done the file is automatically sent to an mvc controller on the server via an ajax call that will parse that file and make changes to the database... etc

my main concern is how to send that file ,passing the right parameters in the ajax call, and suff like that .

also ideally i want the operation to begin just after the drop operation .

any idea/tip is welcome

Answer 1

User-271186128 posted

Hi issam1975,

i want to give the user the ability to drop some (text/csv) file in some drop areas,

From your description, do you mean you want to implement drag and drop function? If that is the case, I suggest you could try to use HTML 5 Drag and Drop or use JQuery UI Droppable widget to drag the drop file into the drop areas.

More details, see:

http://www.w3schools.com/html/html5_draganddrop.asp

https://jqueryui.com/droppable/

when done the file is automatically sent to an mvc controller on the server via an ajax call that will parse that file and make changes to the database... etc

As for this issue, you could use JQuery to find the file name/path from the drop areas, and push them into a string array, then use JQuery Ajax to send the name/path to the controller action method. In the action method, you could retrieve the file based on the file name/path and execute the delete function.

More details about using JQuery Ajax, you can refer to the following articles:

http://www.mikesdotnetting.com/article/220/posting-data-with-jquery-ajax-in-asp-net-razor-web-pages

http://www.codeproject.com/Articles/795483/Do-GET-POST-PUT-DELETE-in-asp-net-MVC-with-Jquery

Best regards,
Dillion