Saving Uploaded Image To Folder

Question

User931778073 posted

Hi all, I am attempting to create a C# version of the drag drop image uploader. Most of the tutorials I have seen on the subject were using  javascript xhr object and php. My problem is after sending the image to the server in the form of an xhr object, I'm not quite sure how to access that image file and save it to the folder of my choice. The following are snippets of javascript for sending an image file from the frontend to the server.

 function upload(file) {
                 xhrObj = new XMLHttpRequest;
                 xhrObj.open('post', 'DragDrop.aspx', true);
                 xhrObj.setRequestHeader('Content-Type', "multipart/form-Data");
                 xhrObj.setRequestHeader('X-File-Name', file.fileName);
                 xhrObj.setRequestHeader('X-File-Size', file.fileSize);
                 xhrObj.setRequestHeader('X-File-type', file.fileType);

                 xhrObj.send(file);
            };

The following is the C# code in the codebehind of DragDrop.aspx which I've tried to use to access the image file and save it to the folder of my choice in Visual Studio:

protected void Page_Load(object sender, EventArgs e)
        {
            Stream input = (Stream)Request.InputStream;

            Bitmap bmp = new Bitmap(input);
            Response.Clear();            
            
            switch(input.GetType().ToString())
            {
                case "jpeg":
                Response.ContentType = "image/jpeg";
                    break;
                case "gif":
                    Response.ContentType = "image/gif";
                    break;
                case "png":
                    Response.ContentType = "image/png";
                    break;
                default:
                    Response.ContentType = "application/octet-stream";
                    break;
            }

            Response.ContentType = "image/jpeg";
            bmp.Save("@'Upload\test1.jpeg'", ImageFormat.Jpeg);
        }

The code throws no error and nothing happens when I drag and drop my image into a DIV which had been designated as a droppable DIV on my webpage. I've already made sure that the javascript is working and that it's not the reason for the upload failure. Please take a look at my code and point out anything that I might be doing wrong. Thanks in advance for your help.

Answer 1

User-1716253493 posted

Try this

bmp.Save(Path.Combine(Server.MapPath("~/Upload"),"test1.jpeg"), ImageFormat.Jpeg);

Answer 2

User931778073 posted

Hi, thanks for replying. The solution you gave throws the error invalid term.

Answer 3

User-760709272 posted

Request.Files[0].SaveAs(Server.MapPath("~/uploads/file.jpg")); // you'll need to get the actual filename from Request.Files[0].FileName

Answer 4

User-322967442 posted

you need loop all data post, and only save image data

Answer 5

User931778073 posted

Thank you all for responding. I will loop through the posted data and only save image files in my final version but for now I just want to make sure that I've received the posted data.

So the situation right now is I was successful at allowing users to drag and drop their image into a designated area. However, the code in the Page_Load of DragDrop.aspx.cs failed to save the image in my Upload folder. I have switched to the following code and it still does not work.

                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                file.SaveAs(path);

Please point out what I might be doing wrong, thanks.

Answer 6

User-1926401737 posted

Hi ProgMaster,

I was successful at allowing users to drag and drop their image into a designated area.

Firstly, you should make sure that you could get the image file path.

the code in the Page_Load of DragDrop.aspx.cs failed to save the image in my Upload folder. I have switched to the following code and it still does not work.

                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                file.SaveAs(path);

Secondly, your code is in the Page_Load event, after users drag their image into droppable DIV, could the the Page_Load event be fired?

Best Regards,

Sw-ing

Answer 7

User931778073 posted

Hi,

Thanks for replying. The image file path should be acquired automatically by jquery when the user drags an image from his desktop and drops it into the designated DIV on the page.  Also as soon as the image is dropped, the upload() function (SEE BELOW) is called which posts the image to the server.

                var files = e.originalEvent.dataTransfer.files;
                var file = files[0];                
                upload(file);

I think the Page_Load event should fire even in post requests. Also the article on this link http://www.dotnetperls.com/page-load confirms my belief that it does get triggered.

Answer 8

User61956409 posted

Hi ProgMaster,

Thanks for your post.

So the situation right now is I was successful at allowing users to drag and drop their image into a designated area. However, the code in the Page_Load of DragDrop.aspx.cs failed to save the image in my Upload folder. I have switched to the following code and it still does not work.

                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                file.SaveAs(path);

Based on your discussion, I recommend to debug your code to make sure whether the Page_Load event is executed or not after user drag their image into droppable DIV.

Best Regards,

Fei Han