Drag and Drop File upload: Read PDF file in ASP.Net MVC

Shyla
 
on May 03, 2022 11:00 PM
339 Views

Hi dharmendr,

How can I combine the Set AcroFields value in TextBox in ASP.Net MVC AcroFields code with Implement Drag and Drop File upload in ASP.Net MVC.

I currently need the dropzone to trigger the event.

The view does not trigger the controller for the text to be filled into the textbox fields on the view.

The current view code:

<input type="button" id="btnUpload" value="Upload" />

and the TextBox1 TextBox field

<div id="TextBox"></div>

Thanks

Cheers

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on May 05, 2022 03:47 AM

Hi Shyla,

Please refer below sample.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(HttpPostedFileBase postedFile)
    {
        string path = Server.MapPath("~/Uploads/");
        StringBuilder sb = new StringBuilder();
        if (postedFile != null)
        {
            string fileName = System.IO.Path.GetFileName(postedFile.FileName);
            postedFile.SaveAs(path + fileName);
            byte[] bytes = System.IO.File.ReadAllBytes(path + fileName);
            using (var pfdReader = new PdfReader(path + fileName))
            {
                for (int page = 1; page <= pfdReader.NumberOfPages; page++)
                {
                    ITextExtractionStrategy strategy = new SimpleTextExtractionStrategy();
                    string currentText = PdfTextExtractor.GetTextFromPage(pfdReader, page, strategy);

                    currentText = Encoding.UTF8.GetString(Encoding.Convert(Encoding.Default, Encoding.UTF8, Encoding.UTF8.GetBytes(currentText)));
                    sb.Append(currentText);
                }
            }
        }

        return Content(sb.ToString());
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        #dropSection {
            height: 300px;
            width: 600px;
            background-color: skyblue;
        }

        #btnUpload {
            display: none;
        }

        .active {
            background-color: yellow !important;
        }
    </style>
</head>
<body>
    <div id="dropSection">
    </div>
    <br />
    Uploaded Files:
    <hr />
    <div id="uploadedFiles">
    </div>
    <input type="button" id="btnUpload" value="Upload" />
    <br />
    <span id="pdfData"></span>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script src="~/Scripts/filedrop.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#dropSection").filedrop({
                fallback_id: 'btnUpload',
                fallback_dropzoneClick: true,
                url: '@Url.Action("Index")',
                //allowedfiletypes: ['image/jpeg', 'image/png', 'image/gif', 'application/pdf', 'application/doc'],
                allowedfileextensions: ['.pdf'],
                paramname: 'postedFile',
                maxfiles: 1, //Maximum Number of Files allowed at a time.
                maxfilesize: 2, //Maximum File Size in MB.
                dragOver: function () {
                    $('#dropSection').addClass('active');
                },
                dragLeave: function () {
                    $('#dropSection').removeClass('active');
                },
                drop: function () {
                    $('#dropSection').removeClass('active');
                },
                uploadFinished: function (i, file, response, time) {
                    $('#uploadedFiles').append(file.name + '<br />');
                    $('#pdfData').html(response);
                },
                afterAll: function (e) {
                    //To do some task after all uploads done.
                }
            })
        })
    </script>
</body>
</html>

Screenshot