Dynamic Twain API call Integration with React Js

Question

I am using Dynamic Web TWAIN in React js. After the user scans the document the local save file works fine but I don't know what kind of document data to send to the server from Dynamic Web TWAIN.

I have tried this,

This is my save button logic.

  const saveOrUploadImage = (_type) => {
        if (_type !== "local" && _type !== "server") return;
        let fileName = saveFileName + "." + saveFileFormat;
        let imagesToUpload = [];
        let fileType = 0;
        let onSuccess = () => {
            setSaveFileName((new Date()).getTime().toString());
            imagesToUpload.push(props.buffer.current);

            _type === "local" ? props.handleOutPutMessage(fileName + " saved successfully!", "important") : props.handleOutPutMessage(fileName + " uploaded successfully!", "important");
        };
        let onFailure = (errorCode, errorString, httpResponse) => {
            (httpResponse && httpResponse !== "") ? props.handleOutPutMessage(httpResponse, "httpResponse") : props.handleException({ code: errorCode, message: errorString });
        };
        if (bMulti) {
            if (props.selected.length === 1 || props.selected.length === props.buffer.count) {
                if (_type === "local") {
                    switch (saveFileFormat) {
                        default: break;
                        case "tif": DWObject.SaveAllAsMultiPageTIFF(fileName, onSuccess, onFailure); break;
                        case "pdf": DWObject.SaveAllAsPDF(fileName, onSuccess, onFailure); break;
                    }
                }
                else {
                    for (let i = 0; i < props.buffer.count; i++)
                        imagesToUpload.push(i);
                }
            } else {
                if (_type === "local") {
                    switch (saveFileFormat) {
                        default: break;
                        case "tif": DWObject.SaveSelectedImagesAsMultiPageTIFF(fileName, onSuccess, onFailure); break;
                        case "pdf": {
                            DWObject.SaveAsPDF(fileName, props.buffer.current, onSuccess, onFailure)
                            console.log('GetImageURL', Dynamsoft.DWT.GetImageURL(props.buffer.current));
                            console.log("DWObject.SaveAllAsPDF()---", DWObject.SaveAllAsPDF(fileName, props.buffer.current, onSuccess, onFailure));
                            console.log("DWObject---", DWObject);
                            DWObject.SaveSelectedImagesAsMultiPagePDF(fileName, onSuccess, onFailure)
                        }; break;
                    }
                }
                else {
                    imagesToUpload = props.selected;
                }
            }
        } else {
            if (_type === "local") {
                switch (saveFileFormat) {
                    default: break;
                    case "bmp": DWObject.SaveAsBMP(fileName, props.buffer.current, onSuccess, onFailure); break;
                    case "jpg": DWObject.SaveAsJPEG(fileName, props.buffer.current, onSuccess, onFailure); break;
                    case "tif": DWObject.SaveAsTIFF(fileName, props.buffer.current, onSuccess, onFailure); break;
                    case "png": DWObject.SaveAsPNG(fileName, props.buffer.current, onSuccess, onFailure); break;
                    case "pdf": {
                        DWObject.SaveAsPDF(fileName, props.buffer.current, onSuccess, onFailure)      
                    }; break;
                }
               imagesToUpload.push(props.buffer.current);
               console.log("props.buffer.current", props.buffer.current); //0
            }
           
        }
        for (let o in Dynamsoft.DWT.EnumDWT_ImageType) {
        
            if (o.toLowerCase().indexOf(saveFileFormat) !== -1 && Dynamsoft.DWT.EnumDWT_ImageType[o] < 7) {
                fileType = Dynamsoft.DWT.EnumDWT_ImageType[o];
                break;
            }
        }
  }

I am following this GitHub repository. GitHub Link

If you know the answer to this question please tell me what should I do.

Answer 1

Steps to upload a file:

1. Initialize the file uploader:

    Dynamsoft.FileUploader.Init("", (objFileUploader) => {
                   fileUploaderManager = objFileUploader;
                   if (!fileUploaderReady) {
                       fileUploaderReady = true;
                       props.handleStatusChange(128);
                   }
               }, (errorCode, errorString) => {
                   props.handleException({ code: errorCode, message: errorString });
                   if (!fileUploaderReady) {
                       fileUploaderReady = true;
                       props.handleStatusChange(128);
                   }
               });
   

2. Configure the target file, including file name and file type:

    let protocol = Dynamsoft.Lib.detect.ssl ? "https://" : "http://"
           let _strPort = 2020;
   
           let strActionPage = "/upload";
           let serverUrl = protocol + window.location.hostname + ":" + _strPort + strActionPage;
           if (bUseFileUploader) {
               var job = fileUploaderManager.CreateJob();
               job.ServerUrl = serverUrl;
               job.FileName = fileName;
               job.ImageType = fileType;
               DWObject.GenerateURLForUploadData(imagesToUpload, fileType, (resultURL, newIndices, enumImageType) => {
                   job.SourceValue.Add(resultURL, fileName);
                   job.OnUploadTransferPercentage = (job, sPercentage) => {
                       props.handleOutPutMessage("Uploading...(" + sPercentage + "%)");
                   };
                   job.OnRunSuccess = (job) => { onSuccess() };
                   job.OnRunFailure = (job, errorCode, errorString) => onFailure(errorCode, errorString);
                   fileUploaderManager.Run(job);
               }, (errorCode, errorString, strHTTPPostResponseString, newIndices, enumImageType) => {
                   props.handleException({ code: errorCode, message: errorString });
               });
           } 
   

3. Upload the file to the server.

     DWObject.GenerateURLForUploadData(imagesToUpload, fileType, (resultURL, newIndices, enumImageType) => {
                   job.SourceValue.Add(resultURL, fileName);
                   job.OnUploadTransferPercentage = (job, sPercentage) => {
                       props.handleOutPutMessage("Uploading...(" + sPercentage + "%)");
                   };
                   job.OnRunSuccess = (job) => { onSuccess() };
                   job.OnRunFailure = (job, errorCode, errorString) => onFailure(errorCode, errorString);
                   fileUploaderManager.Run(job);
               }, (errorCode, errorString, strHTTPPostResponseString, newIndices, enumImageType) => {
                   props.handleException({ code: errorCode, message: errorString });
               });
   

Alternative to the file uploader, you can invoke the HTTPUpload() method:

DWObject.HTTPUpload(serverUrl, imagesToUpload, fileType, Dynamsoft.DWT.EnumDWT_UploadDataFormat.Binary, fileName, onSuccess, onFailure);