Upload files from Local Folder using Dynamic WebTwain Cab file

Question

I am very new to Dynamic WebTwain therefore apologies in advance If I am asking something to basic.

I currently have scanning functionality available in my Dynamic WebTwain but I need to implement Uploading functionality as well. For that I need to use ActiveX Object and DynamicTwain Cab Files. I am reading the documentation of WebTwain but there they are not using ActiveX or Cab files.

Currently, I am using below method for uploading,

DWObject.LoadImageEx("",1);

However, I do not want to upload the images in designated image viewer of Dynamosoft. I want to upload images in a custom Image viewer. For that, I am assuming that I will need to get the object of selected image for it to load in the custom image viewer. How can I do that?

Looking for guidance.

yushulx · Answer 1 · 2021-07-01T08:37:41.723

The LoadImageEx method is used to load local images to the Dynamic Web TWAIN image viewer, not for uploading images. To load images to a custom viewer, you just need to use the input element and FileReader.

For example:

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <input type="file" name="document" id="document" accept="image/*">
    <div id='customviewer'></div>
    <script>
        var input = document.querySelector('input[type=file]');
        input.onchange = function () {
            var file = input.files[0];
            var fileReader = new FileReader();
            fileReader.onload = function (e) {
                var dataURL = e.target.result, img = new Image();
                img.src = dataURL;
                $("#customviewer").append(img);
            }
            fileReader.readAsDataURL(file);
        }
    </script>
</body>

</html>

Using LoadImageEx:

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://unpkg.com/dwt@17.1.1/dist/dynamsoft.webtwain.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <input class="button" type="button" value="Load Images" onclick="loadFile()" />
    <div id='customviewer'></div>

    <script type="text/javascript">
        var element = document.createElement('div');
        var dwtObj = null;

        Dynamsoft.DWT.CreateDWTObjectEx({
            WebTwainId: '1'
        },
            function (obj) {
                dwtObj = obj;
                dwtObj.Viewer.bind(element);
            },
            function (err) {
                console.log(err);
            }
        );

        function loadFile() {
            if (dwtObj) {
                dwtObj.LoadImageEx('', 5,
                    function () {
                        dwtObj.ConvertToBlob(
                            [dwtObj.CurrentImageIndexInBuffer],
                            Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
                            function (result, indices, type) {
                                var urlCreator = window.URL || window.webkitURL;
                                var dataURL = urlCreator.createObjectURL(result);
                                var img = new Image();
                                img.src = dataURL;
                                $("#customviewer").append(img);
                            },
                            function (errorCode, errorString) {
                            }
                        );
                    },
                    function (errCode, error) {
                    }
                );
            }
        }
    </script>
</body>

</html>

I need to load files only from my local folder. There is a td element on page. The scan preview is displayed in this td element. I want the same for load image as well using WebTwain — Faran Saleem, Jul 01 '21 at 05:03
@FaranSaleem Is your scan preview a custom image viewer or initialized by Dynamic Web TWAIN? — yushulx, Jul 01 '21 at 05:33
Hi @yushulx. In a custom image viewer. As I told you there is td element on the page where my scanned image is loaded — Faran Saleem, Jul 01 '21 at 05:34
@FaranSaleem so you want to get the memory data hold by Dynamic Web TWAIN and load it to your custom view? — yushulx, Jul 01 '21 at 07:15
Yes I mean I want to load an image from my local workstation and then display it in the custom viewer — Faran Saleem, Jul 01 '21 at 07:23
@FaranSaleem alright. If you insist using the LoadImageEx method, you can call [ConvertToBlob](https://www.dynamsoft.com/web-twain/docs/info/api/WebTwain_IO.html?ver=latest#converttoblob) to get the image data and then load it to your custom viewer. — yushulx, Jul 01 '21 at 08:04
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/234404/discussion-between-faran-saleem-and-yushulx). — Faran Saleem, Jul 01 '21 at 09:32

Upload files from Local Folder using Dynamic WebTwain Cab file

1 Answers1