Custom Drag & drop file uploader

Hi Experts,
I have a requirement to create a custom file uploader in C#.

Summarised requirement is; Drag selected image onto a displayed placeholder image and upload to server.

What I am currently doing is to display a row of images and then use Ajax file uploader to upload the images that the use drags&drops into Ajax drop area. I then replace the row of images with those selected by the user.
I now need to customise this and maybe use a different approach and not Ajax.
I need to drag and drop each user selection onto the image. The image is then replaced on the fly.
Would appreciate some help

below is my current code

 <table>
         <tr>
            <td style="text-align: center; border-top: 1px solid #00FD17; border-bottom: 1px solid #00FD17; padding: 1px 4px">
                <asp:Image ID="Image2" runat="server" Height="131px" ImageUrl="~/images/Car-icon.png" Width="131px" />
                <asp:Image ID="Image3" runat="server" Height="131px" ImageUrl="~/images/Car-icon.png" Width="131px" />
                <asp:Image ID="Image4" runat="server" Height="131px" ImageUrl="~/images/Car-icon.png" Width="131px" />
                <asp:Image ID="Image5" runat="server" Height="131px" ImageUrl="~/images/Car-icon.png" Width="131px" />
                <asp:Image ID="Image6" runat="server" Height="131px" ImageUrl="~/images/Car-icon.png" Width="131px" />
                <asp:Image ID="Image7" runat="server" Height="131px" ImageUrl="~/images/Car-icon.png" Width="131px" />
            </td>
        </tr>
             </table>
            <br />  
 
 
            <ajaxToolkit:AjaxFileUpload ID="AjaxFileUpload1" runat="server" onuploadcomplete="AjaxFileUpload1_UploadComplete" MaximumNumberOfFiles="6" Height="200px" />
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
            </ajaxToolkit:ToolkitScriptManager>
                    <br />

 I then display the images from the server with codebehind based on Gridselection
  Image2.ImageUrl = "~/SiteImages/" + vUsername + "/" + GridView1.Rows[tt].Cells[55].Text;
            Image3.ImageUrl = "~/SiteImages/" + vUsername + "/" + GridView1.Rows[tt].Cells[56].Text;
            Image4.ImageUrl = "~/SiteImages/" + vUsername + "/" + GridView1.Rows[tt].Cells[57].Text;
            Image5.ImageUrl = "~/SiteImages/" + vUsername + "/" + GridView1.Rows[tt].Cells[58].Text;
            Image6.ImageUrl = "~/SiteImages/" + vUsername + "/" + GridView1.Rows[tt].Cells[59].Text;
            Image7.ImageUrl = "~/SiteImages/" + vUsername + "/" + GridView1.Rows[tt].Cells[60].Text;
Zack SnydersAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Have you had a look at JQuery Uploader from Blue Imp?

https://github.com/blueimp/jQuery-File-Upload/wiki

It might do what you want.
Zack SnydersAuthor Commented:
Hi Julian,
Not quite, unless I am missing something.
The link you provided handles the file selection part and the server side processing fine but the actual part I am after is to drag an image file on to a displayed image and then in the background upload the file and replace the image that I dropped the file onto with the selected image. Trust this makes sense
Julian HansenCommented:
Yes it does - it sounds like you want to make the drop zone an existing image.

https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Upload-Widgets-on-the-same-page

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Zack SnydersAuthor Commented:
Good solution
Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.