Error: Can't find end of central directory : is this a zip file ? when parsing a shp file

[helxsz]

I am working with vue3 to load a shp file as shown below, this shp file can work out in other shapefile based software

      <el-upload
        ref="uploadRef"
        action="/"
        v-model:file-list="state.uploadList" 
        :on-change="uploadFile"
        >
            <template #trigger>
                <el-button type="primary">select file</el-button>
            </template>

    </el-upload>

const uploadFile = async (file) => {
    const format = file.name.split('.').at(-1).toLowerCase();
    let geojson: FeatureCollection<any>;
    switch (format) {
      case 'shp': {
        console.log( await file.raw.arrayBuffer()  );
        const parsed = await shp(await file.raw.arrayBuffer());
        geojson = parsed;
        break;
      }
  }
}

await file.raw.arrayBuffer() outputs

ArrayBuffer(59664156) byteLength: 59664156

but shp(await file.raw.arrayBuffer()); throws out an error

Uncaught (in promise) Error: Can't find end of central directory : is this a zip file ? If it is, see https://stuk.github.io/jszip/documentation/howto/read_zip.html
    at h.readEndOfCentral (shpjs.js?v=9c11b5bb:1045:63)
    at h.load (shpjs.js?v=9c11b5bb:1065:40)
    at shpjs.js?v=9c11b5bb:290:23
    at async unzip_default (shpjs.js?v=9c11b5bb:6488:3)
    at async parseZip (shpjs.js?v=9c11b5bb:6970:15)
    at async Module.loadGeojson (shp.ts:61:24)

shpjs 's version is "^5.0.1".

[kissu]

Related question: https://stackoverflow.com/q/78659655/8816585

[calvinmetcalf]

if the uploaded file ends in .shp it's a shapefile not a zipfile so you need to pass it to parseShp which you can import via import {parseShp} from 'shpjs' or it may be available as shp.parseShp.

Note that won't handle the projection or the dbf file, if that's the case you'll want allow them to upload all the files need and then pass it to the advanced api

[calvinmetcalf]

actually in the new version I'm about to publish you should be able to pass shp({shp: await file.raw.arrayBuffer()}) and get a property-less shapefile