Upload Shapefile

JamesCrandall — Sun, 12 Dec 2021 09:34:01 GMT

I'm attempting to integrate THIS example into an existing widget I'm developing. So far, I've added the "Choose File" dialog that allows for navigating to a directory

Pretty simple, just added this to my widget's html:

            <div class="jimu-btn" data-dojo-attach-event="click:toggleManualDrawTool">Manually Draw Boundary</div>
            <div class="jimu-btn finish-select" data-dojo-attach-event="click:onConfirmSelection">Add Selected Features to Boundary</div>
            
            <br /><br />
            <form enctype="multipart/form-data" method="post" id="uploadForm">
                <div class="field">
                    <label class="file-upload">
                        <span><strong>Upload a Shapefile</strong></span>
                        <input type="file" name="file" id="inFile" />
                    </label>
                </div>
            </form>

            <br /><br />
‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Now I'm trying to implement the actual process to get the upload processed into the graphics layer. I'm running into an issue when attempting to hook this into the widget's js file.

So far I've just attempted to implement as in the example, by adding the various functions within my widget.js file and then adding this into my startup() function

startup: function () {
            on(dom.byId("uploadForm"), "change", function (event) {
                var fileName = event.target.value.toLowerCase();

                if (sniff("ie")) { //filename is full path in IE so extract the file name
                    var arr = fileName.split("\\");
                    fileName = arr[arr.length - 1];
                }
                if (fileName.indexOf(".zip") !== -1) {//is file a zip - if not notify user
                    console.log("genFeatColl function fired")
                    this.generateFeatureCollection(fileName);
                }
                else {
                    dom.byId('upload-status').innerHTML = '<p style="color:red">Add shapefile as .zip file</p>';
                }
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It hits the first log "genFeatColl function fired", however I'm getting this error on line 11 ("this.generateFeatureCollection")

Uncaught TypeError: this.generateFeatureCollection is not a function
at HTMLFormElement.<anonymous>

Re: Upload Shapefile

RobertScheitlin__GISP — Mon, 23 Apr 2018 15:14:15 GMT

James,

The scope of this is not what you need because you are in another functions scope.

Use lang.hitch.

on(dom.byId("uploadForm"), "change", lang.hitch(this, function (event) {

Re: Upload Shapefile

JamesCrandall — Mon, 23 Apr 2018 15:19:30 GMT

Thank you Robert.

topic Re: Upload Shapefile in Web AppBuilder Custom Widgets Questions

Upload Shapefile

Re: Upload Shapefile

Re: Upload Shapefile